המלצות לעיצוב נגיש

האינטרנט הינו מדיום טקסטואלי בעיקרו. היכולת להעביר מסרים באמצעות טקסטים תלויה בראש ובראשונה ביכולת המשתמש לתפוס (לקלוט) את הטקסט באמצעות החושים שלו. סוג הפונט, גודל הפונט, מרווח בין שורות, צבע הטקסט יחסית לצבע הרקע עליו הוא נמצא (קונטרסט) ועוד מגוון משפיעים על יכולת המשתמש לתפוס את הטקסט באמצעות חוש הראיה. אנשים עם לקות ראיה יעדיפו טקסטים גדולים יותר, ריווח מספק יותר בין שורות ובין אותיות ובעיקר קונטרסט גבוה בין הרקע לטקסט.

בדפדפנים החדשים קיימת אפשרות מובנת להגדלת התצוגה. החיסרון הגדול של הגדלת התצוגה באמצעות זכוכית המגדלת של הדפדפן היא יצירה של גלילה רוחבית.
שינוי של גודל הפונט בלבד וטיפול בשינוי הגודל של ה containers כך שלא תיווצר גלילה רוחבית, עדיף על פני שימוש בזכוכית מגדלת.

בנוסף, עליכם לקחת בחשבון שגולשים לא תמיד יגדילו את התצוגה ביוזמתם ובמקום זאת הם עלולים לנטוש את האתר. על כן, המלצתנו:

  • השתמשו בגודל פונט מספיק גדול ואל תסתכנו בנטישה של האתר.
  • אפשרו הגדלה של הפונט באמצעות הדפדפן או באמצעות כלי להגדלת פונט באתר עצמו.
  • ודאו שהאתר נראה טוב וטקסטים אינם נחתכים או נעלמים כאשר מגדילים את הפונט וכאשר משתמשים בזכוכית מגדלת.
  • בצעו את כל הגדרות התצוגה ב CSS – אל תגדירו תצוגה ב inline.

הנחיות נגישות רלוונטיות

הנחיה 1.4 בר-הבחנה: יש להקל על המשתמשים לראות ולשמוע תכנים לרבות הפרדת חזית מרקע.

1.4.3 קונטרסט (מינימום): בהצגה החזותית של טקסט ותמונות-טקסט ישנו יחס-קונטרסט של לפחות 4.5:1, מלבד המקרים הבאים: (רמה AA)

  • טקסט גדול: לטקסט בקנה-מידה גדול ולתמונות-טקסט בקנה מידה גדול יש יחס קונטרסט של לפחות 3:1;
  • עבור טקסט או תמונות-טקסט שהם חלק ממרכיב של ממשק משתמש בלתי פעיל, או שהם קישוט בלבד, או שאינם גלויים לאף אחד, או שהם חלק מתמונה המכילה תכנים חזותיים חשובים אחרים, אין דרישת מינימום לקונטרסט.

לוגו: לטקסט שהינו חלק מלוגו או משם מותג אין דרישת מינימום לקונטרסט.

1.4.4 שינוי גודל טקסט: מלבד כיתובים ותמונות-טקסט, ניתן לשנות גודל טקסט ללא טכנולוגית-עזר עד 200 אחוז בלי לאבד תיפקוד של התכנים. (רמה AA)

טכניקות לגודל טקסט

  1. הגדירו גודל הפונט ביחידות יחסיות – אחוזים, שם (small, large….), ו- em.
  2. חישוב גודל ומיקום לתמיכה בהגדלה תקינה של טקסט
  3. ספקו באתר אמצעי להגדלת הטקסט עד 200%
  4. השתמשו ב liquid layout

כלים לבדיקת קונטקסט

דוגמאות לשליטה בגודל וקונטרסט