תקציר המאמר:
סעיף 508 לחוק בארצות הברית קובע, כי חובה להפוך את התקשורת האלקטרונית (תוכנות, דואר אלקטרוני, אתרי אינטרנט) בבעלות הממשל הפדרלי לנגישה לבעלי לקויות. במאמר זה תמצאו שמונה קווים מנחים עיקריים, החיוניים לפיתוח אתרים נגישים לבעלי לקויות, זאת על מנת לעמוד בתקן שקבע סעיף 508 לחוק. פיתוח אתרים על פי הקווים המנחים הללו תסייע לבעלי לקויות לגלוש באתרים הללו ותגדיל את אוכלוסיית המשתמשים.
|
|
|
|
בשנת 1973 קבע הקונגרס האמריקאי את חוק השיקום, שקבע בין השאר כי אסור להפלות לרעה בעלי לקויות בעת קבלה לעבודה. בשנת 1998 תוקן סעיף 508 לחוק והגדיר כי חובה להפוך את התקשורת האלקטרונית בבעלות הממשל הפדרלי, החל מדואר אלקטרוני ועד תוכנה ייעודית, לנגישה לבעלי לקויות. בעקבות התיקון לחוק, שתי הלקויות העיקריות שמפתחים מתייחסים אליהן הן לקויות ראייה (ביניהן עיוורון צבעים) ושמיעה. על כן על המפתחים לשאול את עצמם בעת שהם באים לפתח קוד, מה ניתן להוסיף לקוד על מנת להפוך את האתר לנגיש יותר לבעלי לקויות ראייה או שמיעה?
|
|
|
|
קווים מנחים לפיתוח אתרים נגישים לבעלי לקויות
|
|
|
|
1. לכל אלמנט שאינו טקסט יש להצמיד טקסט מתאים. לדוגמא: attribute מסוג alt longdesc או בכל אלמנט תוכן.
|
|
|
|
2. יש להציג אלטרנטיבה לכל סוג של מידע מולטימדיה שתתאים לקהל היעד.
|
|
|
|
3. יש לעצב את דפי האינטרנט באתר, כך שכל מידע שיוצג בצבעים ניתן יהיה לקרוא אותו גם ללא צבעים.
|
|
|
|
4. יש לארגן את כל הדפים באתר, כך שניתן יהיה לקרוא אותם ללא דף עיצוב.
|
|
|
|
5. יש להוסיף רשימת קישורים (לינקים) בנוסף לתמונות (image text) המגיעות מצד השרת.
|
|
|
|
6. עמודות ושורת של טבלאות יהיו מקושרות במילים לטבלת נתונים.
|
|
|
|
7. יש להשתמש בתגיות כדי לקשר תאי מידע עם תאי כותרת עבור טבלאות בהן יש יותר משתי רמות של קינון.
|
|
|
|
8. כל פריים יהיה בעל כותרת שתאפשר ניווט וזיהוי קלים יותר.
|
|
|
|
להבין את הקווים המנחים
|
|
כדי להפוך אתרים ליותר נגישים עבור אוכלוסיות עם לקויות, עליכם לדעת איזה חלק מתוך ה-HTML מציג את המידע למשתמש ואיזה חלק מעצב את הדף בצורה גראפית. דוגמא לכך היא שימוש בטבלאות: ניתן להשתמש בטבלאות עבור עיצוב גרפי מסודר של דף HTML או מיקום של אלמנטים בדף או להציג בהם ערכים טבלאיים כגון גיליונות אלקטרונים (excel). עבור המקרה הראשון לא נצטרך להתעכב על נגישות לעומת המקרה השני שבו יש לנו עבודה רבה. נצטרך לשים לב לתמונות, מצגות וקבצי אודיו וידאו.
|
|
|
|
1. לכל אלמנט שאינו טקסט יש להצמיד טקסט מתאים
|
|
|
|
|
ברוב המקרים נצטרך להוסיף לאלמנט שאינו טקסט כגון מצגת, סרטוני וידיאו ומצגות FLASH קובץ טקסט עם התעתיק של המידע הויזואלי. תמונות, לעומת זאת, לא צריכות קובץ מיוחד כי הן מכילות ATTRIBUYTES מתאימים כדי להפוך אותן לנגישות יותר.
|
|
|
שימוש בתגית ה-alt תהפוך את האתר לנגיש יותר. תגית ה-alt מסיעת לאנשים עם מוגבלויות ראיה שמשתמשים במכשירים הקוראים להם את הטקסט מצג המחשב. כשאותם מכשירים יתקלו בתמונה הם יקראו בקול את תגית ה-alt שכתבתם. מצד שני, חשוב מאוד לא להציף את הדף בתגיותalt מיותרות.
|
|
|
כל אלמנט שאין לו תפקיד בהצגת המידע למשתמש כגון:space gif , באנרים, תמונות רקע או תמונות לעיצוב מומלץ לתת לו alt ריק (ללא טקסט אבל התגית מוגדרת). לתמונות שמציגות מידע כדאי שתהיה תגית alt עם טקסט.
<img src=”images/seaice_graph.gif” alt=”Graph showing the decline of Arctic sea ice from 1970 to 2000"/>
|
|
|
חשוב לשמור את התגיות קצרות ולעניין. אם רוצים לדוגמא, להוסיף תיאור נוסף עבור כל שנה בה הקרי נסוג (לפי התמונה), תגית ה-alt היא לא המקום אל תגית בשם longdesc יכולה להכיל את התיאור הנוסף. בתגית ה- longdesc, בניגוד ל-alt , לא נרשם טקסט אלא ישנו קישור URI שיצביע למשתמש היכן נמצא דף המידע הנוסף (מומלץ לעצב את הדף עם טקסט בלבד עבור קוראי הדפים).
<img src=”images/seaice_graph.gif” alt=”Graph showing the decline of Arctic sea ice from 1970 to 2000” longdesc=”longdesc/seaice_graph.html”/>
|
|
|
חשוב לציין שאותם עזרים לקריאת המסך עלולים לקרוא את המקור של הקובץ ("images/seaic_graph.gif”) כשלא קיימת תגיתalt . כדי למנוע זאת נשים תגית ריקה עבור תמונות שלא מכילות מידע למשתמש.
(<img src=”images/foo.gif” alt=””>)
|
|
|
|
2. הצגת אלטרנטיבה לכל סוג של מידע מולטימדיה, שתתאים לקהל היעד
סרטים באתרי אינטרנט יכולים לגרום בעיה לא רק עם אין להם קובץ תעתיק, אלא גם עבור אנשים בעלי לקויות שמיעה שיראו לשמוע אותם. לכן עליכם לדאוג להכניס לקובץ כתוביות ועל ההצגה של הכתוביות להיות מסונכרנת עם הוידיאו בצורה משולמת. כמו כן עליכם גם לדאוג גם לקובץ תעתיק עבור בעלי מוגבלויות ראיה.
|
|
|
3. ניתן יהיה לקרוא כל מידע באתר בצבעים וללא צבעים
ישנם אתרים שהשתמשו בדפי עיצוב (CSS), כדי לגרום לתגיות קישורים לקבל צבעים שונים בעת שעוברים עליהן עם העכבר. אפקט זה נראה טוב עבור גולשים ללא בעיות ראיה, אבל גולשים עיוורי צבעים לא יבחינו באותם שינויים. לכן מומלץ להבליט את תגיות הקישורים באביזר ויזואלי נוסף כגון הדגשה, ITALIC או קווים תחתונים.
קישורים הם לא בהכרח הבעיה היחידה, אם לא הקשה ביותר שניצבת בפני המפתחים בעת עבודתם על אתרים מעוצבים. עליכם לבדוק גם שהגרפים יוצגו בשחור לבן או לפחות כך שגם עיוורי הצבעים יוכלו לראות אותם.
|
|
|
4. ארגון דפים באתר, כך שניתן יהיה לקרוא אותם ללא דף עיצוב
אם האתר שלכם משתמש בקבצי CSS רבים כדי לעצב את הדפים שבו, עליכם לוודא כי הקבצים נהירים גם עבור משתמשים שגולשים לאתר עם דפדפנים שאינם תומכים בקבצי CSS כגון: LYNX או קוראי דפים. הדרך הקלה לבדוק זאת היא לבטל את האפשרות להעלות CSS בדפדפן שאתם גולשים בו ולבדוק האם האתר עדיין מעביר את המסר בצורה ברורה. אם האתר לא מצליח להעביר את המסר בצורה ברורה, עליכם לבנות את דפי ה-STYLE והעיצוב של האתר.
|
|
|
5. הוספת רשימת קישורים (לינקים) בנוסף לתמונות (image text) המגיעות מהשרת
תגיות MAP ללא מיפוי הן תגיות שבזמן לחיצה על קורדינטות X או Y עוברת השליטה לשרת, שמחליט על הפעולות שיש לעשות ולאן יש לנווט את הדפדפן. כיוון שזה כמעט בלתי אפשרי להצמיד להן תגיות alt עליכם להוסיף מידע נוסף במקום אחר בדף.
תגיות MAP בצד הלקוח הן די קלות לשימוש, כיוון שקוראי הטקסט קוראים אותן בקול. לפיכך מומלץ לשים את תגיות ה-MAP במקום מרכזי או בתוך בלוק של מידע. כמו כן חשוב להוסיף תגיות alt עבור <shape> כדי לאפשר גישה נוחה ושימושית.
|
|
|
6. קישור מילולי בין עמודות ושורת של טבלאות וטבלת נתונים
חשוב לדעת אם קוד ה-HTML מיועד לעיצוב או להצגת מידע משתי סיבות:
|
|
|
|
|
אם נוסיף הרבה תגיות נגישות שונות, נגרום לכך שקוראי הדף יקראו המון טקסט בתוך הטבלאות.
|
|
|
מצד שני, נעבוד קשה להכניס את אותן תגיות.
|
|
|
|
|
דוגמה לטבלה שצריכה תגיות נגישות ובנויה בצורה דף אלקטרוני.
|
|
|
|
Table 1: Tree house Writers’ Favorite Things
|
|
|
|
Superhero
|
Animal
|
Food
|
Color
|
|
|
Batman
|
Tiger
|
Spaghetti
|
Green
|
Alex
|
|
Green Lantern
|
Sea Cucumber
|
Hamburgers
|
Yellow
|
Kevin
|
|
Optimums' Prime
|
Kangaroo
|
Eggplant
|
Orange
|
Chris
|
|
|
|
אם לא נשתמש בתגיות נגישות, רוב הגולשים יקראו את הטקסט בסדר הזה (משמאל לימין):
color, food, animal, superhero, alex, green וכן הלאה. כפי שניתן לראות, קוראי הטקסט יגרמו לכך שכל ניסיון יהפוך את הטבלה לג'יבריש. כמו כן עליכם לחשוב על בעיה נוספת, שלא ניתן לחזור אחורה ולקרוא שוב את הטקסט. למזלכם ישנם כלים לעשות את המידע יותר נגיש. על כן נעסוק תחילה בכותרות של העמודות והשורות. כתיבת כותרות העמודות נעשית באמצאות תגית <th> ה-markup של השורה הראשונה נראית כך:
|
|
|
<tr>
<th> </th>
<th scope=”col”>Color</th>
<th scope=”col”>Food</th>
<th scope=”col”>Animal</th>
<th scope=”col”>Superhero</th>
</tr>
|
|
|
תגית <th> היא סוג של תגית תא בטבלה המציינת כותרת. חשוב לציין את הערךscope שמתקבל משני ערכים: col אוrow וקובע איך ימוקמו הכותרות - לאורך או לרוחב (ניתן להוסיף גם את הערכים colgroup ו-rowgroup ל-scope, אך לא נדון בהם כאן).
דוגמא לשימוש באופציית ה row:
|
|
|
<tr>
<th scope=”row”>Alex</th>
<td>Green</td>
<td>Spaghetti</td>
<td>Tiger</td>
<td>Batman</td>
</tr>
|
|
|
כעת, לא רק שאפשרתם לקוראי הטקסט לקשר בין כותרת עמודה לשורה, אלא גם תוכלו בקלות למצוא איזו חיה אהובה על קווין וגם תוכלו לעצב את הכותרות של הטבלה בעזרת CSS בקלות. מלבד כותרות, יש להוסיף לטבלה סיכום. בדומה לתגית ה-alt, המטרה היא לתאר את הטבלה והשינוי היחידי הוא בשם (summary). כמו כן, בדומה לתגיות ה-alt חשוב לשמור על תיאור קצר וקולע:
<table summary=”Treehouse favorite things”>
|
|
|
7. שימוש בתגיות כדי לקשר תאי מידע עם תאי כותרת, עבור טבלאות בהן יש יותר משתי רמות של קינון
לעיתים תרצו לקבץ כמה שורות יחד כדי להציג את הנתונים, כמו בדוגמה הבאה:
|
|
|
|
Superhero
|
Animal
|
Food
|
Color
|
|
|
TreeHouse
|
|
Batman
|
Tiger
|
Spaghetti
|
Green
|
Alex
|
|
Green Lantern
|
Sea Cucumber
|
Hamburgers
|
Yellow
|
Kevin
|
|
Optimums' Prime
|
Kangaroo
|
Eggplant
|
Orange
|
Chris
|
|
Slashdot
|
|
Bizarro Superman
|
Puppies
|
Tofu
|
Blue
|
CmdrTaco
|
|
Aquaman
|
Bees
|
Jellybeans
|
Red
|
ScuttleMonkey
|
|
Lobo
|
Ponies
|
Ice Cream
|
Pink
|
Zonk
|
|
|
|
|
אם תרצו לקבץ את המשתמשים עבור כל מחלקה בתור קבוצה אחת, עליכם להוסיף את ה- attribute id עבור ה-<th>, ו-headers עבור שאר התאים כך תוכלו ליצור קישור בין כותרת לשורה המתאימה שלה.
|
|
|
<tr>
<th> </th>
<th id=”color”>Color</th>
<th id=”food”>Food</th>
<th id=”animal”>Animal</th>
<th id=”superhero”>Superhero</th>
</tr>
<tr>
<th colspan=”5” align=”center”
id=”treehouse”>Treehouse</td>
</tr>
|
|
|
|
בהמשך נשתמש ב-headers.
|
|
|
<tr>
<td id=”ryan_campbell” headers=”treehouse”>Ryan Campbell</td>
<td headers=”treehouse ryan_Campbell color”>Orange</td>
<td headers=”treehouse ryan_Campbell food”>Eggplant</td>
<td headers=”treehouse ryan_Campbell animal”>Kangaroo</td>
<td headers=”treehouse ryan_Campbell superhero”>Optimus Prime</td>
</tr>
|
|
|
|
פעולה זאת מאפשרת לקוראי טקסט עם מנגנון, לקרוא את הטקסט בצורה של קישור עבור כל תא לקבוצה או לשורה המקשרת שלו. בדוגמה אנחנו מקשרים בין אתר, שם עובד או כל עמודה שהיא.
|
|
|
8. כל פריים יהיה בעל כותרת שתאפשר ניווט וזיהוי קלים יותר
כתיבת פריים היא פתרון רע ולא מומלץ, אבל ישנם מקומות שעדיין משתמשים בהם. למזלנו, לא צריך לשנות בצורה רבה את אותם פריימים שיתאימו לתקן 508. עבור כל פריים עליכם לציין את הכותרת (title) של הפריים והתאמתו לתקן. בכל מקרה, גם אם זה לא מצוין בתקן, מומלץ לכתוב את תגית ה-noframes עבור משתמשים שלא נהנים מפריימים.
|
|
|
|
קווים מנחים נוספים
|
ישנם קווים מנחים נוספים, מלבד השמונה שהזכרנו עד כה:
1. שימוש במפות צד לקוח במקום במפות מצד השרת
אם אפשר להשתמש במפות צד לקוח, מומלץ להשתמש בהן ולא במפות מצד השרת. במקרים מיוחדים, כמו במצבים שהמפות נוצרות בזמן ריצה ואין מנוס מלהשתמש בצד שרת, עליכם להוסיף טקסט נלווה במקום כלשהוא בדף (כפי שהסברנו בסעיף ה).
|
|
|
2. דפי אינטרנט לא יגרמו להבהוב של המסך בתדר מעל 2HZ או מתחת ל -55Hz
מומלץ לא להשתמש בתמונות מאוירות עם תנועה, העלולות לגרום להתקפי אפילפסיה לחולים. כמו כן, יש להימנע מעיצובים שיגרמו להבהובים על המסך.
|
|
|
3. יצירת דף טקסט עם מידע רלוונטי ופונקציונלי, שיתאים להוראות התקן
אם אין לכם אפשרות לעמוד בקווים המנחים של תקן 508, עליכם ליצור דף טקסט נפרד עם אינפורמציה זהה. חשוב מאד לדאוג לעדכון קבוע של דף זה ושל דפים לא תואמים אחרים.
|
|
|
4. שימוש בטכנולוגיות תסריט (script) כדי להציג מידע מחייב גם הסברים על הפונקציונליות
עליכם לדאוג שהגולשים בעלי הלקויות יוכלו לקרוא את התסריט הרץ בצד הלקוח, שמטרתו לעדכן מידע. כדי לעשות זאת עליכם לדאוג להצמיד לטקסט את כל התגיות שדנו בהן, כגון <th> alt summary. בנוסף, אם קיים מנגנון שיגרום לתוכן להופיע (כגון כפתור) קוראי הטקסטים צריכים להיות מסוגלים לקרוא אותו. (על ידי קישור טקסט או תמונה עם alt).
|
|
|
5. טפסים ממוחשבים למילוי צריכים להיות נגישים לגולשים באמצעות דפדפנים מסייעים
מומלץ לתת לכל השדות שמקבלים ומציגים טקסט (input label) את שדה id . בדרך כלל הכפתורים יוצגו בצורה מסודרת על המסך, אבל אם משתמשים בתמונות כדי לדמות כפתור יש להוסיף שדה alt.
|
|
|
6. דילוג מעל טקסט חוזר באתר בעזרת מתודה מסוימת
ברוב האתרים קיימים מספר אלמנטים חוזרים כמו כותרת הדף או סרגל ניווט, הקיימים במרבית הדפים שבהם יש רכיבים שחוזרים על עצמם מספר פעמים. התקן קובע כי יש לאפשר בלחיצת כפתור לדלג על כל התוכן החוזר ול<a> שנוסיף לה שתי אפשרויות לדלג: על ידי טקסט או על ידי תמונה לה לא קיימת הצגה גראפית בדף אבל קייםalt שמאפשר להבין את הכוונה.
|
<a href=”#maincontent”>
<img src=”invis.gif” border=”0” width=”0” height=”0” alt=”follow this link to skip to the main content” /></a>
<a href=”nav1.html”>Repetitive Navigation Link 1</a>
<a href=”nav2.html”>Repetitive Navigation Link 2</a>
<a href=”nav3.html”>Repetitive Navigation Link 3</a>
... 2years later...
<a href=”nav10.html”>Repetitive Navigation Link 10</a>
<a name=”maincontent”></a>
This is the body of my website
|
|
|
7. יש להתריע בפני המשתמשים על תהליך שמותנה בזמן, כדי שיספיקו לסיים את התהליך
ישנם גולשים בעלי לקויות, שלוקח להם זמן למעלה מהממוצע למלא טופס. לכן יש צורך להודיע להם ש- sessions קרוב לסופו וזמן המילוי נגמר. באתרים בהם קיים מנגנוןsessions , עליכם להודיע למשתמשים דקה או שתיים לפני סיום התהליך כי הזמן למילוי המשימה קרוב לסיום ולאפשר לחיצה על אישור כדי להוסיף עוד זמן.
|
|
|
|
לסיכום
, אם נפעל על פי שמונה הקווים המרכזיים שהצגנו במאמר זה ונדאג להצמיד טקסטים למצגות, סרטוני וידאו ואמצעי המחשה נוספים, נציג אלטרנטיבה במקביל לצפייה באמצעי המדיה השונים המוצגים באתר, נתאים את הטקסטים גם ללקויי ראייה וכיוצא בזה, נגדיל את אוכלוסיית המשתמשים באתרים שפיתחנו וכן נסייע לאוכלוסיית הלקויים.
|
|
|
|
קישורים לאתרים נוספים בנושא
|
|
ישנם מספר אתרים שיעזרו לכם לעצב את הדפים בצורה נגישה יותר ולעמוד בתקן 508:
|
|
|
|
|
