נגישות אתרי אינטרנט – לא מה שחשבתם?

שלום לכולם,

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

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

נבהיר רק שיש הבדל בין אתר תקני לבין אתר נגיש, הם לא קשורים זה בזה, אתר לא תקני יכול להיות נגיש, וההיפך, אז אם יש לכם אתר שאתם מקבלים Label ירוק כאשר אתם מעבירים אותו בואלידטור, לא הסתיימה העבודה שלכם בזה :-) מצטער על ניפוץ הבועה

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

נתחיל.

תמונות

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

אינפורמטיבית

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

פונקציונאלית

תמונה פונקציונאלית היא למשל "חיפוש" או "מחק" הalt צריך להיות הפעולה המדויקת שתתבצע במידה ולוחצים על התמונה.

דקורטיבית

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

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

במידה והתוכן של התמונה משתנה, כלומר יש איזו פקודת Javascript שמשנה את הsrc של התמונה, שנו גם את הalt בצורה דינאמית, כך יוכל האדם להבין שהתוכן שמולו השתנה.

Captcha

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

מבנה המידע

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

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

אתם צריכים לקחת בחשבון שקוראי המסך לא "רואים" את הקוד שלכם אלא קוראים אותו, כלומר: תפריטים צריכים להיות מיוצגים בUL-LI, ולא בטבלה ולא בDIV.

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

ד.א, הכותרת הזו צריכה להיות נראית לקוד, הם לא יכולים להיות בdisplay:none, וגם אל תנסו להסתיר את זה בJavascript, גם זה לא יעזור

אם אתם רוצים להסתיר את הכותרת הזו, אתם צריכים לשים עליה position:absolute; top:-999em, כך לקוד ולקוראי המסך הם יהיו גלויים אך לא יפריעו לכם לעיצוב.

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

במידה והאתר שלכם בעברית, תגדירו dir=rtl בגוף הדף שלכם, לא בCSS, חלק מקוראי המסכים לא מבינים את הגדרות הCSS או שהמשתמש בהם כיבה את הParser שלהם.

טיפ: כדי לבדוק את עצמכם, תורידו את דפדפן פיירפוקס, תורידו את התוסף של Web Developer, וכך תוכלו לבצע Disable לקוד הCSS ולקוד הJavascript שלכם, במידה ואחרי שביצעתם את זה עדיין האתר שלכם שומר על סדר מבני הגיוני, הצלחתם במשימה.

רשימות

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

קישוטים למיניהם: במידה ואתם רוצים לשים bullet ליד כול מילה, אל תשתמשו בתג img, מכיוון שאין צורך בו והוא לא הגיוני בתוך הרשימה ולא במיקום שלא, תשתמשו בתמונה כרקע

כותרות לעמודים

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

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

קישורים

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

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

שם ותפקיד, או תסבירו לי מה לעזאזל אתם רוצים ממני…

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

נסביר:

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

אהה, עוד משהו: * היא לא סימון גלובאלי לזה שהשדה הזה הוא שדה חובה, אש תעשו לו טובה, ותגידו לו שהשדה הוא שדה חובה.

ד.א, לjQuery יש plugin's מדהימים שיהפכו את הטופס למשהו חי, אם tooltips ברגע שמנווטים בטופס, אם רג תשמרו על הכללים האלה.

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

ניווט בעמוד ובתפריטים

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

המון אנשים משתמשים במקלדת כדי לנווט, Scott Hanselman שהוא אחד המפתחים היותר מוערכים בעולם הNET כתב פעם פוסט בעניין ואמר שאם היה אפשרי, הוא לא היה משתמש בכלל בעכבר, הוא העביר ביקורת קשה מאוד על האתרים ועל התוכנות של מיקרוסופט (והוא עוד עובד שלהם :-) )

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

הקישור השני צריך להיות "מפת אתר"

ד.א, הקישורים האלה לא חייבים להיות נראים לעין מיד, אבל הם צריכים להתגלות ברקע שמשתמש לחץ על TAB, אני בד"כ מרים Listener שמאזין למקלדת, במידה והוקש TAB, תציגו את הלינקים האלה

תודאו את חוק הברזל הבא – TAB צריך להתקדם קדימה בדף, ALT-TAB צריך ללכת אחורה בדיוק צעד אחד אחורה, אבל בדיוק צעד אחד, בלי שום מלכודות.

שינוי גודל טקסט

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

אתם יכולים לעשות את זה ע"י שימוש בעוגיה טעימה :-)

הקפאת ממשק

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

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

לכן, שימו קישור שאומר "עצור חדשות" או קישור אחר שיאמר למשתמש שהוא יכול לעשות את זה.

טבלאות

כבר השתמשתם? אחרי כול הפוסט הזה חשבתי שתהיו יותר זהירים…

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

השתמשו בSummary כדי לתאר מה מוצג לגולש בטבלה/

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

פלאש

אם גוגל, Live, Yahho לא שכנעו אתכם עד היום לא להשתמש בפלאש לאתרים שלמים, אז כמובן שהם גם לא נגישים, ישנה אפשרות לבצע פלאש נגיש.

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

זהו,

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

תחשבו על האנשים האלה שגולשים לאתר שלכם, תאמינו לי גוגל יחזיר לכם אהבה, וגם האנשים האלה יחזירו לכם אהבה.

בהצלחה

במידה ויש שאלות אשמח לענות עליהן