טכניקות

 

כתובת alt-text מתאים

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

 

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

 

יותר מדי מידע

ללוגו של יוזמת הנגישות הפדרלית IT בראש האתר, קיימת המקבילה הבאה:

חמישה כוכבים כחולים במעגל עם 3 פסים אדומים שעוברים לאורך הכוכבים - Federal IT Accessibility Initiative - agency partners promoting accessibility.

תארו לעצמכם לשמוע את זה שוב ושוב בתחילת כל דף. alt-text צריך להיות תמציתי.

 

מידע מיותר

אל תעמיסו על הדף alt-text חסרי משמעות שרק מאטים את קוראי המסכים. האתר שדובר בו לעיל FITAI למעשה חותך את הלוגו לחלקים, ומספק לכל כפתור כזה alt-text שבו כתוב:

כפתור לוגו - אין טקסט

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

 

כדור אדם קטן אינפורמציה לרופאים

כדור אדום קטן אינפורמציה למטופלים

כדור אדום קטן חדשות ואירועים

חץ הפונה שמאלה חזור לדף הבית

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

הצעות לדוגמא:

- אינפורמציה לרופאים

*אינפורמציה למטופלים

תבליט חדשות ואירועים

חזור לדף הבית

 

מידע לא מדוייק או לא מספיק מידע

 

מקבילת טקסט לא טובה: "לוגו" או "לוגו החברה"

מקבילת טקסט טובה: "לוגו קוקה קולה"

 

מקבילת טקסט לא טובה: "תמונה"

מקבילת טקסט טובה: "החתול של יוסי"

 

 

 

מקבילת טקסט לא טובה: "כפתור ירוק"

מקבילת טקסט טובה: "Submit"

 

מקבילת טקסט לא טובה: "Welcome"

מקבילת טקסט טובה: "Welcome to Big Daddy's Moonshine!"

 

 

מפות תמונות

הסבר על מפות תמונות ניתן במדריך לתקן 508 - מפות תמונות. הדבר הרלוונטי כעת, הוא לספק alt-text גם למפת התמונות וגם לכל איזור אקטיבי (שניתן לסמן אותו עם העכבר) במפה. אם תשכחו להוסיף טקסט אלטרנטיבי למפת התמונה בעצמה (טעות נפוצה), דפדפנים לא גרפיים יציגו את המילה [USEMAP]. הסבר נוסף בפסקה הבאה העוסקת בטקסט של קישור.

 

כשהתמונה היא קישור

כמו בכל קישור אחר, ה- alt-text של תמונה או של איזור במפת-תמונות חייב להיות קצר ומשמעותי, גם כשהוא נקרא מחוץ להקשר.

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

 

תכונת ALT ריקה

כל תויות ה- IMG חייבות לכלול תכונת ALT, אבל התכונה יכולה (וצריכה) להיות ריקה, כאשר הטקסט אינו מביע אינפורמציה, כמו במקרים הבאים:

 

תמונות המשמשות לעיצוב ויזואלי

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

 

[spacer.gif][spacer.gif]Welcome to Stan's World o' Snakes
[lines/squigglyline.gif]
Stan likes:
[transparent.gif]Pythons
[transparent.gif]Cobras
[transparent.gif]Anadondas....

 

תכונת ALT ריקה כזו:

 

<img src="spacer.gif" width="10" height="1" alt="">

 

היא הדרך היחידה להמנע מבלבול כזה. מה שיראה הוא:

 

Welcome to Stan's World o'snakes

Stan likes:

Python

Cobra

Anaconda

 

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

 

תמונות כפולות לא דורשות alt-text

דוגמא:

 

ראה עשר התוצאות הקודמות

 

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

 

תמונות דקורטיביות

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

 

 

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

 

תמונות סמוכות

כאשר תמונות סמוכות מתוארות בטקסט, עשויים לעבור מסרים משעשעים.

 

 

בדפדפן לא גרפי, יכול להיות כתוב משהו כזה:

איש מבשל אישתו

אפשר להמנה מזה אם שמים את התמונות בשורות שונות או אם שמים הפרדה ביניהן. אפשר להשתמש בסוגריים או בנקודות בתכונת ה- alt-text:

[איש מבשל][אישתו]

איש מבשל.אישתו.

 

תיאורים ארוכים יותר

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

 

<img src="foo.gif" alt="Pie Chart Titled: Food Sales for 2000" longdesc="foodsales.html">

 

במקרה הזה, קובץ בשם foodsales.html יכיל תיאור טקסט בלבד של גרף העוגה.

 

תכונת ה- LONGDESC לא נתמכת עדיין על ידי כל הדפדפנים, לכן לעת עתה צריך גם לספק קישור לקובץ המכיל את תיאור הטקסט. קונבנציה אחת היא ה- D link. כתבו [D] מיד לאחר התמונה, וקשרו אותה לאותו הקובץ שליו מפנה ה- LONGDESC. אפשר לראות דוגמא ל- D link באתר הבית של Cobra ב- www.cobra.com, ודוגמא נוספת בדף הבית של המרכז הלאומי לאמנויות ומוגבלויות. ניתן להשתמש ב- D links גם לתיאורי ASCII art ומולטימדיה.

אלמנטים אחרים שאינם טקסט

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