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