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