11.2 נגישות מתקדמת תרגול

תרגול - נגישות מתקדמת¶

תרגיל 1 - טופס הרשמה נגיש¶

צרו טופס הרשמה נגיש עם השדות הבאים:
- שם מלא
- אימייל
- סיסמה (עם הנחיות לחוזק הסיסמה)
- אישור סיסמה
- בחירת מגדר (radio buttons)
- הסכמה לתנאי שימוש (checkbox)

דרישות נגישות:
- כל שדה מקושר ל-label
- שגיאות מוצגות עם aria-invalid ו-aria-describedby
- סיכום שגיאות בראש הטופס עם פוקוס אוטומטי
- הנחיות לסיסמה מקושרות עם aria-describedby
- קבוצת ה-radio buttons עטופה ב-fieldset עם legend
- ניווט מלא במקלדת

תרגיל 2 - מודל נגיש עם מלכודת פוקוס¶

צרו קומפוננטת מודל נגישה שכוללת:

role="dialog" עם aria-modal="true"
תווית aria-labelledby שמצביעה על כותרת המודל
מלכודת פוקוס - Tab ו-Shift+Tab נשארים בתוך המודל
סגירה ב-Escape
פוקוס אוטומטי על האלמנט הראשון בפתיחה
החזרת פוקוס לכפתור שפתח את המודל בסגירה
חסימת גלילת הרקע
סגירה בלחיצה על הרקע

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

תרגיל 3 - רכיב טאבים נגיש¶

צרו רכיב טאבים (Tabs) נגיש שעומד בדפוס WAI-ARIA:

רשימת טאבים עם role="tablist"
כל טאב עם role="tab", aria-selected, aria-controls
כל פאנל עם role="tabpanel", aria-labelledby
ניווט מקלדת:
חצים ימינה/שמאלה לניווט בין טאבים
Home לטאב הראשון, End לטאב האחרון
Tab עובר לתוכן הפאנל
פוקוס אוטומטי על הטאב שנבחר

צרו Layout נגיש שכולל:

קישור "דלג לתוכן הראשי" (Skip Link) שמופיע רק בפוקוס
אזורי landmark מוגדרים: header, nav, main, aside, footer
שני אזורי ניווט (nav) עם aria-label שונה לכל אחד
כפתור "חזרה למעלה" שמעביר פוקוס לתחילת הדף
ניהול פוקוס בניווט בין דפים (העברת פוקוס ל-main)

תרגיל 5 - רשימת משימות נגישה¶

צרו רכיב רשימת משימות (todo list) נגיש:

כל משימה עם checkbox ותווית
הוספת משימה חדשה עם הודעת aria-live שמודיעה "משימה נוספה"
מחיקת משימה עם הודעת aria-live שמודיעה "משימה נמחקה"
סימון משימה כ-completed עם aria-checked
מונה משימות: "X מתוך Y משימות הושלמו"
ניווט מקלדת: Delete למחיקה, Space לסימון
פוקוס נשאר במקום הנכון אחרי מחיקה

תרגיל 6 - בדיקת נגישות¶

הגדירו את סביבת הבדיקה הבאה:

א. הגדירו eslint-plugin-jsx-a11y עם כללים מחמירים (strict mode)

ב. הוסיפו בדיקת axe אוטומטית בסביבת פיתוח

ג. כתבו בדיקת נגישות עם jest-axe:

// בדקו שהקומפוננטות מתרגילים 1-5 עוברות בדיקת axe

ד. צרו רשימת בדיקה (checklist) של נגישות ידנית עם 10 פריטים שצריך לבדוק לפני שחרור לפרודקשן

שאלות¶

מה ההבדל בין aria-label, aria-labelledby ו-aria-describedby? מתי משתמשים בכל אחד?
מדוע לא מומלץ להשתמש ב-tabIndex חיובי? מה הבעיה שזה יוצר?
מה ההבדל בין aria-live="polite" ו-aria-live="assertive"? תנו דוגמה מתאימה לכל אחד.
הסבירו את הכלל הראשון של ARIA. מדוע עדיף להשתמש באלמנטים סמנטיים?
מה זה "מלכודת פוקוס" (focus trap) ולמה היא חשובה? באילו מקרים משתמשים בה?