Chapter: Internet & World Wide Web HOW TO PROGRAM - Web Accessibility

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Accessibility in XHTML Tables

Complex Web pages often contain tables for formatting content and presenting data. Many screen readers are incapable of translating tables correctly unless the tables are properly de signed.

Accessibility in XHTML Tables

 

Complex Web pages often contain tables for formatting content and presenting data. Many screen readers are incapable of translating tables correctly unless the tables are properly de signed. For example, the CAST eReader, a screen reader developed by the Center for Ap-plied Special Technology (www.cast.org), starts at the top-left-hand cell and reads columns from top to bottom, left to right. This procedure is known as reading a table in a linearized manner. The CAST eReader reads the table in Fig. 34.3 as follows:

 

Price of Fruit Fruit Price Apple $0.25 Orange $0.50 Banana $1.00 Pineapple $2.00

 

 

          <?xml version = "1.0"?>

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

         

          <!-- Fig. 34.3: withoutheaders.html -->

          <!-- Table without headers      -->

 

          <html>

          <head>

          <title>XHTML Table Without Headers</title>

         

          <style type = "text/css">

          body { background-color: #ccffaa;

          text-align: center }

          </style>

          </head>

<body>

 

<p>Price of Fruit</p>

 

<table border = "1" width = "50%">

 

<tr>

<td>Fruit</td>

<td>Price</td>

</tr>

 

<tr>

<td>Apple</td>

<td>$0.25</td>

</tr>

 

<tr>

<td>Orange</td>

<td>$0.50</td>

</tr>

 

<tr>

<td>Banana</td>

<td>$1.00</td>

</tr>

 

<tr>

<td>Pineapple</td>

<td>$2.00</td>

</tr>

 

</table>

          </body>

          </html>


 

Fig. 34.3 XHTML table without accessibility modifications

 

This reading does not present the content of the table adequately. WCAG 1.0 recom-mends using CSS instead of tables, unless the tables’ content linearizes in an understand-able manner.

 

If the table in Fig. 34.3 were large, the screen reader’s linearized reading would be even more confusing to users. By modifying the <td> tag with the headers attribute and modifying header cells (cells specified by the <th> tag) with the id attribute, a table will be read as intended. Figure 34.4 demonstrates how these modifications change the way a table is interpreted.

 

This table does not appear to be different from a standard XHTML table. However, the table is read in a more intelligent manner, when using a screen reader. A screen reader vocalizes the data from the table in Fig. 34.4 as follows:

 

Caption: Price of Fruit

 

Summary: This table uses th and the id and headers attributes to make the table readable by screen readers.

Fruit: Apple, Price: $0.25

Fruit: Orange, Price: $0.50

 

Fruit: Banana, Price: $1.00 Fruit: Pineapple, Price: $2.00

 

 

Every cell in the table is preceded by its corresponding header when read by the screen reader. This format helps the listener understand the table. The headers attribute is intended specifically for tables that hold large amounts of data. Most small tables linearize well as long as the <th> tag is used properly. The summary attribute and caption ele-ment are also suggested. For more examples demonstrating how to make tables accessible, visit www.w3.org/TR/WCAG.

 

 

            <?xml version = "1.0"?>

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

           

            <!-- Fig. 34.4: withheaders.html -->

            <!-- Table with headers           -->

                       

            <html>

            <head>

            <title>XHTML Table With Headers</title>

           

            <style type = "text/css">

            body { background-color: #ccffaa;

            text-align: center }

            </style>

            </head>

<body>          

           

<!-- this table uses the id and headers attributes to    -->

<!-- ensure readability by text-based browsers. It also           -->

<!-- uses a summary attribute, used screen readers to            -->

<!-- describe the table -->

           

<table width = "50%" border = "1"   

summary = "This table uses th elements and id and  

headers attributes to make the table readable

by screen readers">    

           

<caption><strong>Price of Fruit</strong></caption>          

           

<tr>    

<th id = "fruit">Fruit</th>    

<th id = "price">Price</th>   

</tr>   

           

<tr>    

<td headers = "fruit">Apple</td>     

<td headers = "price">$0.25</td>     

</tr>   

           

<tr>    

<td headers = "fruit">Orange</td>   

<td headers = "price">$0.50</td>     

</tr>   

           

<tr>

<td headers = "fruit">Banana</td>

<td headers = "price">$1.00</td>

</tr>

 

<tr>

<td headers = "fruit">Pineapple</td>

<td headers = "price">$2.00</td>

</tr>

 

</table>

            </body>

            </html>


Fig. 34.4 Table optimized for screen reading using attribute headers


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.