מעבר להנחיות: טכניקות נגישות מתקדמות
כאשר בונים אתרי אינטרנט נגישים, רוב המפתחים ממלאים אחר ההנחיות של w3c – w3c web content accessibility guidelines או בקיצור wcag. התנהלות זו הגיונית לגמרי שהרי הנחיות אלו הם הנחיות הנגישות המקיפות ביותר הזמינות על הרשת כיום.
הגרסה הראשונה של ההנחיות פורסמה כבר בשנת 1999. הפרסום הקרוב של המהדורה השנייה נדמה כמפוקפק ומעורר שאלות האם גרסה חדשה של ההנחיות היא בחזקת שיפור המצב הקיים או, למעשה, צעד אחורה.. הבעיה המרכזית של גרסת הנחיות הניגשות הצפויה, נעוצה בעצם טבעם של ההנחיות כהנחיות בלבד; הנחיות שאין להתייחס אליהן תמיד באופן מילולי.
כדי להבטיח שהאתר שלכם יהיה באמת נגיש תצטרכו לעמול מעבר להמלצות המפורטות בהנחיות של w3c. בהמשך הדברים נבחן כמה מהטכניקות אותן תוכלו ליישם בקלות יחסית כדי להבטיח רמת נגישות גבוהה אף מעבר לנגישות המופקת ממילוי קפדני של הנחיות wcag.
טקסט מוסתר
טקסט מוסתר יכול להיות אפקטיבי מאוד עבור משתמשי קוראי מסך (screen readers), לרוב אם לא תמיד אלו הם משתמשים עם קשיי ראייה. אם משתמשים אלו נתקלים בקשיים בפרוש או הבנת קטע מסוים בגלל מיעוט טקסט תיאורי, אזי תוכלו לפתור קושי זה בקלות על ידי הוספת טקסט תיאורי נוסף שאותו תסתירו משאר המשתמשים הרואים ללא קושי.
בעוד יש הגורסים שחייבת להיות זהות מלאה בין הטקסט המוגש למשתמשים רואים ובין הטקסט המוצג למשתמשים כבדי ראייה, הניסיון שלי מצביע על כך שהוספת קונטקסט למשתמשים כבדי ראייה מסייעת להם משמעותית. מובן שאותו טקסט נוסף המסייע לכבדי ראייה, עשוי להיות הכבדה מיותרת עבור כל אותם משתמשים רואים ולכן נסתיר את הטקסט הנוסף ממשתמשים אלו.
ישנן מספר שיטות להסתרת טקסט, כל שיטה ומידת ה"היתמכות" שלה. כלל ה-css הבא הוא היעיל ביותר שעובד עבורי
.hidden {
position: absolute;
left: -9000px;
top: 0;
}
כלל זה מציב את הטקסט מחוץ למסך ובכך מסתיר אותו ממשתמשים רואים. כדי לממש כלל css זה כל שעליכם לעשות הוא לייחס מחלקה זו לכל מכולת טקסט אותו תבקשו להסתיר class="hidden", פשוט.
אם אתם מתפתים להשתמש בהצהרה display: none או display: hidden לצורך הסתרת טקסט, ראו עצמכם כמוזהרים מפני אותו מיתוס על פיו "קוראיי מסך" (screen readers), מתעלמים לגמרי מגיליונות סגנון (style sheets) – הם לא, רוב קוראי המסך לא יקראו טקסט שמוסתר באמצעות display: none או display: hidden.
ההזדמנויות בהם תרצו לשקול הוספת טקסט מוסתר הן:
- כותרות – כל מקטע ומקטע בעמוד ראוי שילווה בכותרת מקדימה לפניו. בדרך זו משתמשי קוראי מסך (screen readers) לומדים על סיומו של המקטע הקודם ועל התחלתו של מקטע חדש. כך למשל, בראש המקטע של תפריט ניווט, הוסיפו כותרת כמו "תפריט ניווט באתר".
- תוויות טפסים – כל פריט טופס ראוי שיהיה לפניו, תווית (label) בסמיכות, שאם לא משתמשי קוראי מסך לא ידעו למה משמש אותו פריט טופס.
- שדות תאריכי לידה – שדות תאירך לידה (או כל תאריך אחר) עם שדות נפרדים ליום, חודש ושנה הם השדות המועדים לפורענות בשל הנטייה שלא לייחס להם תוויות מקדימות. כדי להפוך שדות אלו לנגישים יותר, הציבו את התווית החזותית "תאריך לידה" לפניי שלושת שדות טופס אלו ולאחר מכן, הוסיפו תווית מוסתרת לפניי כל אחד ואחד מהשדות "יום לידה", "חודש לידה", "שנת לידה".
- קישורי דילוג פנימיים – קישור דילוג (skip link) הם קישורים מוסתרים המוצבים בראש העמוד אשר מאפשרים דילוג בין אזורי תוכן שונים בעמוד. קישורי דילוג הם כלי יעיל במיוחד עבור קוראי מסך ומשתמשים אשר מסתייעים בלעדית במקלדת, בכך שהם מאפשרים למשתמש דילוג ישיר לתוכן הרצוי ופותרים אותו מהכורך למצוא את דרכו דרך תפריטי ניווט ופריטי מידע אחרים.
טקסט קישור פשוט, קונבנציונאלי ותמציתי
כשיטה לסקירת עמוד, למשתמשי קוראי מסך יש את היכולת ל"קרוא" לרשימת קישורים בעמוד ולקפוץ ישירות לקישור שמעניין אותם.
ידוע כבר לכל שטקסט הקישור צירך להיות משמעותי גם מחוץ להקשרו הוויזואלי והכן זו גם בדיוק ההנחיה של w3c. ברור שטקסט קישור כמו "לחץ כאן" חסר כל משמעות כאשר הוא מופיע באותה רשימת לינקים לניווט מהיר בעמוד עליה אנו דנים כאן. בנוסף לכך, חשוב מאוד שטקסט קישור יהיה:
- תמציתיות – הקפידו על תיאור תמציתי שיקל על משתמשי קוראי מסך כאשר הם עוברים על רשימת הלינקים של העמוד.
- סדר חשיבות – הציבו את המילים הרלבנטיות ביותר בתחילת הקישור כך שמשתמשי קוראי מסך יוכלו לדלג בבטחה ובקלות על קישורים לא רלבנטיים מבלי לשמוע את כל הטקסט עד סופו. כל למשל טקסט הקישור "לחץ כאן כדי ללמוד עוד על השירותים שלנו" הוא דוגמא טובה לניסוח גרוע מבחינת סדר החשיבות של מילות הקישור. במקרה זה יעיל הרבה יותר להשתמש בטקסט הקישור "שירותים".
- קונבנציונאליות – הימנעו משימוש ב- buzzwords או מניסוחים להם יש חלופות פשוטות ומקובלות יותר. כך יוכלו משתמשי קוראי מסך למיין קישורים לפי סדר אלף ביתי ולקפוץ ישירות לאות המצופה לעמוד בראש המילה המקובלת. כך למשל, אם תמירו את הקישור המקובל "אודות החברה" בטקסט "פנה אלינו" הדבר יקשה על משתמשי קוראי מסך למצוא בקלות את הלינק המצופה ליצירת קשר. טקסט קישור הוא חשוב ביותר גם עבור משתמשים הנעזרים בתוכנות הגדלה, או משתמשים עם לקויות למידה. הרגלי השימוש של משתמשים אלו מאפיינים בקריאה סופר סלקטיבית ובמיקוד תשומת ליבם אל כל מה שמוצג בניגודיות גבוהה.
הצגת כלי שינוי גודל גופן
אפשרות הגדלת גודל הגופן היא חיונית ביותר עבור משתמשים עם קשיי ראיה, או כך לפחות מקובל לחשוב. בפועל, בחינת דפוסי שימוש משתמשים מצביע פעם אחר פעם כל כך שהמשתמשים לא יודעים להשתמש בפונקציה זו ולעיתים בכלל לא מודעים לקיומה.
באמצעות הצגה ויזואלית של כלי שינוי גודל גופן (font resizer) , כך כל המשתמשים מתוודעים לאפשרות הגדלת הטקסט ויכולים להשתמש בה במקרה הצורך. למעוניינים ללמוד כיצד לאפשר שינוי גודל פונט באתר שלכם קראו מאמר זה על שינוי גיליונות סגנון .
במקרה שאינכם יודעים כיצד לשנות את גודל הטקסט בדפדפן, פשוט בחרו בתפריט תצוגה >> גודל גופן או לחלופין תגללו מטה בעזרת כפתור הגלילה של העכבר בעודכם מחזיקים את מקש "control" לחוץ.
הסברים תחילה
אם אתם מוספים הסברים לפונקציונאליות אותה אתם מציעים באתר האינטרנט שלכם, וודאו כי ההסברים ממוקמים לפניי הפונקציונאליות אותה אתם מציעים לקהל. זכרו שמשתמשי קוראי מסך מקשיבים לדף לפי סדר כתיבתו כך שהסברים הממוקמים לאחר הפעילות ממוקמים למשעה מחוץ להקשרם.
מיקום הנחיות והסברים נכון, משמעותי גם עבור כל אותם משתמשים הנעזרים בתוכנות "זכוכית מגדלת". אופן השימוש של משתמשים אלו בעמודי אינטרנט הוא כך שהעמוד מוצג בחלקים קטנים של האתר (בתצוגה גדולה), כך שמיקום לא מדויק של הנחיות והסברים עלול לחמוק מעניהם.
טפסיי אינטרנט הם המקרה הנפוץ ביותר של פעילות הכוללת הנחיה. וודאו שכל הנחיה והסבר ימוקמו מעל הטופס עצמו ולא מתחתיו שכן במקרים רבים הנחיות אלו כוללות מידע חשוב אודות שדות נדרשים והודעות שגיאה.
כותרות גדולות
שימוש מושכל בכותרות הוא קריטי שכן משתמשים נעזרים בכותרות להתמצאות כללית ולאיתור יעיל אחר מבוקשם.
כותרות חשובות במיוחד עבור כל אותם משתמשים אשר מתקשים בקריאה מקוונת, בהם משתמשי תוכנות מגדילות ומשתמשים עם קשיי למידה או דיסלקציה.
כאשר משתמשים אלו סורקים עמוד אינטרנט, לרוב הם יבחינו בצבעים וצורות ופחות במילים עצמם. שימוש בגופנים גדולים עבור כותרות יאפשר למשתמשים אלו לאתר ביתר קלות את המידע בו הם מעוניינים
מצב מיקוד של קישורים
משתמשי מקלדת (מקלדת בלבד) מנווטים את דרכם מלינק ללינק באמצעות מקש ה- tab (כך גם מפריט טופס למשנהו). הבעיה בסיטואציה זו היא הקושי לזהות את מיקומנו ביחס לדף עצמו. שימוש בצבע רקע עבור לינקים במצב נבחר (focus), מקל מאוד על קושי זה. ניתן לממש זאת באמצעי כלל פשוט של css:
a:active, a:focus {
background: yellow;
}
הגדלת שטח הלחיצה של קישורים
יש ממשתמשי אינטרנט עם בעיות מוטוריות שישתמשו באופן בלעדי במקלדת ויש ביניהם גם כאלו שיצליחו לעשות גם שימוש מוגבל בעכבר. כדי להקל על פעולת הניווט של קבוצות משתמשים אלו, נסו להגדיל את שטח "ההקלקה" ככל שניתן. למשל, בהינתן רשימת ניווט אנכית, קל להגדיל את שטח "ההקלקה" למלוא רוחב העמודה המכילה על ידי החלת הסגנון display: block; לכל קישור. ראה מדריך בנושא עיצוב רשימות ראה מדריך בנושא עיצוב רשימות פריטים, לקבלת מידע נוסף על קישורים נגישים יותר.
מסקנה
לצד חשיבותן הרבה של הנחיות w3c, אם תחפצו באתר נגיש באמת תאלצו לעמול מעבר להנחיות המקובלות. מימוש ההמלצות בכתבה זו יכול להיות צעד ראשון וחשוב בכיוון זה.
לצורך בחינה אמינה של נגישות אתר, חשוב ל"עבור" על כל האתר באמצעות קורא מסך ותוכנת הגדלה ניתן להוריד גרסת התנסות של ג'וז - קורא מסך נפוף ביותר וגם של מאג'יק – תוכנת הגדלת מסך או לנסות אחת מהשותפות האלטרנטיביות.
טרנטון מוס הינו מומחה בתחום נגישות (accessibility) ושמישות (usability) הפועל בלונדון אנגליה.
