Web Accessibility - University Of Hawaii System

Trang chủ » Html Table Scope Col » Web Accessibility - University Of Hawaii System

Có thể bạn quan tâm

Web Accessibility

TABLES

> Return to Web Accessibility

Tables Should to be Properly Formatted Reason: Tables that lack row and column headings and specific attributes could prevent users with screen readers from navigating tables properly.

Solution: Use the "scope" attribute for columns and rows in conjunction with the <TH> or <TD> tags. The <TH> tag is used to signify a column or row headers and the <TD> tag is used for data cells. scope="col" scope="row". By using the scope attribute, the text in the cell will be associated with every cell in the column or row. The following is an example using the scope attribute:

Some recommend using the "Summary" attribute of the table tag, however the Access Board does not recommend using the "Summary" attribute because major screen readers do not support this attribute. If you want to summarize your table, you may place the description next to the table or in the body of the table. You may consider using the "Caption" tag for this which usually is a feature viewed when inserting a table in an HTML editor.

Examples Does meet the standard:

January February March April
Food 200.00 150.00 220.00 175.00
Gas 30.00 40.00 35.00 32.00
Electricity 70.00 75.00 60.00 65.00
If looking at the HTML code for the above table we would see...for screen readers the indicator of "row" or "column" via the addition of the scope tag helps the user associate a column with the associated row.

<table> <tr> <th>&nbsp;</th> <th scope="col" >January</th> <th scope="col" >February</th> <th scope="col" >March</th> <th scope="col">April</th></tr> <tr> <td scope="row" >Food</td> <td>200.00</td> <td>150.00</td> <td>220.00</td><td>175.00</td> </tr> <tr> <td scope="row" >Gas</td> <td>30.00</td> <td>40.00</td> <td>35.00</td> <td>32.00</td> </tr> <tr> <td scope="row" >Electricity</td> <td>70.00</td> <td>75.00</td> <td>60.00</td> <td>65.00</td> </tr> </table> Note: Notice how the "scope="row"" attribute was used with the <TD> tag. The <TH> tag could also have been used.

Does not meet the standard:

January February March April
Food 200.00 150.00 220.00 175.00
Gas 30.00 40.00 35.00 32.00
Electricity 70.00 75.00 60.00 65.00
If looking at the HTML code for the above table we would see....for screen readers there is no indicator as to which column/row the text is associated with, ending up being nothing more than a bunch of mixed up text for the user.

<tbody> <table> <td>January</td> <td>February</td> <td>March</td> <td>April</td> </tr> <tr> <td>Food</td> <td>200.00</td> <td>150.00</td> <td>220.00</td> <td>175.00</td> </tr> <tr> <td">Gas</td> <td>30.00</td> <td>40.00</td> <td>35.00</td> <td>32.00></td> </tr> <tr> <td>Electricity</td> <td>70.00</td> <td>75.00</td> <td>60.00</td> <td>65.00</td> </tr> </tbody> </table>

How To’s DREAMWEAVER ~ When using pay for editors such a Dreamweaver by Macromedia, Table attributes for "scope" are automatically added when inserting the table. Additional tags such as table headers (1) and captions (2 and 3) are optional features available that can also be added during table insertion.

image showing how to add header and caption to a table using DreamWeaver

MOZILLA COMPOSER ~ When using some of the free HTML editors these features may be slightly more difficult to find. In Mozilla, after you "insert table", click on the table to select it, then click on the table icon on the menu bar.

image showing how to access caption tag in Mozilla Composer

Choose the "Table" tab, then use the pull down menu next to "Captions:" and select a caption location, click Apply and OK.

image showing how to access caption tag in Mozilla Composer 2

At the bottom of the screen, select the <HTML> Source tab. This will allow you access to the HTML code so we can enter the "scope" tag as well as our caption.

image showing how to access the HTML source code in Mozilla Composer

Next to the <caption> HTML tag, click and type in your table description (1). Next to the <td> tag that has your first column header in it, click and type "scope="col" (2) - this indicates to a screen reader that the text is in the column area. Next to the <td> tag that has your first row header in it, click and type "scope="row" (3) - this indicates that the text is in a row, under the column with all proceeding data relevant to that row until the reader hits the next scope col or row tag.

Continue to add the "scope="col" and "scope="row" tags to the rest of the table. Then save the file.

image to show how to type in the HTML code for captions and scope tags

> Return to Web Accessibility

Từ khóa » Html Table Scope Col