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

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

WCAG הוא ראשי תיבות של Web Content Accessibility Guidelines - התקן הבינלאומי הנפוץ לאתרים נגישים. אין צורך לשנן אותו. היסודות שהוא מכסה הם: ניגודיות מספקת, טקסט חלופי בתמונות, גישה במקלדת, תוויות טופס ברורות ומבנה כותרות הגיוני.

איזה יחס ניגודיות נדרש לטקסט?

WCAG מגדיר יחס ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול מול הרקע. כלים חינמיים כמו WebAIM Contrast Checker מאפשרים להדביק שני צבעים ולראות מיד אם הם עוברים, בלי לחשב כלום ידנית.

האם אפשר להנגיש אתר לבד, או שצריך מפתח?

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

האם נגישות עוזרת ל-SEO?

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

יסודות נגישות אתרים שכל בעל עסק קטן כדאי שיכיר

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

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

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

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

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

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

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

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

ניגודיות צבעים: הכשל הנפוץ ביותר

הבעיה הנפוצה ביותר שרואים בבדיקות נגישות היא טקסט בניגודיות נמוכה. האפור הבהיר הטרנדי על לבן נראה אלגנטי למעצב עם מסך טוב, אבל הוא באמת קשה לקריאה עבור הרבה אנשים. WCAG מגדיר יחס ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול מול הרקע.

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

טקסט חלופי לתמונות

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

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

ניווט במקלדת ותוויות

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

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

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

כותרות נותנות לעמוד מבנה

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

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

רשימת בדיקות נגישות מהירה

הנה גרסה קומפקטית שאפשר לעבור עליה באתר.

תחום	מה לבדוק	תיקון מהיר
ניגודיות	טקסט וכפתורים מגיעים ל-4.5:1	הכהייה של צבעי טקסט חיוורים
תמונות	לתמונות בעלות משמעות יש טקסט חלופי	הוספת תיאורים קצרים וכנים
מקלדת	Tab מגיע לכל דבר, הפוקוס נראה	החזרת מסגרות פוקוס, תיקון סדר
טפסים	לכל שדה יש תווית נראית	הוספת תוויות, לא להסתמך על placeholder
כותרות	H1 אחד, סדר הגיוני של H2 ו-H3	קידוד מחדש של כותרות מזויפות לאמיתיות
קישורים	טקסט הקישור מתאר את היעד	החלפת "לחץ כאן" בטקסט אמיתי

כלים שמקלים על התהליך

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

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

מאיפה להתחיל

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

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