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