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

  • לדסקטופ
    • להגדיר את אזור התפריט כציון דרך מסוג navigation landmark
    • לאפשר הגעה לתפריט באמצעות מקש ה TAB ובאמצעות מקשי החיצים
    • לאפשר ניווט מקלדת  עקבי ורציף בין כל הקישורים בתפריט
    • מומלץ להגדיר את הפריטים בתפריט כקישורים סטנדרטיים ולא כ Menu Items
    • אם תפריט כולל תפריטי משנה, יש לשקף למשתמש בקורא מסך כי מדובר בתפריט הכולל  תפריט משני (aria-haspopup="menu")
  • לתצוגת מובייל
    • להגדיר תווית לכפתור התפריט ב aria-label אם מדובר באייקון
    • אם בתחילת התפריט יופיע מלל כגון ברכת שלום למשתמש רשום, צריך להגדיר את הטקסט כטקסט חי או כטקסט חלופי לתמונת האייקון  של המשתמש
    • אלמנטים נוספים כגון כפתור המציין את מספר ההטבות, פריטים בסל קניות /בהזמנה וכד' אפשר להנגיש עם מפרט aria-label "לדוגמה 3 הטבות" או "2 פריטים בסל קניות"
  • שם התווית לכפתור תפריט סגור יהיה "תפריט" ולא מילים נוספות כגון לחץ לפתיחת תפריט, או לחץ על ENTER לפתיחת התפריט או מילים נוספות אחרות
  • כאשר התפריט סגור, להגדיר עם מפרט aria-expanded=false וכאשר הוא פתוח להגדיר עם מפרט aria-expanded=true וכך גם לגבי פריטים בתפריט המאפשרים להרחיב עוד תתי תפריטים
  • בלחיצת ENTER התפריט צריך להיסגר או להיפתח בהתאם למצב בו היה נמצא לפני לחיצת ה ENTER
  • לאפשר ניווט מקלדת בין הפריטים השונים בתפריט באמצעות מקשי החיצים ומקש ה TAB
  • לאפשר יציאה מתפריט פתוח על ידי לחיצה על ESC ולחיצה על Shift+Tab לחזרה לכפתור "סגירת תפריט"
  • בסגירת תפריט מוקד המקלדת יתמקם על אלמנט האב כשמדובר בתפריט משני מתוך תפריט ראשי
  • כשמדובר בפריט בתפריט ברשימה הראשית, סגירת התפריט, תמקם את מוקד המקלדת על כפתור התפריט הראשי
  • לוודא עמידה ביחס ניגוד מינימום בין צבע טקסט לצבע רקע
  • לוודא שניתן לראות את מוקד המקלדת על ידי אפקט ויזואלי שונה לקישור במוקד המקלדת

הפניות

%d בלוגרים אהבו את זה: