→ חזרה לבלוג

נגישות אתר לעיוורים ולקויי ראייה - המדריך המלא

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

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

איך עיוורים ולקויי ראייה גולשים באינטרנט?

אנשים עם לקויות ראייה משתמשים במגוון טכנולוגיות מסייעות, בהתאם לרמת המוגבלות שלהם:

עיוורים מלאים משתמשים בעיקר בקוראי מסך (Screen Readers) - תוכנות שקוראות בקול את תוכן המסך. קורא המסך עובר על הקוד של העמוד, מזהה את המבנה (כותרות, פסקאות, קישורים, תמונות), וקורא את התוכן בקול סינתטי. קוראי המסך הנפוצים ביותר הם JAWS, NVDA (חינמי), ו-VoiceOver של אפל.

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

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

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

מה זה קורא מסך וכיצד הוא עובד?

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

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

• אם יש לכם תמונה של מוצר בלי טקסט חלופי (alt text), קורא המסך יגיד "תמונה" או יקריא את שם הקובץ - למשל "IMG_3847.jpg" - שזה חסר משמעות
• אם הכותרות באתר שלכם הן לא באמת תגיות כותרות (h1, h2, h3) אלא טקסט רגיל שעוצב להיראות גדול, קורא המסך לא ידע שזו כותרת ולא יאפשר ניווט לפיה
• אם כפתור בנוי מ-div עם אירוע onclick במקום מתגית button, קורא המסך לא ידע שזה אלמנט שניתן ללחוץ עליו

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

טקסט חלופי (Alt Text) - למה זה כל כך חשוב?

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

כללים לכתיבת טקסט חלופי טוב:

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

ARIA - שפת הגישור בין האתר לקורא המסך

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

הנה המאפיינים החשובים ביותר:

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

aria-labelledby: מצביע על אלמנט אחר שמשמש כתווית. שימושי כשהתווית כבר קיימת במקום אחר בדף.

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

role: מגדיר את התפקיד של אלמנט. למשל, role="navigation" אומר לקורא המסך שזה אזור ניווט, role="button" אומר שזה כפתור.

aria-expanded: מציין אם אלמנט מתקפל (כמו תפריט נפתח) פתוח או סגור.

aria-live: מסמן אזורים בדף שהתוכן שלהם מתעדכן דינמית, כדי שקורא המסך ידווח על שינויים.

הכלל הראשון של ARIA הוא: אל תשתמשו ב-ARIA אם אתם יכולים להשתמש ב-HTML סמנטי רגיל. כפתור button עדיף על div עם role="button".

ניווט מקלדת - הבסיס של נגישות לעיוורים

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

• Tab - מעבר בין אלמנטים אינטראקטיביים (קישורים, כפתורים, שדות טופס)
• Enter - הפעלת כפתור או קישור
• Space - סימון תיבת סימון או הפעלת כפתור
• חצים - ניווט בתוך רכיבים (תפריטים, טאבים, רדיו כפתורים)
• Escape - סגירת חלון קופץ או תפריט

חשוב במיוחד: כל אלמנט שמקבל פוקוס צריך לקבל אינדיקציה ויזואלית ברורה (focus indicator). אם הסרתם את מסגרת ה-outline כי "זה לא יפה" - שברתם את הנגישות למשתמשי מקלדת.

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

מה מפתחים חייבים לעשות?

הנה רשימת המינימום שכל מפתח צריך ליישם:

1. השתמשו ב-HTML סמנטי - header, nav, main, footer, section, article. אל תבנו את כל האתר מ-div-ים
2. היררכיית כותרות נכונה - h1 אחד בדף, אחריו h2, אחריו h3. אל תדלגו על רמות
3. טקסט חלופי לכל תמונה - alt משמעותי לתמונות תוכן, alt ריק לדקורטיביות
4. תוויות לטפסים - כל שדה צריך label מקושר באמצעות for/id
5. ניגודיות מספקת - יחס של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול
6. אל תסירו focus outline - אם אתם רוצים עיצוב שונה, עצבו אותו אחרת אבל אל תסירו אותו
7. קישורים ברורים - "קראו את המדריך המלא" ולא "לחצו כאן"
8. שפת העמוד - הגדירו lang="he" ב-HTML כדי שקורא המסך ידע באיזו שפה לקרוא

כיצד מנגיש עוזר לנגישות עבור עיוורים?

מנגיש מספק מספר כלים שמשפרים משמעותית את חוויית הגלישה של עיוורים ולקויי ראייה:

ניווט מקלדת משופר: מנגיש מוסיף תמיכת מקלדת מלאה לכל אלמנט אינטראקטיבי, כולל focus indicators ברורים וסדר Tab לוגי.

הגדלת טקסט: הגדלה עד 200% שלא שוברת את הפריסה - באמצעות שינויי CSS אמיתיים ולא זום גנרי.

ניגודיות גבוהה ומצב כהה: שינויי CSS ישירים שמבטיחים ניגודיות מספקת בכל מצב.

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

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

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

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

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

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