מבנה, קשרים ורצף בעל משמעות

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

נגישות מהמקלדת

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

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

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

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

הימנעות ממלכודות מקלדת

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

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

בדיקת מלכודות מקלדת

פשוט מאוד – נכנסים לאתר ומנווטים על ידי הקשה על מקש ה Tab וה Shift+Tab ובודקים שהמעבר בין הרכיבים הוא בהתאם לסדר שבו מוצגים הרכיבים באתר. במידה והניווט מקביל לסדר הרכיבים המוצגים באתר – רוב הסיכויים שגם אנשים הנעזרים במקשי קיצור במקלדת יוכלו לנווט באתר.

הפניה לקריטריונים בהנחיות Wcag 2.0

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

הסבר על 2.1.2

טכניקות יישום – איך לבצע את 2.1.2

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

דילוג לתוכן ראשי

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

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

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

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

הפנייה לקריטריון בהנחיות Wcag 2.0

קריטריון 2.4.1 עקיפת קטעים חוזרים: יש לקבוע מנגנון שיאפשר למשתמש לעקוף קטעי תוכן שחוזרים שוב ושוב בדפי רשת רבים באתר (רמה A)

הסבר על 2.4.1

טכניקות יישום – איך לבצע את 2.4.1

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

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

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

הפנייה למאמר מקצועי באתר WebAim

"Skip Navigation" Links

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

תגי כותרת H – להבין את המבנה ההיררכי באתר

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

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

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

הפניות לקריטריונים בהנחיות Wcag 2.0

ברמה A

קריטריון 1.3.1 מידע וקשרים: מידע, מבנה וקשרים המועברים למשתמש באמצעות עיצוב יהיו ניתנים לזיהוי על־ידי תוכנה או שיהיו זמינים כטקסט (למשל: שימוש באלמנט H1 לתיוג כותרת, ולא רק שימוש ב-CSS בכדי לעצב את הטקסט שיראה ככותרת. כך, גם ללא CSS ניתן יהיה לזהות כי מדובר בכותרת (רמה A)

הסבר על .3.1

טכניקות יישום – איך לבצע את 1.3.1

קריטריון1.3.2 סדר בעל משמעות: במקרה שבו סדר הצגת התוכן משפיע על משמעותו, סדר הקריאה הנכון יהיה ניתן לזיהוי על־ידי תוכנה (רמה A)

2 דוגמאות ל"סדר בעל משמעות":

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

איך לבצע את 1.3.2

הסבר על 1.3.2

כותרות לקטעים – מרמה AAA לרמה AA

קריטריון2.4.10 כותרות לקטעים: יש להשתמש בכותרות קטעים (section headings) לשם ארגון התוכן (רמה AAA)

בהנחיות Wcag 2.0 קריטריון 2.4.10 ממוקם ברמה AAA ולאור השימוש הנפוץ בו והעובדה שהוא מהווה מנגנון חיוני כל כך למשתמשי תוכנות קוראות מסך החליטה וועדת המומחים במכון התקנים להוריד את הקריטריון הזה לרמה AA כך שייכלל כדרישת חובה לעניין יישום תקנה 35.

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

מאמר מקצועי מאתר WebAim

מבנה סמנטי בדפי אינטרנט – http://webaim.org/techniques/semanticstructure/

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

ציוני דרך ARIA LandMarks

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

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

דוגמאות לתגים סמנטיים ב HTML5

  • Role=Banner: פרסומות – ניתן להוסיף טקסט חלופי לכל פרסומת
  • Role=Header: החלק העליון של הדף
  • Role=Footer: החלק התחתון של העמוד
  • Role=Main: תוכן מרכזי בדף (מקביל לתג דלג לתוכן ראשי)
  • Role=Article: אזור מאמר
  • Sections: סעיפים או חלקים – בהתאם לסוג התוכן. אפשר להציג סעיפי משנה של מאמר או כדי להציג חלקים שונים בדף
  • תפריט צד Nav: תפריט ניווט המציג קישורים לדפים / אזורים באתר

קישורים משלימים

HTML5 accessibility

עודכן בתאריך 01.02.2015 ע"י אילנה בניש