כיצד להנגיש תפריטים – מדריך למפתחים

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

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

תפריט לא פלאשי

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

תפריט כרשימה

תפריט אתר נגיש הוא (כמעט) תמיד רשימה. כשאני אומר רשימה אני מתכוון לתגית li. כמובן שבאמצעות CSS אני יכול לעצב איך שבא לי את התפריט. התפריטים באתר זה (העליון והצדדי) הם באמצעות רשימה והייתי יכול לעשות איתם הרבה יותר.

תפריט כרשימה זה לאו דווקא תפריט משעמם או לא צבעוני. מי שיש לו יכולות סבירות ב-CSS יכול לעשות איתו פלאים. בעזרת display: inline; ותגית float: right; ניתן להפוך כל רשימה אנכית לרשימה אופקית.

למשל:

• דף הבית שלי
• האינטרנט שלי
• האתר שלי

שהוא בסך הכל רשימה רגילה עם קצת CSS (inline במקרה הזה)

<ul>
<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px">דף הבית שלי</li>

<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px">האינטרנט שלי</li>

<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px">האתר שלי</li>

</ul>

כמובן שאפשר להוסיף עוד המון צבעים, רקעים, hover ושאר דברים. השמים הם הגבול.

נניח ואני רוצה להפוך את התפריט, להוסיף לו פריט או לשנות אותו לאנכי? פשוט שבפשוטים, שינוי קל ב-CSS. גם מבחינה תכנותית הרבה יותר מהיר (ולפיכך זול יותר) להוסיף או לשנות לתפריט.

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

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

הורדת תמונות או סימנים לא רלוונטיים מהרשימה

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

הוספת title לקישורים

הוספת title לקישורים המסבירים אודות הפריטים השונים יכולה לעזור מאד. כך למשל:

• דף הבית שלי
• האינטרנט שלי
• אתר האינטרנט שלי

שימו את העכבר מעל הקישור (בלי ללחוץ) ותוכלו לראות את האפקט. זה נעשה על ידי הוספת המאפיין title לתגית a:.

<ul>
<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px"><a href="https://internet-israel.com" title="חזרה לדף הבית">דף הבית שלי</a></li>

<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px"><a href="https://internet-israel.com" title="סיפורים על האינטרנט" >האינטרנט שלי</a></li>

<li style="display:inline; float:right; list-type: none; border: Solid 1px Black;margin:10px"><a href="https://internet-israel.com" title="כניסה לאתר האינטרנט שלי בו תוכלו לקרוא עלי" >אתר האינטרנט שלי</a></li>

</ul>

שימוש בג'אווה-סקריפט בתפריט

על JavaScript ונגישות אפשר לומר המון, אבל אם נהיה ספציפיים בנוגע לתפריט – עדיף שלא להשתמש בJavaScript. רוב האנשים משתמשים ב JavaScript בתפריט על מנת לבצע את הפעולות הבאות:

שינוי בפריט כאשר העכבר מרחף מעליו או לוחץ עליו – HoverClick

עדיף להשתמש ב-CSS בשביל זה. CSS מאפשר לנו בקלות לשנות את כל התכונות של הפריטים באמצעות

a:hover.

הסתרת חלקים מהתפריט

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

onDblClick

פשוט לא להשתמש בו. הוא גם מעצבן (מאד) משתמשים רגילים.

שימוש בטפסים בתפריט

אני מתכוון לכזה דבר למשל:

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

שימוש נבון בצבעים

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

הנחיות נוספות

• עדיף להשתמש בטקסטים ברשימה ולא בתמונות. אם אתם ממש ממש חייבים להשתמש בתמונות ומוכנים לספוג את הנזק מבחינת קידום אתרים, אז אנא ספקו לפחות alt לתמונות שמשמשות כתפריט. זה לא מפצה (גם מבחינת נגישות וגם מבחינת קידום אתרים) על אובדן הטקסט, אבל זה יותר טוב מכלום.
• אם אפשר (ולא תמיד אפשרי), עדיף להשתמש בגודל של טקסט שאינו מוגדר בפיקסלים, נקודות, סנטימטרים או אינצ'ים אלא ביחידות יחסיות כמו em או large,small etc. שימוש בהגדרות יחסיות יאפשר לאנשים לוקי ראיה להגדיל את הטקסט ולראות יותר טוב את הטקסט. מצד שני, זה בהחלט יכול לחרבש עיצוב של אתר אינטרנט וכיוון שבתוך עמי אני חי, אני יודע שזה לא תמיד אפשרי. איפה שאפשר, כדאי לעשות את זה.
• להמנע מתמונות מהבהבות. בואו ונשים את הנגישות בצד, זה מעצבן רצח.