כדי שקורא מסך יוכל להציג למשתמש ממשק משתמש דיבור, לאלמנטים משמעותיים צריכות להיות תוויות מתאימות או טקסטים חלופיים. תוויות או טקסט חלופי נותנים לאלמנט את השם הנגיש שלו, אחד המאפיינים העיקריים לביטוי הסמנטיקה של אלמנטים בעץ הנגישות.
כששם האלמנט משולב עם התפקיד של האלמנט, הוא מספק למשתמשים הקשר כדי שיוכלו להבין איזה סוג אלמנט הם מקיימים איתו אינטראקציה ואיך הוא מיוצג בדף. אם לא מצוין שם, קורא המסך יקריא רק את התפקיד של הרכיב. נסו לדמיין שאתם מנסים לנווט בדף ושומעים את המילים 'לחצן', 'תיבת סימון', 'תמונה' בלי הקשר נוסף. לכן, תוויות וטקסטים חלופיים חיוניים לחוויה טובה ונגישה.
בדיקת השם של רכיב
קל לבדוק את השם הנגיש של רכיב באמצעות כלי הפיתוח של 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