כמנהל של קבוצת נגישות אתרים וממשק משתמש בפייסבוק, אני מקבל המון שאלות בנושא הנגשת אתרים. התחום עדיין לא ברור לכולם ורוב המפתחים לא יודעים מאיפה להתחיל כדי להנגיש אתר בצורה טובה.
החלטנו ליצור מדריך מפורט שיעזור לכם להבין מה זה הנגשת אתרים ואיך מיישמים הנגשה אצלכם באתר.
איך מתחילים להנגיש אתר?
בבואנו להנגיש אתר אנחנו צריכים קודם כל להבין מהם השגיאות באתר, מה נצטרך לעשות כדי להנגיש את האתר.
בשלב הזה אני רוצה להכיר לכם שני כלים אוטומטיים שיעזרו לכם להתחיל.
Markup Validation Service – בודק שגיאות HTML
אחת המטרות החשובות בהנגשת אתר היא הנגשת אתר עבור תוכנות קוראות מסך. התוכנות הללו יתקשו לקרוא את האתר שלכם במידה ויש שגיאות HTML. התוכנה מתבססת על הHTML כדי לבנות איזשהו תבנית עמוד ווקאלי עבור המשתמש. ולכן חשוב מאוד לוודא שאין באתר שלכם שגיאות מבנה בHTML. הוולידטור הנ”ל יחזיר לכם רק שגיאות בתגיות ולא יחזיר שגיאות נגישות (שימו לב שגם אם האתר שלכם יצא ללא שגיאות כלל זה עדיין לא אומר שהוא נגיש).
WAVE – תוסף לכרום
הWAVE הוא כלי שמחזיר לכם שגיאות מבניות ושגיאות נגישות. לדוגמה: אם לא שמתם אלט על תמונה מסויימת או שהשתמשתם בהיררכיית תגיות H לא נכונה הWAVE יתריע על כך.
לאחר שהוצאתם רשימת שגיאות ויש לכם תמונה ברורה של מה לא תקין באתר הגיע הזמן לבדיקה הוויזואלית.
בדיקה וויזואלית
גלישה באמצעות מקלדת בלבד
ישנם גולשים שמתקשים לגלוש בעזרת עכבר ומשתמשים במקלדת בלבד (כפתור TAB ו SHIFT+TAB). כשגולשים באמצעות טאב הגולש עדיין צריך לדעת היכן הוא נמצא ולכן אנחנו חייבים לתת מסגרת כאשר הגולש נמצא בfocus על אלמנט מסויים (ארחיב על זה ואביא דוגמאות במאמר נפרד). חוץ מה focus אנו צריכים לאפשר לגולש לשלוט בכל מה שיש על המסך ולא להגביל אותו. יש לכם סליידר? הסליידר חייב להיות נגיש ופעיל על ידי גלישה מן המקלדת. יצרתם אלמנט שמציג טקסט בhover אתם חייבים לתת לאותו אלמנט את אותו אפקט גם ב focus . יש הרבה דרכים לבצע את זה ונרחיב על זה בהזדמנות הראשונה.
הנגשת סרטוני ווידאו
הנגשת סרטונים זה נושא למאמר בפני עצמו, חשוב שתדעו שהממשק של יוטיוב נחשב לנגיש וניתן לגלוש בו גם באמצעות מקלדת אך הווידאו אינו נגיש כל עוד הוא אינו מכיל כתוביות. כדאי גם לתמלל את הווידאו ולכתוב תקציר לווידאו זה עוזר גם לSEO אבל מטרת העל שלנו היא שגם חרשים יוכלו להינות מן הווידאו.
הנגשת מסמכים
יש לכם מסמכים להורדה באתר? גם הם חייבים להיות נגישים. יש שיטות להנגשת מסמכים ואם אתם שואלים את עצמכם אם המסמך שלכם נגיש אז אני אקצר לכם ואומר לכם שהוא כנראה לא נגיש. הנגשת מסמכים היא עבודה קשה שגוזלת זמן רב. חובה להנגיש כל מסמך כולל וורד אקסל וPDF. אם אתם לא חייבים להשתמש במסמכים אז אני ממליץ שלא תשתמשו בהם באתר. ההנגשה שלהם תגזול משאבים רבים.
טפסים נגישים
טופס נגיש זה אחד מהבעיות של האתרים כיום. רובנו משתמשים בתוסף המצויין CF7 (contact form 7 ) שאמנם עם קצת עבודה ניתן ליצור איתו טפסים נגישים אבל אף אחד עד היום לא טרח לעשות את זה. טופס נגיש חייב להיות עם לייבלים תואמים לשדות הטופס וחייב להכיל שגיאות והנחיות מפורטות שמופיעות במידה והטופס לא מולא כהלכה. השגיאות צריכות להופיע לפני שהעמוד מתרפרש ולא לאחריו (דמיינו עיוור שגולש באתר ולחץ שלח מבלי למלא שדה כלשהו. אם האתר מתרפרש ומופיעה שגיאה הוא צריך ללחוץ כל כך הרבה טאבים עד שהוא יגיע לשגיאה שרשמתם שזה פשוט מתסכל.)
מלכודות טאב
שימו לב שאתם מצליחים לעבור על כל האתר באמצעות הקשה על טאב ושאתם לא נכנסים לתוך מלכודות שמכניסות אתכם ללופים אינסופיים של ניווט (מעבר מאלמנט לאלמנט וחוזר חלילה מבלי להמשיך הלאה לאלמנטים הבאים.)
מעבר לזה יש כלים להנגשה שעוזרים לכם להנגיש אתר בקלות ובמהירות ועליהם נדבר במאמר הבא…
המלצות
הצטרפו לקבוצת הנגישות בפייסבוק ותיחשפו לטיפים מצויינים של חברי הקבוצה.
שאלו שאלות. מי שלא שואל לא לומד. יש לכם אתר שאתם צריכים להנגיש? נסו קודם להנגיש לבד. צרו דו”ח של התקלות שאתם רואים באתר. לאחר מכן אתם מוזמנים להציף את האתר בקבוצה וננסה לתת לכם זוויות נוספות שצריך לשים לב אליהם.
תגיבו כאן למטה ותפרגנו לנו על העבודה הקשה (או שתעירו לנו על דברים ששכחנו לדבר עליהם כדי שנדע להשתפר לפעם הבאה)
מאמר מצויין- מאפשר מושג ראשוני במה מדובר. כמובן שהנגשת אתר כוללת מעבר למכוסה במאמר זה.
כתוב ברור ולעניין. נותן מבט כללי וגם טיפים מעשים וכלים שימושיים.
יופי של מאמר , מחכה להמשך
תודה 🙂
תודה רבה על הפירגון.
כמובן שנושא ההנגשה רחב מאוד ויש לנו עוד הרבה תחומים שהיינו רוצים לכסות במסגרת סדרת המאמרים.
תודה נותן אחלה פתיחה להבנת המושג הנגשה