המסמך

בנוסף למבנה, יש הרבה רכיבי HTML שתומכים בבנייה ובעיצוב של נגישות דיגיטלית. בקורס 'לומדים נגישות' עוסקים בהרבה אלמנטים.

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

כותרת דף

רכיב ה-HTML <title> מגדיר את התוכן של הדף או המסך שהמשתמש עומד לראות. הוא נמצא בקטע <head> של מסמך HTML, והוא מקביל ל-<h1> או לנושא הראשי של הדף. תוכן הכותרת מוצג בכרטיסייה בדפדפן ועוזר למשתמשים להבין באיזה דף הם מבקרים, אבל הוא לא מוצג באתר או באפליקציה עצמם.

באפליקציה עם דף יחיד (SPA), הערך <title> מטופל בדרך מעט שונה, כי המשתמשים לא עוברים בין דפים כמו באתרים עם כמה דפים. כשמדובר ב-SPA, אפשר להוסיף את הערך של הנכס document.title באופן ידני או באמצעות חבילת עזר, בהתאם למסגרת של JavaScript. ההודעה על כותרות הדפים המעודכנות למשתמשים בקורא מסך עשויה להימשך זמן נוסף.

כותרות דפים תיאוריות מתאימות גם למשתמשים וגם לאופטימיזציה למנועי חיפוש (SEO), אבל חשוב לא להגזים ולהוסיף הרבה מילות מפתח. מכיוון שהכותרת היא הדבר הראשון שמצהירים כשמשתמש מבקר בדף ב-AT, היא צריכה להיות מדויקת, ייחודית ותיאורית, אבל גם תמציתית.

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

מה אסור לעשות
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
מה מותר לעשות
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Language

שפת הדף

מאפיין שפת הדף (lang) מגדיר את שפת ברירת המחדל של הדף כולו. המאפיין הזה מתווסף לתג <html>. צריך להוסיף מאפיין שפה חוקי לכל דף, כי הוא מסמן ל-AT לאיזו שפה להשתמש.

כדי לקבל כיסוי רחב יותר ב-AT, מומלץ להשתמש בקודי שפה לפי תקן ISO בני שני תווים, כי רבים מהם לא תומכים בקודי שפה מורחבים.

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

מה אסור לעשות
<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 לרכיב ה-wrapper המתאים. הפעולה הזו תשנה את הגדרת השפה ברמה העליונה עד שהרכיב ייסגר.

מה אסור לעשות
<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>.

שנית, השיטה המומלצת היא להגדיר את הגלילה כ'אוטומטית' או 'כן' בהגדרות התג <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>

בדיקת ההבנה

בחינת הידע שלכם בנושא נגישות למסמכים.

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

אל דאגה, ה-AT יכול לקרוא כל שפה באופן אוטומטי.
למרות שלחלק מה-AT עשוי להיות כישורי זיהוי שפה, לא ניתן להבטיח שה-AT ינחש נכון.
יש לכלול את כל השפות ברכיב <html>. לדוגמה <html lang="en,lt,pl,pt">
למאפיין lang יכולה להיות משויכת שפה אחת בלבד.
מגדירים lang ראשי עבור <html> ושפות נוספות בכל רכיב שכולל תוכן בשפה אחרת.
AT יסתמך בעיקר על מאפיין השפה <html> כדי לקרוא את המסמך. אם יש לכם טקסט בכמה שפות, צריך להקפיד להוסיף מאפיין lang לרכיב המתאים (כמו קטע או פסקה) עם קוד ה-ISO הנכון בשתי אותיות.