תפריטים ותפריטי משנה

כללי אצבע גם לתצוגת דסקטופ וגם לתצוגת מובייל

• לוודא עמידה ביחס ניגוד מינימום בין צבע טקסט לצבע רקע
• כאשר מנווטים עם מקש ה TAB כל אלמנט אינטראקטיבי לרבות בתפריטים ותפריטי משנה צריכים לקבל אפקט ויזואלי למרכיב האינטראקטיבי שבמוקד המקלדת
• להגדיר את אזור התפריט כציון דרך מסוג navigation landmark
• מומלץ להגדיר את הפריטים בתפריט כקישורים סטנדרטיים ולא כ Menu Items
• בסגירת תפריט מוקד המקלדת יתמקם על אלמנט האב כשמדובר בתפריט משני מתוך תפריט ראשי
• כשמדובר בפריט בתפריט ברשימה הראשית, סגירת התפריט, תמקם את מוקד המקלדת על כפתור התפריט הראשי
• להגדיר אפשרות לסגור את התפריט עם מקש ESC בכדי להקל על משתמשי מקלדת לא לנווט מאמצע או סוף התפריט עד לכפתור הסגירה (יקל במיוחד על משתמשי מקלדת ללא קורא מסך המתמודדים עם מוגבלות מוטורית בידיים
• אם תפריט כולל תפריטי משנה, ה aria-expanded צריך להיות על הקישור עצמו ולא על פריט האב או על כל אלמנט אחר
• להקפיד על שימוש נכון במפרט aria-expanded

הנגשת תפריט לדפדפן בתצוגת דסקטופ

• לאפשר הגעה לתפריט באמצעות מקש ה TAB ובאמצעות מקשי החיצים של תוכנה קוראת מסך כגון JAWS ו NVDA במצב גלישה ב Browse-Mode (שזהו מצב ניווט לינארי עם מקשי החיצים במקלדת שמאפשר ניווט באלמנטים שב DOM כאילו מדובר ברשימת אלמנטים לינארית)
• לאפשר ניווט מקלדת  עקבי ורציף בין כל הקישורים בתפריט באמצעות מקש ה TAB כך שיתאפשר ניווט מקלדת עם מקש TAB עם וללא תוכנה קוראת מסך
• אם תפריט כולל תפריטי משנה, יש לשקף למשתמש בקורא מסך כי הפריט בתפריט שכולל תפריטי משנה יוגדר עם aria-haspopup="menu וכי מדובר בפריט בתפריט שניתן להרחבה וכיווץ עם מפרט aria-expanded
• לוודא שלאחר הגעה לכפתור שפותח את התפריט, שהאלמנטים בתפריט יהיו מיד לאחר כפתור  התפריט – בכדי שניווט מקלדת עם מקש ה TAB יגיע מיד לאחר הכפתור לאלמנטים השונים בתפריט גם בתצוגת מובייל וגם בתצוגת דסקטופ לרבות בדפדפן מובייל כגון ספארי ל IOS ודפדפן Google Chrome לאנדרואיד
• בלחיצת ENTER או הקשה כפולה עם מחוות המגע קוראי המסכים למובייל, על כפתור התפריט – אין להעביר את פוקוס המקלדת למקום אחר בתפריט או בעמוד – המשתמש הוא זה שצריך ליזום אם להתקדם בניווט או לסגור את התפריט – כלומר, המשתמש הוא זה שצריך לנהל את הפוקוס
• שם התווית לכפתור תפריט סגור יהיה "תפריט" ולא מילים נוספות כגון לחץ לפתיחת תפריט, או לחץ על ENTER לפתיחת התפריט או מילים נוספות אחרות

הנגשת תפריט לתצוגת מובייל

• אם כפתור שפותח את התפריט מוגדר כאייקון, להגדיר תווית (מומלץ עם המילה 'תפריט' בלבד) עם מפרט aria-label
• להגדיר לכפתור התפריט שפותח וסוגר את התפריט מצב של מכווץ / מורחב עם מפרט aria-expanded. כאשר התפריט סגור, להגדיר עם מפרט aria-expanded =false וכאשר הוא פתוח להגדיר עם מפרט aria-expanded =true וכך גם לגבי פריטים בתפריט המאפשרים להרחיב עוד תתי תפריטים
• במקרים שבהם פתיחת תפריט חושפת אלמנטים נוספים כגון אייקון משתמש או פריטי מידע מסוג טקסט
• אם בתחילת התפריט יופיע מלל כגון ברכת שלום למשתמש רשום, צריך להגדיר את הטקסט כטקסט חי או כטקסט חלופי לתמונת האייקון  של המשתמש

• • • • אלמנטים נוספים כגון כפתור המציין את מספר ההטבות, פריטים בסל קניות /בהזמנה וכד' אפשר להנגיש עם מפרט aria-label  "לדוגמה 3 הטבות" או "2 פריטים בסל קניות"
      • חשוב לזכור, שם התווית  לכפתור תפריט סגור יהיה "תפריט" ולא מילים נוספות כגון לחץ לפתיחת תפריט, או לחץ על ENTER לפתיחת התפריט או מילים נוספות אחרות

הפניות

• 1.1 Keyboard A
• Menu Concepts – W3C Web Accessibility Initiative
• Navigation Menu Button Example | WAI-ARIA Authoring Practices 1.1
• Menu Button Example: Actions | WAI-ARIA Authoring Practices 1.1
• Actions Menu Button Example Using element.focus() | WAI-ARIA Authoring Practices 1.1
• Actions Menu Button Example Using aria-activedescendant | WAI-ARIA Authoring Practices 1.1

דוגמאות נוספות לתפריטים נגישים ניתן למצוא באתר הזה, באתר אמזון ובאתרי גוגל – שבהם יש מימוש מצוין של תפריטים הכוללים תפריטי משנה