כדי שקורא מסך יוכל להציג למשתמש ממשק משתמש דיבור, לאלמנטים משמעותיים צריכות להיות תוויות מתאימות או טקסטים חלופיים. תוויות או טקסט חלופי נותנים לאלמנט את השם הנגיש שלו, אחד המאפיינים העיקריים לביטוי הסמנטיקה של אלמנטים בעץ הנגישות.
כששם האלמנט משולב עם התפקיד של האלמנט, הוא מספק למשתמשים הקשר כדי שיוכלו להבין איזה סוג אלמנט הם מקיימים איתו אינטראקציה ואיך הוא מיוצג בדף. אם לא מצוין שם, קורא המסך יקריא רק את התפקיד של הרכיב. נסו לדמיין שאתם מנסים לנווט בדף ושומעים את המילים 'לחצן', 'תיבת סימון', 'תמונה' בלי הקשר נוסף. לכן חשוב להוסיף תוויות וחלופות טקסט כדי ליצור חוויה טובה ונגישה.
בדיקת השם של רכיב
קל לבדוק את השם הנגיש של רכיב באמצעות כלי הפיתוח של Chrome:
- לוחצים לחיצה ימנית על אלמנט ובוחרים באפשרות בדיקה. החלונית Elements של DevTools תיפתח.
- בחלונית Elements (רכיבים), מחפשים את החלונית Accessibility (נגישות). יכול להיות שהוא מוסתר מאחורי הסמל
». - בתפריט הנפתח Computed Properties, מחפשים את המאפיין Name.
בין שמדובר ב-img עם טקסט alt ובין שמדובר ב-input עם label, כל התרחישים האלה מובילים לאותה תוצאה: מתן השם הנגיש לרכיב.
איך בודקים אם יש שמות חסרים
יש כמה דרכים להוסיף שם נגיש לרכיב, בהתאם לסוג שלו. בטבלה הבאה מפורטים סוגי הרכיבים הנפוצים ביותר שצריך לתת להם שמות נגישים, וכן קישורים להסברים על הוספת הרכיבים האלה.
| סוג הרכיב | איך מוסיפים שם |
|---|---|
| מסמך HTML | תיוג של מסמכים ומסגרות |
רכיבי <frame> או <iframe>
|
תיוג של מסמכים ומסגרות |
| רכיבי תמונה | הוספת טקסט חלופי לתמונות ולאובייקטים |
<input type="image"> מרכיבים
|
הוספת טקסט חלופי לתמונות ולאובייקטים |
<object> מרכיבים
|
הוספת טקסט חלופי לתמונות ולאובייקטים |
| לחצנים | לחצנים וקישורים של תוויות |
| קישורים | תוויות ללחצנים ולקישורים |
| רכיבי טפסים | תוויות לרכיבי טפסים |
הוספת תוויות למסמכים ולמסגרות
כל דף צריך לכלול רכיב title שמסביר בקצרה במה הדף עוסק. הרכיב title נותן לדף את השם הנגיש שלו. כשקורא מסך נכנס לדף, זהו הטקסט הראשון שהוא מקריא.
לדוגמה, הדף הבא מכיל את הכותרת 'מתכון לאפייה מהירה של תמר':
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
באופן דומה, לכל רכיבי frame או iframe צריכים להיות מאפייני title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
תוכן של רכיב iframe יכול לכלול רכיב title פנימי משלו, אבל בדרך כלל קורא מסך נעצר בגבול המסגרת ומכריז על התפקיד של הרכיב – 'מסגרת' – ועל השם הנגיש שלו, שמסופק על ידי המאפיין title. כך המשתמש יכול להחליט אם להיכנס למסגרת או לעקוף אותה.
הוספת טקסט חלופי לתמונות ולאובייקטים
הערך של img תמיד צריך להיות מלווה במאפיין alt כדי לתת לתמונה את השם שאפשר לגשת אליה. אם התמונה לא נטענת, הטקסט alt משמש כ-placeholder כדי שהמשתמשים יוכלו להבין מה התמונה ניסתה להעביר.
כתיבת טקסט טוב של alt היא קצת אמנות, אבל יש כמה הנחיות שאפשר לפעול לפיהן:
- צריך לקבוע אם התמונה מספקת תוכן שקשה לקבל אחרת על ידי קריאת הטקסט שמסביב.
- אם כן, כדאי להעביר את התוכן בקצרה ככל האפשר.
אם התמונה משמשת לקישוט ולא מכילה תוכן שימושי, תוכלו להקצות לה מאפיין alt="" ריק כדי להסיר אותה מעץ הנגישות.
תמונות כקישורים וכקלטים
תמונה שעטופה בקישור צריכה להשתמש במאפיין alt של img כדי לתאר לאן המשתמש ינווט אם הוא ילחץ על הקישור:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
באופן דומה, אם נעשה שימוש ברכיב <input type="image"> כדי ליצור לחצן תמונה, הוא צריך להכיל טקסט alt שמתאר את הפעולה שמתרחשת כשהמשתמש לוחץ על הלחצן:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
אובייקטים מוטמעים
רכיבי <object>, שמשמשים בדרך כלל להטמעות כמו Flash, PDF או ActiveX, צריכים לכלול גם טקסט חלופי. בדומה לתמונות, הטקסט הזה מוצג אם העיבוד של הרכיב נכשל. הטקסט החלופי מופיע בתוך הרכיב object כטקסט רגיל, כמו 'דוח שנתי' בהמשך:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
תוויות ללחצנים ולקישורים
לחצנים וקישורים הם לרוב חלק חיוני מחוויית השימוש באתר, ולכן חשוב שהם יהיו עם שמות נגישים.
לחצנים
רכיב button תמיד מנסה לחשב את השם הנגיש שלו באמצעות תוכן הטקסט שלו. ללחצנים שלא נכללים ב-form, ייתכן שכתיבה של פעולה ברורה כתוכן הטקסט תספיק כדי ליצור שם נגיש.
<button>Book Room</button>
חריג נפוץ לכלל הזה הוא לחצני סמלים. לחצן עם סמל יכול להשתמש בתמונה או בגופן סמלים כדי לספק את תוכן הטקסט של הלחצן. לדוגמה, הלחצנים בכלי 'מה הוא מה שאתה רואה' (WYSIWYG) בעיצוב הטקסט הם בדרך כלל רק סמלים גרפיים:
כשעובדים עם לחצני סמלים, כדאי לתת להם שם נגיש מפורש באמצעות המאפיין aria-label. aria-label מבטלת את כל תוכן הטקסט בתוך הלחצן, ומאפשרת לתאר בבירור את הפעולה לכל מי שמשתמש בקורא מסך.
<button aria-label="Left align"></button>
קישורים
בדומה ללחצנים, השם הנגיש של קישורים נגזר בעיקר מתוכן הטקסט שלהם. טיפ נחמד ליצירת קישור הוא להוסיף לקישור עצמו את קטע הטקסט המשמעותי ביותר, במקום להשתמש במילים ריקות כמו 'כאן' או 'מידע נוסף'.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
האפשרות הזו שימושית במיוחד לקוראי מסך שמציעים קיצורי דרך להצגת רשימה של כל הקישורים בדף. אם הקישורים מלאים בטקסט מילוי חוזר, מקשי הקיצור האלה הופכים לפחות שימושיים:
תוויות לרכיבי טופס
יש שתי דרכים לשייך תווית לרכיב טופס, כמו תיבת סימון. כל אחת מהשיטות גורמת לטקסט התווית להפוך גם ליעד קליקים עבור תיבת הסימון, וזה שימושי גם למשתמשים בעכבר או במסך מגע. כדי לשייך תווית לרכיב:
- ממקמים את רכיב הקלט בתוך אלמנט תווית
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- לחלופין, אפשר להשתמש במאפיין
forשל התווית ולהפנות ל-idשל הרכיב
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
כשתיבת הסימון מסומנת בתווית בצורה נכונה, קורא המסך יכול לדווח שהרכיב הוא תיבת סימון, שהוא מסומן וששמו 'לקבלת מבצעים?', כמו בדוגמה הבאה ל-VoiceOver:
TODO: DevSite - Think and Check assessment