המסמך

בנוסף למבנה, יש הרבה רכיבי 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>

שפה

שפת הדף

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

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

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

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

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