בנוסף למבנה, יש הרבה רכיבי HTML תומכים שכדאי לקחת בחשבון כשבונים ומעצבים אתרים עם נגישות דיגיטלית. במהלך הקורס Learn Accessibility (לימוד נגישות) אנחנו מתייחסים להרבה רכיבים.
המודול הזה מתמקד ברכיבים ספציפיים מאוד שלא מתאימים לאף אחד מהמודולים האחרים, אבל חשוב להכיר אותם.
כותרת הדף
רכיב ה-HTML <title> מגדיר את התוכן של הדף או המסך שהמשתמש עומד לצפות בהם. הוא נמצא בקטע <head> של מסמך HTML, והוא שווה ערך ל-<h1> או לנושא הראשי של הדף. תוכן הכותרת מוצג בכרטיסיית הדפדפן ועוזר למשתמשים להבין באיזה דף הם מבקרים, אבל הוא לא מוצג באתר או באפליקציה עצמם.
באפליקציית דף יחיד (SPA), הטיפול ב-<title> שונה מעט, כי המשתמשים לא עוברים בין דפים כמו באתרים עם כמה דפים. ב-SPA, אפשר להוסיף את הערך של המאפיין document.title באופן ידני או באמצעות חבילת עזר, בהתאם למסגרת JavaScript. יכול להיות שיידרש קצת יותר מאמץ כדי להודיע למשתמש בקורא מסך על הכותרות המעודכנות של הדפים.
שמות דפים תיאוריים טובים גם למשתמשים וגם לאופטימיזציה למנועי חיפוש (SEO), אבל אל תגזימו ואל תוסיפו הרבה מילות מפתח. הכותרת היא הדבר הראשון שמוכרז כשמשתמש בטכנולוגיה מסייעת נכנס לדף, ולכן היא צריכה להיות מדויקת, ייחודית ותיאורית, אבל גם תמציתית.
כשכותבים כותרות לדפים, מומלץ גם להוסיף בהתחלה את התוכן החשוב או את הדף הפנימי, ואז להוסיף את הדפים או המידע הקודמים. כך משתמשי AT לא צריכים להאזין למידע שהם כבר שמעו.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
שפה
שפת הדף
מאפיין שפת הדף (lang) מגדיר את שפת ברירת המחדל לכל הדף. המאפיין הזה מתווסף לתג <html>. צריך להוסיף מאפיין שפה תקין לכל דף, כי הוא מסמן לטכנולוגיה המסייעת באיזו שפה להשתמש.
מומלץ להשתמש בקודי שפה של ISO בני שני תווים כדי להגדיל את הכיסוי של הטכנולוגיות המסייעות, כי רבות מהן לא תומכות בקודי שפה מורחבים.
אם מאפיין השפה חסר לחלוטין, הטכנולוגיה המסייעת תוגדר כברירת מחדל לשפה שהמשתמש תכנת. לדוגמה, אם הטכנולוגיה המסייעת הוגדרה לספרדית, אבל משתמש ביקר באתר או באפליקציה באנגלית, הטכנולוגיה המסייעת תנסה לקרוא את הטקסט באנגלית עם מבטא וקצב דיבור ספרדיים. השילוב הזה מוביל לכך שהמוצר הדיגיטלי לא שמיש ולתסכול של המשתמש.
<html>...</html>
<html lang="en">...</html>
למאפיין lang יכולה להיות משויכת רק שפה אחת. כלומר, למאפיין <html> יכולה להיות רק שפה אחת, גם אם יש כמה שפות בדף. מגדירים את lang כשפה הראשית של הדף.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
שפת החלק
אפשר גם להשתמש במאפיין השפה (lang) כדי להגדיר מעברים בין שפות בתוכן עצמו. הכללים הבסיסיים שחלים על המאפיין הזה זהים לאלה שחלים על מאפיין השפה של הדף כולו, רק שבמקרה הזה מוסיפים אותו לרכיב המתאים בדף במקום לתג <html>.
חשוב לזכור שהשפה שמוסיפים לרכיב <html> מועברת לכל הרכיבים שכלולים בו, לכן תמיד צריך להגדיר קודם את השפה הראשית של הדף במאפיין lang ברמה העליונה.
לכל אלמנט בדף שכתוב בשפה אחרת, מוסיפים את המאפיין lang לאלמנט העוטף המתאים. ההגדרה הזו תבטל את הגדרת השפה ברמה העליונה עד שהרכיב הזה ייסגר.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrames
רכיב ה-iframe (<iframe>) משמש לאירוח של דף HTML אחר או של תוכן של צד שלישי בתוך הדף. היא בעצם מכניסה דף אינטרנט אחר לדף ההורה. בדרך כלל משתמשים ב-iFrame לפרסומות, לסרטונים מוטמעים, לניתוח נתוני אינטרנט ולתוכן אינטראקטיבי.
כדי להפוך את <iframe> לנגיש, יש כמה היבטים שצריך לקחת בחשבון. קודם כל, כל <iframe> עם תוכן ייחודי צריך לכלול אלמנט title בתוך תג האב. הכותרת הזו מספקת למשתמשי AT מידע נוסף על התוכן בתוך התג <iframe>.
בנוסף, מומלץ להגדיר את הגלילה לערך auto או yes בהגדרות התג <iframe>. כך אנשים עם לקויות ראייה יכולים לגלול לתוכן בתוך <iframe> שאולי לא יוכלו לראות בדרך אחרת. מומלץ שהמאגר <iframe> יהיה גמיש גם בגובה וגם ברוחב.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>