כיצד תבחנו אם האתר שלכם נגיש ב-5 צעדים פשוטים

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

בעלי אתרים צריכים לוודא ששירותי האינטרנט והאתרים שלהם נגישים על פי התקן הישראלי 5568 (להלן: "התקן") המאמץ את הנחיות הנגישות WCAG 2.0 (Web Content Accessibility Guidelines) של קונסורציום הרשת הכלל- עולמית – W3C עם מספר שינויים קלים. רמת הנגישות הנדרשת לפי התקן היא AA מתוך שלוש רמות A, AA, AAA.

האם האתר שלך נגיש?

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

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

1. כותרת עמוד/דף (title)

כותרת הדף היא התוכן המוצג בכרטיסיית הדפדפן. היא צריכה לתאר במדויק ובקצרה את תוכן הדף.

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

כיצד תבדקו?

• הקישו את כתובת האתר שברצונכם לבדוק.
• היעזרו בעכבר כדי לרחף מעל לשונית הדפדפן כדי לראות את כותרת העמוד המלאה; או
• לחצו על Ctrl + D במחשבי חלונות או על cmd + D כדי לפתוח את תיבת הדו-שיח של הוספת סימניה.

מה לבדוק?

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

דוגמא טובה

אתר הכנסת – דף הבית

דוגמא לא טובה

אתר הכנסת – דף פנימי

כותרת מדויקת יותר הייתה צריכה להיות: "אתר הכנסת – היום בכנסת".

2. ניווט מקלדת

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

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

כיצד תבדקו?

הקישו את כתובת האתר שברצונכם לבדוק.

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

• כדי לנווט אחורה, לחצו על 'Shift-Tab'.
• כדי לנווט בתוך אלמנטים כגון רשימות נפתחות וסרגלי תפריט, לחצו על מקשי החיצים (כשאתם בתוך הרכיב).
• לבחירת פריט מרשימה נפתחת:
  1. הקישו 'Tab' לתיבת הרשימה,
  2. השתמשו במקשי החיצים כדי לנווט לפריטים ברשימה,
  3. כאשר יש פוקוס על פריט ברשימה, לחצו על מקש Enter או על מקש הרווח כדי לבחור פריט זה.

מה לבדוק?

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

3. חלופה טקסטואלית

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

החלופה הטקסטואלית מופיעה בקוד ואינה ויזואלית על הדף.

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

אם התמונה נועדה לקישוט בלבד או הטקסט המסביר אותה נמצא כבר על הדף בסמוך לה, אז היא צריכה להיות ריקה (alt = "").

מה לבדוק?

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

כיצד לבדוק?

• לחצו על התוסף של Web Developer, בחרו Images ולאחר מכן, Outline Images Without Alt Attribute.
• בחנו את כל הרכיבים שלהם אין חלופה טקסטואלית ודאגו לקבוע להם חלופה כזו. אם הרכיב הוא לקישוט בלבד או טקסט הסבר כבר מופיע על הדף, יש לדאוג שחלופה ריקה תוגדר.
• לחצו על התוסף של Web Developer, בחרו Images ולאחר מכן, Outline Images Alt Attribute.
• בחנו את כל הרכיבים שלהם קיימת חלופה טקסטואלית ובדקו את איכות הטקסט. בדקו שהטקסט שנבחר מעביר כנדרש את המידע בתמונה.
• אם התמונה היא כפתור, קישור, נקודה חמה במפה, ודאו שקיימת חלופה ושהתוכן שלה אכן מתאר את מהותה ותפקידה.

4. כותרות

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

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

מה לבדוק?

• בכל דף יש לפחות כותרת באחת מרמה 1.
• טקסט שנראה כמו כותרת מסומן ככותרת.
• טקסט המסומן ככותרת הוא באמת כותרת קטע רעיונית מבחינת התוכן.
• היררכיית הכותרת היא בעלת משמעות.

כיצד לבדוק?

• לחצו על התוסף של Web Developer, בחרו "Information" ואז "View Document Outline"
• ודאו שהכותרת הראשונה בדף היא כותרת ברמה 1 – h1.
• השווה את מתווה המוצג לתצוגה החזותית של הדף.
• האם האלמנטים שנראים כמו כותרות בדף נמצאים במתווה?
• האם ההיררכיה בה מסודרות הכותרות במתווה, תואמת את התקן?

5. הגדלת טקסט

יש אנשים שצריכים להגדיל את תוכן האינטרנט כדי שיוכלו לקרוא אותו.

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

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

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

מה לבדוק?

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

כיצד לבדוק?

• הגדלת טקסט בלבד בפיירפוקס: מתפריט הדפדפן, בחרו View > Zoom > Zoom Text Only
• בדפדפן Internet Explorer בחרו: View > Text Size > Largest
• רק הטקסט אמור לגדול.
• הגדילו את הטקסט ל- 200% ובדקו.