טקסטים – צבע וגודל

המידע באינטרנט הוא טקסטואלי ברובו. מידת ההצלחה של העברת המסרים הטקסטואלים תלויה בתפיסת הטקסט על ידי המשתמש באמצעות חושיו. אופן תצוגת הטקסט- גודלו, סוג הפונט, צבע הפונט ביחס לרקע, הרווח בין השורות- כל אלו מחזקים או מחלישים את יכולת קליטתו החזותית של הטקסט על ידי המשתמש. יכולת הקליטה של משתמשים בעלי לקויות ראיה תגבר בתצוגת טקסט גדול יותר, בעל צבע בולט ביחס לרקע ובמרווח רחב יותר בין השורות.
בדפדפנים החדשים ניתן להשתמש באפשרות הגדלת תצוגה. אולם בשימוש בזכוכית המגדלת של הדפדפן נוצרת גלילה רוחבית וזהו חסרונה הגדול של אפשרות זו. עדיף לשנות את גודל הפונט וגודל ה 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

כלים לבדיקת ניגודיות

• Colour Contrast Check
Colour Contrast Analyser
Colour Contrast Visualiser
Contrast Analyser, Version 2.0

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

שינוי גודל וניגודיות כחלק ממשק המשתמש
העדפות נגישות באתר Manchester City

שינוי גודל גופנים