טבלאות
טבלאות הן אמצעי להציג נתונים בעלי מבנה אחיד. למשל תפריט במסעדה הוא טבלה בעלת שתי עמודות שם מאכל ומחיר המאכל.
הטבלה מאפשרת לנו לחסוך במלל מיותר. בדוגמא שלפנינו במקום לכתוב "מחירו של מאפה גבינה הוא 12 ש"ח, מחירו של מאפה שוקולד הוא 13 ש"ח, וכן הלאה, נבחר להציג את הנתונים באמצעות טבלה.
אדם המתבונן בטבלה יוכל להסיק ממיקום התא את משמעותו – התבוננות על כותרת העמודה וכותרת השורה יספקו את המידע הנחוץ להתמצאות בטבלה. אנשים עיוורים הגולשים באמצעות קורא מסך זקוקים למידע מיקום התא במערך הטבלאי כדי להבין את השיוך שלו לכותרות העמודת והטורים.
הנחיות נגישות רלוונטיות
1.3.1 מידע וקשרים: מידע, מבנה, וקשרים הנמסרים באמצעות הצגה ניתנים לזיהוי ע"י תוכנה או שהם זמינים כטקסט. (רמה A)
1.3.2 רצף בעל משמעות: כאשר הרצף בו מוצגים התכנים משפיע על משמעותם, ניתן לבצע זיהוי ע"י תוכנה של רצף קריאה נכון. (רמה A)
טכניקות לבניית טבלאות נגישות
שימוש ב caption element ככותרת לטבלה
caption element משמש לתיאור קצר של הטבלה, בדומה ל-image caption. רוב הדפדפנים הויזואליים מציגים את ה caption ממורכז מעל הטבלה. תכונת ה-CSS: caption-side משמשת לשינוי ברירת המחדל, במידת הצורך. כאשר משתמשים ב caption element, יש למקם אותו מיד לאחר טאג פתיחת הטבלה.
<table> <caption>Table 1: Company data</caption>
שימוש ב summary element לתיאור תוכן הטבלה
אדם ללא לקות ראיה יכול להחליט בקלות אם להתעמק בפרטי טבלה. מבט מהיר יגלה מה גודל הטבלה ומהם מרכיביה הכלליים. אדם המשתמש בקורא מסך אינו מסוגל לכך אלא אם כן יצורף לקוד הטבלה attribute summary. כך ניתן לספק מידע מפורט יותר מאשר כותרת ה-<caption>. כיוון שדפדפנים אינם מציגים את תוכן ה summary, ניתן לספק מידע באורך המספיק כדי להסביר את תוכן הטבלה.
קיצור כותרות – attribute abbr
כאשר קורא מסך נתקל בטבלה הוא יכול להקריא את הכותרת (או הכותרות) לפני כל תא נתונים. אם משתמשים בכותרות ארוכות, הקראתן שוב ושוב יכולה להיות מעיקה. שימוש בattribute abbr מאפשר לספק גירסה מקוצרת לכותרות ארוכות עבור קורא המסך. השימוש בattribute abbr הינו אופציונאלי. ברוב המקרים כותרות הטבלה הן קצרות.
<th abbr="Company">Company Name</th> <th abbr="Employees">Number of Employees</th> <th abbr="Founded">Foundation Year</th>
בהתחשב בכך שקשה להתאים טבלה ל-layout מסוים, בד"כ המצב הוא הפוך – יש נטייה להשתמש בכותרות קצרות. במצב כזה ניתן להשתמש בattribute title או בטאג <abbr> כדי לספק הסבר ארוך יותר.
קישור בין כותרות לתאים בטבלאות נתונים פשוטות
טבלאות המכילות נתונים שונות במהותן מטבלאות המשמשות לעיצוב. בטבלאות המכילות נתונים עלינו למפות את היחסים בין התאים השונים בטבלה בכדי שמשתמשים בקוראי מסך יוכלו להבין מה מהות הנתון המוצג בתא. שימוש ב TH מגדיר את התא כתא מסוג כותרת.
לפנינו טבלה פשוטה המכילה שורת כותרת אחת ושתי שורות מידע:
תפקיד | שם משפחה | שם פרטי |
---|---|---|
מנכ"ל | כהן | יוספה |
מנהל שיווק | לוי | יצחק |
על מנת שקורא-מסך יוכל לזהות את תאי שורת הכותרת ככאלה, יש להגדיר אותם כ-<th> בקוד, ולא כתאים רגילים <td>.
<table border="0" summary="דוגמא לטבלת נתונים פשוטה. שורת כותרת (שם פרטי, שם משפחה, כתובת) ושתי שורות נתונים"> <caption>פרטי מנהלים</caption> <tbody> <tr> <th>תפקיד</th> <th>שם משפחה</th> <th>שם פרטי</th> </tr> <tr> <td>מנכ"ל</td> <td>כהן</td> <td>יוספה</td> </tr> <tr> <td>מנהל שיווק</td> <td>לוי</td> <td>יצחק</td> </tr> </tbody> </table>
קישור בין כותרות לתאים בטבלאות נתונים מורכבות
טבלאות מורכבות הינן טבלאות בהן ישנן כותרות המכלילות יותר מעמודה אחת או יותר משורה אחת (תאים מפוצלים). במקרים אלו יש לזהות כל תא לפי יותר משתי כותרות. כדי לפתור בעיה זו לכל תא כותרת נגדיר id ייחודי. כדי לקשור בין תא נתונים לכותרות מרובות נשתמש ב attribute headers, כך שהתא יכיל את רשימת ה ids שמגדירים אותו מופרדים ברווח.
לדוגמא התא בו מופיע המספר 300 בטבלה הבאה מוגדר על ידי הכותרות Employees , ACME Inc ו Women.
Table 1: Company data |
|||
|
Employees |
Founded |
|
---|---|---|---|
Men |
Women |
||
ACME Inc |
700 |
300 |
1947 |
XYZ Corp |
1200 |
800 |
1973 |
<table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td rowspan="2"></td> <th id="employees" colspan="2">Employees</th> <th id="founded" rowspan="2">Founded</th> </tr> <tr> <th id="men">Men</th> <th id="women">Women</th> </tr> <tr> <th id="acme">ACME Inc</th> <td headers="acme employees men">700</td> <td headers="acme employees women">300</td> <td headers="acme founded">1947</td> </tr> <tr> <th id="xyz">XYZ Corp</th> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td> </tr> </table>
דוגמא נוספת: כאשר חלק מהתאים משמשים ככותרות משנה בתוך הטבלה לדוגמא:
|
Meals |
Hotels |
Transport |
subtotals |
---|---|---|---|---|
San Jose |
|
|
|
|
25-Aug-97 |
37.74 |
112.00 |
45.00 |
|
26-Aug-97 |
27.28 |
112.00 |
45.00 |
|
subtotals |
65.02 |
224.00 |
90.00 |
379.02 |
Seattle |
|
|
|
|
27-Aug-97 |
96.25 |
109.00 |
36.00 |
|
28-Aug-97 |
35.00 |
109.00 |
36.00 |
|
subtotals |
131.25 |
218.00 |
72.00 |
421.25 |
Totals |
196.27 |
442.00 |
162.00 |
800.27 |
<table border="1"> <caption>Travel Expense Report</caption> <tr> <td></td> <th id="c2">Meals</th> <th id="c3">Hotels</th> <th id="c4">Transport</th> <td id="c5">subtotals</td> </tr> <tr> <th id="r2">San Jose</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td id="r3">25-Aug-97</td> <td headers="c2 r2 r3" bgcolor="#ffff00">37.74</td> <td headers="c3 r2 r3">112.00</td> <td headers="c4 r2 r3">45.00</td> <td></td> </tr> <tr> <td id="r4">26-Aug-97 <td headers="c2 r2 r4">27.28</td> <td headers="c3 r2 r4">112.00</td> <td headers="c4 r2 r4">45.00</td> </tr> ... <tr> <th id="r10">Totals</th> <td headers="c2 r10">196.27</td> <td headers="c3 r10">442.00</td> <td headers="c4 r10">162.00</td> <td headers="c5 r10">800.27</td> </tr> </table>
למידע נוסף – מאמר מצויין על נגישות טבלאות