תוויות וחלופות לטקסט

Rob Dodson

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

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

בדיקת שם של רכיב

אפשר לבדוק בקלות את השם הנגיש של אלמנט באמצעות כלי הפיתוח של Chrome:

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

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

אם התמונה משמשת כקישוט ולא מספקת תוכן שימושי, אפשר להוסיף לו מאפיין 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>

טופס לנייד עם &#39;חדר ספרים&#39; לחצן.

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

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

תפריט הקישורים של VoiceOver מלא במילה &#39;כאן&#39;.
דוגמה ל-VoiceOver, קורא מסך ב-macOS, שמציג את הניווט לפי הקישורים בתפריט הקישורים.

רכיבי טופס של תווית

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

  • הצבת רכיב הקלט בתוך רכיב של תווית
<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:

פלט הטקסט של VoiceOver שבו מוצגת ההודעה &#39;לקבל שוברי פרסום?&#39;

TODO: DevSite – בדיקת חשיבה ובדיקה