מדריכים למפתחים

טבלאות

 

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

הנחיות נגישות רלוונטיות

1.3.1 מידע וקשרים: יש להבטיח כי המידע המבנה, והקשרים המוצגים בטבלה ניתנים לזיהוי ע"י תוכנה או שהם זמינים כטקסט. (רמה A )
1.3.2 רצף בעל משמעות: יש להקפיד שתכנת קריאה תוכל לזהות את רצף הקריאה הנכון של התכנים בטבלה על מנת לא לאבד משמעות. (רמה A )

טכניקות לבניית טבלאות נגישות

שימוש ב catipon element ככותרת לטבלה
caption element מתאר בקצרה את הטבלה. רוב הדפדפנים מציגים את ה-caption ממורכז מעל הטבלה. תכונת ה-CSS: caption-side משמשת לשינוי ברירת המחדל, בהתאם לצורך. בעת השימוש ב caption element מקמו אותו מיד לאחר טאג פתיחת הטבלה

element מתאר בקצרה את הטבלה. רוב הדפדפנים מציגים את ה-caption ממורכז מעל הטבלה. תכונת ה-CSS: caption-side משמשת לשינוי ברירת המחדל, בהתאם לצורך. בעת השימוש ב caption element מקמו אותו מיד לאחר טאג פתיחת הטבלה.

שימוש ב summary element לתיאור תוכן הטבלה

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

קיצור כותרות – attribute abbr

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

1

2

3

<th abbr="Company">Company Name</th>

<th abbr="Employees">Number of Employees</th>

<th abbr="Founded">Foundation Year</th>

Company NameNumber of EmployeesFoundation Yearאם לוקחים בחשבון שלא פשוט להתאים טבלה לlayout מסוים, לרוב הנטייה היא להשתמש בכותרות קצרות. במקרים כאלו ניתן להשתמש ב attribute title או ב tag על מנת לספק הסבר מפורט יותר.


קישור בין כותרות לתאים בטבלאות נתונים פשוטות


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

אם לוקחים בחשבון שלא פשוט להתאים טבלה לlayout מסוים, לרוב הנטייה היא להשתמש בכותרות קצרות. במקרים כאלו ניתן להשתמש ב attribute title או ב tag <abbr> על מנת לספק הסבר מפורט יותר.

קישור בין כותרות לתאים בטבלאות נתונים פשוטות

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

בטבלה שלהלן מופיעות שורת כותרת אחת ושתי שורות נתונים. זוהי טבלה פשוטה:

 

פרטי מנהלים
תפקיד שם משפחה שם פרטי
מנכ"ל כהן יוספה
מנהל שיווק לוי יצחק

 

בכדי שתכנת קורא המסך תזהה את תאי השורה העליונה כתאי כותרת יש להגדירם כתאי <th> ולא כתאי <td> רגילים.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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

 

 

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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>

 

 

 

 

 

Travel Expense Report
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

.00 800.27

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<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>

 

 

 

הצג עוד

מאמרים נפוצים

בדוק גם

Close
Back to top button
Close