10 טיפים חשובים להנגשת האתר שלכם

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

ריכזנו לפניכם את הטיפים הבולטים והחשובים ביותר בנושא הנגשה, בשלב הפיתוח וההקמה של האתר:

1. בחרו מערכת ניהול תוכן שתומכת בנגישות
2. בצעו שימוש ראוי בכותרות במטרה לארגן את מבנה התוכן בעמוד
3. תנו טקסט alt אמיתי לתמונות
4. תנו לקישורים כותרות ותיאורים ברורים
5. השתמשו בצבע בזהירות
6. עצבו את הטפסים לנגישות
7. שימוש בטבלאות עבור נתונים, לא עבור פריסת עמוד
8. ודאו שכל התוכן נגיש בעזרת המקלדת בלבד ובצורה הגיונית
9. השתמשו ב-ARIA וציוני דרך
10. הפכו תוכן דינמי לנגיש

1. בחרו מערכת ניהול תוכן שתומכת בנגישות

ישנן המון מערכות ניהול תוכן זמינות התומכות בהנגשה כברירת מחדל, כמו דרופל, וורדפרס או מערכות דומות.

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

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

2. בצעו שימוש ראוי בכותרות במטרה לארגן את מבנה התוכן בעמוד

משתמשי קורא מסך משתמשים בתגי כותרת כדי לנווט בתוכן. באמצעות שימוש בכותרות (<h1>, <h2>, וכו'..) בצורה נכונה אסטרטגית, התוכן של האתר שלכם יהיה מאורגן היטב ויקרא בקלות על ידי קוראי מסך.

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

דוגמאות של שימוש נכון בכותרות:

• השתמשו בתג <h1> עבור התיאור הבסיסי והכולל של הדף.
• הימנעו משימוש בתג <h1> עבור משהו אחר מלבד הכותרת של האתר והכותרת של דפים בודדים.
• השתדלו לא לדלג על תגי כותרת (למשל, לקפוץ מתג <h1> לתג <h3>), משתמשי קוראי המסך עלולים לתהות האם חסר תוכן בעמוד.

3. תנו טקסט alt אמיתי לתמונות

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

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

4. תנו לקישורים כותרות ותיאורים ברורים

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

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

5. השתמשו בצבע בזהירות

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

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

6. עצבו את הטפסים לנגישות

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

כל שדה בטופס צריך תווית תיאור ממוצבת היטב. לדוגמה, אם השדה עבור שמו של האדם, התיאור צריך להיות ברור מאוד "שם מלא" או במידה ומשתמשים ב2 שדות שונים יש לציין "שם פרטי" ו"שם משפחה".
השתמשו בתג <label> או ARIA (ראו טיפ # 9) כדי לשייך את טקסט התווית עם השדה בטופס.

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

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

אם שדות מסוימים בטופס הינן שדות חובה, השדה צריך להיות מסומן בהתאם, ומוגדר נכון כך שקורא המסך יזהה אותו. בדרך כלל, שדות חובה מסומנים בכוכבית, אשר לא כל קוראי המסך יודעים לקרוא אותה. כוכביות (או סימנים חזותיים דומים) עדיין ישמשו עבור משתמשי רואים או משתמשים עם ליקויי למידה. שדה חובה עבור קורא מסך יוגדר על ידי הוספת ARIA required="true" או ARIA required="false" עבור שדות אופציונליים. לאחר שליחת הטופס, משתמש יצטרך לקבל התראת אישור שליחה או אינדיקציה לשגיאות בשליחה. אנו ממליצים לכלול את מספר השגיאות בכותרת העמוד (לאחר שהטופס נשלח), כך שהמשתמש יהיה מודע מייד לכמות השגיאות. אם המשתמש שלח טופס המכיל שגיאות, המשתמש אמור לקבל הודעה המציינת מה הן השגיאות.

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

7. שימוש בטבלאות רק עבור נתונים, לא עבור פריסת עמוד

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

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

8. ודאו שכל התוכן נגיש בעזרת המקלדת בלבד ובצורה הגיונית

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

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

9. השתמשו ב-ARIA וציוני דרך

ARIA (יישומי אינטרנט עשירים נגישים / Accessible Rich Internet Applications) הוא פרט טכני קל ועוצמתי שמבטיח שמבנה האתר שלכם יהיה נגיש. על ידי הקצאת תפקידי ARIA וציוני דרך לאלמנטים מסויימים, היכולת של משתמשי קורא המסך לניווט תשתפר משמעותית. ניתן להוסיף בקלות תפקידי ARIA וציוני דרך להוסיף בקלות לקוד ה-HTML של העמוד שלכם, בדיוק באותו אופן שבו מוסיפים קלאסים בכדי לטעון תכונות מ-CSS.

דוגמאות נפוצות של שימוש ב-ARIA:

תפקידים ב"ניווט" ו-"תפריט": משמשים כדי לזהות את תפריט הניווט הראשי ואת תפריט העמודים.
ציוני דרך של "באנר" ו-"תוכן ראשי": משמשים כדי לזהות את ה-header את התוכן העיקרי של העמוד.
התראות של "live" ו-"atomic": משמשות כדי לעזור למשתמשי קורא המסך עם שינויים דינאמיים בדף, כגון נתוני מניות או מסנני חיפוש.
טפסים: ARIA מאפשרת תוספת של תיאורי טקסט לשדה טופס ואת הזיהוי הנדרש של הכפתורים בטופס (מידע נוסף תחת טיפ מספר 6).

10. הפכו תוכן דינמי לנגיש

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

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

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