אתר נגיש – "עשה במו ידיך"

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

בניה נכונה של תוכן

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

כותרת עמוד
נתחיל בכותרת העמוד (page title), שמטרתה לתאר היטב ובקצרה את מהות העמוד. לבדיקת כותרת העמוד יש ללחוץ על המקש הימני של העכבר, לבחור "הצג מקור הדף" (או CTRL+U בכרום) ולחפש את המחרוזת <title>, אמורה להיות רק אחת כזו! לוודא שהיא קיימת, שהיא אינה ריקה ומכילה תיאור נכון.
היררכיית כותרות
לאחר שבדקנו את כותרת העמוד נעבור להיררכיית כותרות תקינה, כלל האצבע הוא מאוד פשוט- "כותרת h1 – רק אחת!", ברוב האתרים והבלוגים היא משמשת כשם הפוסט או המאמר. כותרות ברמה h2 יחלקו את המאמר לפסקאות ראשיות, כותרות h3 ואילך, ישמשו ככותרות משנה בתוך פסקה, שכותרתה היא רמה מעל.

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

יש דברים שקשה לראות

כל אתר אינטרנט שנבנה בצורה מקצועית מכיל אלמנטים גרפיים: תמונות, קישוטים ורקע. אלמנטים אלה משפרים את חווית המשתמש ומסייעים לו בפעולות השונות באתר (רכישה, הזמנה, הרשמה או צפייה בגלריה). לאוכלוסיית העיוורים ולקוי הראיה אשר משתמשים בקורא מסך, האלמנטים הללו אינם אפקטיביים. עבורם קיים המלל החלופי (alt text), זהו מלל רלוונטי ואמיתי, עבור תמונות, שמתאר את תוכן התמונה ומצביע על הרלוונטיות לתוכן הכתוב – מלל חלופי אינו חובה בכל המקרים, למשל – אלמנטים קישוטיים, או כפתורים מעוצבים, אבל רצוי לשים בכל מקרה.

לאן זה קשור?

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

מה זה פה? עברית או סינית?

הגדרת השפה העיקרית של דף האינטרנט היא 'תמרור' חשוב לדפדפן ולכלי עזר המשמשים להקראת התוכן.
ההגדרה של עברית, לדוגמא, כשפה עיקרית תהיה : html lang = he-IL, גם מידע זה ניתן לראות באמצעות צפייה במקור הדף (CTRL+U). כאשר ישנם קטעים או פסקאות שכתובים בשפה שונה מהשפה העיקרית של העמוד יש לסמן שהטקסטים בשפה הרלוונטית, לדוגמא – כאשר בטקסט עברי מופיע ציטוט או טקסט באנגלית יש לסמנו ב-lang = en. קיימים מקרים בהם אין צורך בסימון זה, לדוגמא כתובת דוא"ל, שם החברה וכו'

"טל ומטר" או "קידוש לבנה"

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

זה כתוב "שחור על-גבי לבן"

אכן, חומר מודפס לרוב מופיע בגופן בצבע שחור על גבי נייר לבן, לעומתו, אתרי אינטרנט מגיעים בשלל צבעי הקשת ובמאות אלפי גוונים. כמובן שזה "מוסיף צבע", אבל גם מקשה על חלק מהאוכלוסיה לקבל את התוכן עקב ניגודיות צבעים לא מתאימה. ההתייחסות בתקנות הינה לניגודיות מספקת, כאשר המדד הקובע הינו יחס של 1:4.5 בין צבע הטקסט לצבע הרקע.
קיימים כלים אשר מאפשרים להזין את ערכי הצבעים ולקבל אינדיקציה לרמת הניגודיות, לדוגמא: snook.ca, contrastchecker, מומלץ לעדכן את הגדרות הצבעים ולבדוק שוב, קיימים גם כלים מסחריים אשר מבצעים את הבדיקה לדף הנבחר.

ניווט באתר

איך מגיעים? הלכתי לאיבוד

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

ובמוקד הפעם…

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

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

טכניקה, בקטנה

בשפת html קיימים כלים להגדרת תפקודם של אזורים שונים בדף, הסימון מבוצע על-ידי שימוש במאפיין role, אשר מקבל כפרמטר את תפקיד האיזור המוגדר, להלן מספר דוגמאות:

role="banner" == header
role="main" == main content
role="complementary" == sidebars
role="contentinfo" == footer
role="search" == search form
role="navigation" == navigation menus
role="form" == forms
role="presentation" == slider / banner / static main image
role="article" = articles

סעיפים מסויימים ניתן לבדוק ע"י שימוש בתוסף wave לכרום

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