נגישות באתרים - מדריך למתחילים

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

מה זה בעצם נגישות באתרים

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

למה זה לא "פיצ'ר נחמד שיהיה"

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

HTML סמנטי - הצעד הראשון והכי חשוב

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

<!-- לא נגיש - קורא מסך לא יודע שזה כפתור -->
<div onclick="submit()">שלח</div>

<!-- נגיש - קורא מסך מכריז "כפתור: שלח" -->
<button onclick="submit()">שלח</button>

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

תגי alt לתמונות

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

<img src="chart.png" alt="גרף עמודות המראה עלייה של 20 אחוז ברווח הרבעוני" />

תיאור טוב מתאר את המשמעות של התמונה, לא רק את מה שרואים בה טכנית.

ניגודיות צבעים - דבר שכל מעצב חייב לבדוק

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

ניווט מקלדת - נסו את זה בעצמכם

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

למה זה נושא שאסור לדלג עליו כמתחילים

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

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

לסיכום

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

יש לכם שאלה על נגישות באתר שאתם בונים? תשאלו בדיסקורד.

הצטרפו לקהילה בדיסקורד