אחד ההיבטים החשובים ביותר של נגישות דיגיטלית הוא המבנה הבסיסי של הדף. כשאתם יוצרים את האתר או האפליקציה באמצעות רכיבים מבניים במקום להסתמך על סגנונות בלבד, אתם מספקים הקשר קריטי לאנשים שמשתמשים בטכנולוגיות מסייעות (AT), כמו קוראי מסך.
האלמנטים המבניים משמשים כקווים כלליים של התוכן במסך, אבל הם משמשים גם כנקודות עיגון שמאפשרות ניווט קל יותר בתוכן.
כשמשתמשים ברכיבי HTML סמנטיים, המשמעות המובנית של כל רכיב מועברת לעץ הנגישות ומשמשת את כלי העזרה. כך התוכן מקבל יותר משמעות מאשר כשמשתמשים ברכיבים לא סמנטיים. יכול להיות שבמקרים מסוימים תצטרכו להוסיף מאפייני ARIA נוספים כדי ליצור קשרים או לשפר את חוויית המשתמש הכוללת, אבל ברוב המקרים, אחד מיותר מ-100 רכיבי ה-HTML הזמינים אמור לפעול בצורה טובה למדי בפני עצמו.
המודול הזה מתמקד באלמנטים המבניים הנפוצים ביותר שחשובים מאוד לנגישות דיגיטלית, אבל יש כמובן אלמנטים נוספים וגורמים סביבתיים שצריך להביא בחשבון כשמפתחים מבנה באתר או באפליקציה. הדוגמאות האלה הן רק מבוא לנושא, ולא מקיפות את כל הנושאים.
ציוני דרך
משתמשים בעזרים טכנולוגיים מסתמכים על אלמנטים מבניים כדי לקבל מידע על הפריסה הכוללת של הדף. כשמחלקים אזורים גדולים של תוכן, אפשר להשתמש בתפקידי ציון דרך של ARIA או ברכיבי ציון הדרך החדשים יותר של HTML כדי להוסיף הקשר מבני לדף.
ציוני דרך מבטיחים שהתוכן נמצא באזורים שניתן לנווט בהם. מומלץ לספק לפחות ציון דרך אחד לכל דף.
במקורות מידע מסוימים מומלץ לשלב בין סמנים של ARIA ו-HTML כדי לספק כיסוי טוב יותר של טכנולוגיות עזר. סוג היתירות הזה לא אמור לגרום לבעיות אצל המשתמשים, אבל מומלץ לבדוק את הדפוסים באמצעות קורא מסך כדי לוודא. אם אתם לא בטוחים, מומלץ להשתמש כברירת מחדל רק ברכיבי HTML חדשים יותר של ציוני דרך, כי התמיכה בדפדפנים רחבה מאוד.
נבדוק את ההתאמה בין רכיבי ציון הדרך ב-HTML כפי שהם מותאמים לתפקידים המקבילים של ציון הדרך ב-ARIA.
| רכיב ציון דרך ב-HTML | תפקיד של מאפיין ARIA |
|---|---|
<header> |
banner |
<aside> |
complementary |
<footer> |
contentinfo |
<nav>
|
ניווט |
<main> |
main |
<form> 1 |
form |
<section> 1 |
region |
עכשיו נבדוק דוגמאות למבנה תוכן נגיש.
<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 מוטמעות בצורה נכונה, הן יוצרות קווים כלליים תמציתיים של תוכן הדף הכולל.
יש שש רמות של כותרות שאפשר להשתמש בהן. הכותרת ברמה אחת <h1> משמשת למידע החשוב ביותר בדף, והכותרת ברמה שש <h6> משמשת למידע הפחות חשוב.
חשוב לשמור על הסדר של רמות הכותרות. מומלץ לא לדלג על רמות של כותרות. לדוגמה, לא להתחיל קטע עם <h1> ולאחר מכן להוסיף <h5>. במקום זאת, צריך לעבור אל <h5> לפי הסדר. הסדר ברמת הכותרת חשוב במיוחד למשתמשים בעזרים טכנולוגיים, כי זו אחת מהדרכים העיקריות שלהם לנווט בתוכן.
כדי לעזור לכם לפעול בהתאם למבנה ולסדר הסמנטיים המתאימים לכותרות, מומלץ לנתק את סגנונות ה-CSS מרמות הכותרות. כך תוכלו לבחור סגנונות שונים לכותרות תוך שמירה על הסדר ברמת הכותרות. חשוב מאוד לא להשתמש בסגנונות בלבד כדי ליצור כותרות, כי הן לא נחשבות לכותרות בעיני הטכנולוגיה לעזרת אנשים עם מוגבלויות.
כשאנחנו יוצרים כותרות מזויפות, המבנה המתאים לא מועבר למשתמשי 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:
הרכיב <li> של פריט הרשימה משמש לייצוג פריט ברשימה מסודרת או לא מסודרת, ואילו הרכיבים <dt> של מונח התיאור ו<dd> של ההגדרה נמצאים ברשימה של התיאורים.
כשהאלמנטים האלה מתוכנתים בצורה נכונה, הם יכולים להודיע למשתמשים ב-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>.
צריך גם להסתיר טבלאות פריסה ממשתמשים עם תכונות עזרה טכנית באמצעות תפקיד הצגה של ARIA או מצב aria-hidden.
<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>