מדריך
נגישות עם קלוד
שתי פקודות לאתר נגיש (לפני שבונים ולאתר קיים), ארבע בדיקות ידניות ומה החוק דורש
קלוד יודע לבנות אתר נגיש, אבל הוא לא תמיד עושה את זה לבד. בדקתי שני אתרים שהוא בנה לי: אחד עבר, ובשני הכתום של הכפתורים נכשל בניגודיות ואי אפשר היה להזמין בלי עכבר. הנה שתי הפקודות שסוגרות את זה: אחת לפני שבונים, ואחת לאתר שכבר קיים.
| צבע הכפתור | ניגודיות על לבן | תוצאה |
|---|---|---|
#FF6B2C | 2.84:1 | נכשל, התקן דורש 4.5:1 |
#C2410C | 5.18:1 | עובר, ועדיין כתום |
אותו מותג, גוון אחד כהה יותר. ככה נראה תיקון ניגודיות.
פקודה 1: לפני שבונים
מדביקים בתחילת הבקשה או מוסיפים לאפיון, לפני שקלוד כותב שורת קוד.
את האתר הזה צריך לבנות נגיש לפי WCAG 2.1 ברמה AA (התקן הישראלי ת"י 5568). זו דרישה מההתחלה, לא תוספת בסוף:
- lang="he" ו-dir="rtl", מבנה כותרות היררכי (h1 אחד, אחריו h2 ו-h3), ואזורי דף: header, nav, main, footer
- ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול ולרכיבי ממשק. אם צבע המותג לא עומד בזה, תציע גוון קרוב שעומד
- כל מה שאפשר ללחוץ עליו נגיש במקלדת, עם פוקוס נראה וברור. אסור להסיר outline בלי להחליף אותו
- קישור "דילוג לתוכן" בתחילת העמוד
- alt תיאורי לכל תמונה שמעבירה מידע, ו-alt ריק לתמונות דקורטיביות
- תווית (label) לכל שדה בטופס. הודעות שגיאה מקושרות לשדה (aria-describedby, aria-invalid) ומוקראות לקורא מסך
- כפתורי אייקון עם תווית שמתארת גם את הפעולה וגם את הפריט ("הוספת המבורגר טלה לעגלה", לא "הוספה")
- חלונות קופצים ומגירות: הפוקוס נכנס פנימה, נשאר כלוא עד הסגירה, נסגר ב-Esc וחוזר לכפתור שפתח
- הודעות שמופיעות לבד ("נוסף לעגלה") באזור שקורא מסך מקריא (aria-live)
- לכבד את ההגדרה prefers-reduced-motion
- עמוד הצהרת נגישות עם קישור בפוטר
בסוף הבנייה תריץ בדיקת נגישות (axe או Lighthouse), תבדוק ניווט מלא במקלדת, ותדווח מה עבר ומה לא.פקודה 2: לאתר שכבר קיים, בדיקה ותיקון
קלוד בודק, מציג רשימה ועוצר. מתקן רק אחרי שאישרתם.
תבדוק את הנגישות של האתר הזה לפי WCAG 2.1 ברמה AA (התקן הישראלי ת"י 5568).
שלב 1, בדיקה (בלי לשנות קוד):
- תריץ סריקה אוטומטית (axe או Lighthouse)
- תבדוק ידנית גם את מה שסריקה לא תופסת: ניווט מלא ב-Tab, פוקוס נראה, חלונות קופצים ומגירות, תוויות של כפתורי אייקון, הודעות שגיאה בטפסים, הודעות שמופיעות לבד, וטקסט שיושב על תמונה
- תבדוק אם יש הצהרת נגישות
- תחזיר רשימה לפי חומרה: חוסם / חמור / קל. לכל בעיה: איפה היא, למה זו בעיה, ואיך מתקנים
- תעצור ותחכה לאישור שלי
שלב 2, תיקון (רק אחרי שאישרתי):
- תתקן לפי הרשימה. בצבעי מותג תשתמש בגוון קרוב שעומד בניגודיות, לא בצבע אחר
- אל תשנה עיצוב או התנהגות מעבר למה שנדרש לנגישות
- תריץ שוב את אותה בדיקה ותראה לי לפני ואחריארבע בדיקות שעושים לבד, בשתי דקות
סריקה אוטומטית מוצאת רק חלק מהבעיות. אתר עם ציון גבוה עדיין יכול להיות לא נגיש.
1. מקלדת בלבד
מתחילת העמוד לוחצים Tab עד הסוף. תמיד רואים איפה אתם? אפשר לפתוח חלון, לעבור על כל מה שבתוכו ולסגור אותו ב-Esc? אפשר לשלוח טופס?
2. ניגודיות
ב-Chrome: קליק ימני על טקסט, Inspect, ואז לוחצים על ריבוע הצבע ליד color. מופיע Contrast ratio עם סימון שאומר אם עובר את AA.
3. קורא מסך
במק: Cmd+F5 מפעיל את VoiceOver. בווינדוס: NVDA, חינם. עוברים על הכפתורים ובודקים: מבינים מה כל כפתור עושה בלי לראות את המסך?
4. סריקה
ב-Chrome DevTools פותחים את Lighthouse ומריצים Accessibility. הציון הוא נקודת התחלה, לא אישור.
מה קלוד פספס אצלי
ברוב הדברים הוא עשה עבודה טובה. אלה הדברים שהוא לא תפס לבד:
- צבע מותג כתום שלא עומד בניגודיות (2.84:1)
- סימון פוקוס שהוסר בגלל העיצוב
- חלון קופץ שהפוקוס לא נכנס אליו
- כפתורי "הוספה" בלי שם המנה
- אין הצהרת נגישות
מה החוק דורש, בקצרה
אתרים של עסקים שנותנים שירות לציבור צריכים לעמוד בתקנה 35 לתקנות הנגישות, כלומר בתקן ת"י 5568, שמבוסס על WCAG ברמה AA.
נדרשת הצהרת נגישות באתר, עם פרטי פנייה לרכז נגישות.
אתר שלא עומד בתקן חושף את בעל העסק לתביעה, גם בלי הוכחת נזק. יש הקלות ופטורים לעסקים קטנים.
תוסף נגישות לבד לא מספיק. הוא משנה תצוגה, אבל לא מתקן את הקוד.
רוצים ללמוד לבנות בעצמכם?
שיעורים לפי הסדר, מהצעד הראשון.