תוכן שלא מופיע במסך מוסתר מפני טכנולוגיה מסייעת

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

איך בודקים באופן ידני

כדי לבדוק שהתוכן שמחוץ למסך מוסתר, צריך לבדוק אותו באופן ידני באמצעות קורא מסך. - עבור משתמשי Mac, נכנסים בסרטון הזה בנושא השימוש ב-VoiceOver. - למשתמשי PC: בסרטון הזה מוסבר על השימוש ב-NVDA. - למשתמשים ב-Chromebook, מומלץ לנסות את ChromeVox, קורא המסך המובנה.

מקישים על המקש TAB כדי לדפדף בדף באמצעות Tab. קורא המסך לא אמור להקריא תוכן מוסתר.

איך לתקן

כדי להסתיר תוכן מחוץ למסך, מסירים את הרכיב שמכיל את התוכן הזה מתוך סדר הכרטיסיות על ידי הגדרת הערך display: none או visibility: hidden.

לדוגמה:

.remove-me {
  visibility: hidden;
}

<button class="remove-me">Can't reach me with the TAB key!</button>

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

משאבים

קוד המקור לבדיקת תוכן מחוץ למסך מוסתר מטכנולוגיה מסייעת