שיעור 5: נגישות — פוקוס, מקלדת ו-ARIA
עיצבת `<div>` עם `onClick` שנראה כמו כפתור מושלם. אבל משתמש מקלדת לא יכול להגיע אליו, וקורא מסך לא יודע שהוא לחיץ. השיעור הזה מלמד אותך לבנות קומפוננטות נגישות במערכת העיצוב: פקדים סמנטיים, טבעת פוקוס מבוססת-טוקן, ו-`aria-label` — נגישות כדרישה, לא תוספת.
כפתור אמיתי הוא כמו דלת עם ידית — כל אחד פותח אותה, ביד או במקלדת. `<div>` לחיץ הוא קיר שצבעו כמו דלת: נראה נכון, אבל אין במה לאחוז.
- פקד סמנטי
- אלמנט HTML עם משמעות מובנית — `<button>`, `<a>`, `<input>` — שמגיע עם תמיכת מקלדת, פוקוס ותפקיד נגישות בחינם, בלי קוד נוסף.
- focus-visible
- מצב שמראה טבעת פוקוס רק כשמנווטים במקלדת ולא בעכבר. ב-Tailwind: `focus-visible:ring-2` — סימון ברור למשתמש מקלדת בלי להפריע לעכבר.
- aria-label
- תכונה שנותנת שם נגיש לאלמנט שאין לו טקסט גלוי — למשל כפתור עם אייקון בלבד — כדי שקורא מסך יקריא מה הוא עושה.
- תפעול במקלדת
- היכולת להשתמש בכל פקד באמצעות המקלדת בלבד — Tab למיקוד, Enter/Space להפעלה — דרישת יסוד בנגישות.
