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

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

נגישות פירושה לבנות את האתר שלך כך שאנשים עם מוגבלויות יוכלו להשתמש בו: מישהו עיוור שמשתמש בקורא מסך, מישהו עם ראייה לקויה שזקוק לניגודיות חזקה, מישהו שאינו יכול להשתמש בעכבר ומנווט במקלדת, מישהו עם שוני מוטורי או קוגניטיבי. התקן הנפוץ נקרא 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. תחשוב על זה כמו תוכן עניינים. מבנה כותרות נקי הופך את העמוד שלך לקל יותר לניווט עבור טכנולוגיה מסייעת וקל יותר לגוגל להבין, נושא חוזר בעקרונות עיצוב אתרים לעסקים קטנים.

צ'קליסט נגישות מהיר

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

כלים שמקלים על זה

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

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

איפה להתחיל

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

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