מבנה התוכן

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

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

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

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

ציוני דרך

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

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

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

נשווה את הרכיבים של ציון הדרך ב-HTML כממופים לתפקידים המקבילים של ציון הדרך ב-ARIA.

עכשיו נשווה בין דוגמאות למבנה של תוכן נגיש.

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

כותרות

אם ההטמעה נכונה, רמות הכותרת ב-HTML הן מתווה תמציתי של התוכן הכולל בדף.

אפשר להשתמש בשש רמות כותרת. רמת הכותרת 1 <h1> משמשת למידע הגבוה ביותר והחשוב ביותר בדף, והיא עוברת בהדרגה לכותרת שש <h6>, כדי להציג את המידע הנמוך והחשוב ביותר.

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

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

כשאנחנו מזייפים כותרות, המבנה המתאים לא מוצג למשתמשי AT.

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

<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

רשימות

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

יש שלושה סוגים של רשימות HTML:

• הזמנת <ol>
• לא הוזמן <ul>
• תיאור <dl>

הרכיב של הפריט <li> משמש לייצוג פריט ברשימה ממוינת או לא ממוינת, ואת מונח התיאור <dt> ורכיבי ההגדרה <dd> ברשימת התיאור.

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

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

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

טבלאות

ב-HTML, טבלאות משמשות בדרך כלל לארגון הנתונים או פריסת הדפים.

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

פריסה

בתחילת האינטרנט, טבלאות פריסה היו רכיב ה-HTML העיקרי ששימש לבניית מבנים ויזואליים. כיום אנחנו משתמשים בשילוב של אלמנטים סמנטיים ולא סמנטיים, כמו <div> וציוני דרך, כדי ליצור פריסות.

אומנם הימים שבהם אפשר ליצור טבלאות פריסה מסתיימים, אבל יש מקרים שבהם עדיין משתמשים בטבלאות פריסה כמו אימיילים עם עושר חזותי, ניוזלטרים ומודעות. במקרים כאלה, בטבלאות שמשמשות רק לפריסה אסור להשתמש ברכיבים מבניים שמעבירים קשרים ומוסיפים הקשר, כמו <th> או <caption>.

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

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

נתונים

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

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

בהתאם למורכבות הטבלה, אפשר ליצור קשרים באמצעות קוד בדרכים שונות. השלב הראשון בהנגשת טבלה הוא סימון תאי כותרת באמצעות <th> ותאי נתונים באמצעות רכיבי <td>.

בטבלאות מורכבות יותר, ייתכן שתצטרכו להשתמש ברכיבים נוספים של טבלת HTML, כמו <rowgroup>, <colgroup>, <caption> ו-scope כדי להעביר את המשמעות ואת הקשרים.

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>