הנגשת תפריט ניווט: עליון, המבורגר ותחתון, ומה בודקים בכל אחד

הנגשת תפריט ניווט פירושה שאפשר להגיע לכל פריט בתפריט ולהפעיל אותו במקלדת, שתת-תפריטים נפתחים בלי עכבר ומודיעים אם הם פתוחים או סגורים, שהפוקוס נראה, שהתפריט מסומן כאזור ניווט עם שם, ושיש קישור "דלג לתוכן" לפניו. בתפריט המבורגר במובייל, הכפתור צריך שם ברור, והפוקוס צריך לעבור לתפריט כשהוא נפתח.

התפריט הוא הדבר הראשון שמשתמש במקלדת פוגש בכל עמוד. אם הוא נתקע שם, הוא לא יגיע לשום דבר אחר. לכן בכל בדיקה, התפריט הוא אחד הדברים הראשונים שאני בודק.

הנגשת תפריט ניווט עליון: מה בודקים

מה	איך זה צריך לעבוד	כשל נפוץ
מקלדת	Tab עובר בין הפריטים לפי הסדר, Enter מפעיל	פריטים שנפתחים רק בריחוף עכבר
תת-תפריט	נפתח ב-Enter או ברווח, Escape סוגר ומחזיר את הפוקוס לפריט	תת-תפריט שאי אפשר לפתוח בלי עכבר
מצב פתוח/סגור	aria-expanded מתעדכן כשפותחים וסוגרים	התוכנה להקראת מסך לא יודעת שמשהו נפתח
פוקוס	מסגרת ברורה על הפריט הנוכחי	העיצוב מבטל את הפוקוס
אזור ניווט	תגית nav, ואם יש כמה תפריטים, שם לכל אחד	אין דרך לקפוץ לתפריט או לדלג עליו
טקסט	שמות קצרים וברורים שאומרים לאן מגיעים	אייקונים בלי טקסט, או שמות "יצירתיים"

כדי לסמן מצב פתוח וסגור, ולתת שם לאזור, משתמשים ב-ARIA. איך עושים את זה נכון, ומה לא לעשות, הסברתי במאמר על ARIA.

תפריט המבורגר במובייל

• כפתור אמיתי (button), לא div עם אייקון.
• שם ברור: "תפריט", או "פתיחת תפריט", ולא "☰".
• aria-expanded שמתעדכן כשהתפריט נפתח ונסגר.
• פוקוס שעובר לפריט הראשון כשהתפריט נפתח, וחוזר לכפתור כשהוא נסגר.
• לא להסתיר את העמוד בלי לתת דרך ברורה לסגור את התפריט.

הכפתור הזה הוא מקרה פרטי של כלל כללי: לכל כפתור צריך שם, תפקיד ומצב. פירטתי את זה במאמר כפתור נגיש.

"דלג לתוכן"

בלי קישור כזה, מי שמשתמש במקלדת צריך לעבור על כל פריטי התפריט בכל עמוד, לפני שהוא מגיע לתוכן. קישור "דלג לתוכן" הוא הדבר הראשון בעמוד. הוא יכול להיות נסתר, אבל חייב להופיע כשהוא מקבל פוקוס.

התפריט התחתון (footer)

• כותרת לכל קבוצת קישורים, כדי שיהיה ברור מה יש בה.
• ניגודיות טובה. בכותרות תחתונות כהות אני מוצא הרבה טקסט אפור על שחור.
• קישורים שנבדלים מהטקסט לא רק בצבע.
• הקישור להצהרת הנגישות, אם הוא שם, צריך להיות קל למצוא.
• אם יש בו טופס הרשמה או כפתורי רשתות, גם הם צריכים להיות נגישים.

3 דברים שאני רואה שוב ושוב

• תפריט שנפתח רק בריחוף. במקלדת הוא לא נפתח, ובמובייל אין ריחוף בכלל.
• תפריט "מגה" עם עשרות קישורים. בלי כותרות וקבוצות, הוא קיר של קישורים.
• פריט שהוא גם קישור וגם פותח תת-תפריט. לוחצים כדי לפתוח, ומגיעים לעמוד אחר. פתרון: כפתור נפרד לפתיחה.

התפריט הוא אחד מכמה רכיבים שבדרך כלל לא נגישים באתר, יחד עם סליידרים, חלונות קופצים ולשוניות.

שורה תחתונה

תפריט נגיש הוא תפריט שאפשר להשתמש בו בלי עכבר, ושמספר לתוכנה להקראת מסך מה קורה בו. תקנו אותו פעם אחת בתבנית, וזה מתוקן בכל האתר. אם לא בטוחים איך, זה בדיוק סוג העבודה שאנחנו עושים בשירות הנגשת אתרים.

שאלות נפוצות על הנגשת תפריטים