Ensuring Accessibility - HTML5 Foundations - page 179

If you view the menu.html file in your browser, you won't see any visible difference, but screen readers can now
get a better understanding of your tables.
Try using the screen reader to read out the table. Close your eyes and try to visualize the table in your head as the
screen reader goes through the various table cells. Can you see how using table headers and captions help you build
a more complete picture of the table?
In addition to applying scoped column headings to the table, you can go one step further and mark up the first cell in
each row to be a table heading. This is because all the data in the rest of the cells in the row relates back to the item
named in the first cell. Making this change can help computer programs identify that the data is related. To specify
that a table heading is related to the data in that row, you need to set the value of the scope attribute to row .
The code for this exercise can be found in folder 4.
Here are the steps:
1. Open your menu.html file in your text editor again.
2. Find the first row within the <tbody> element in your pizzas table.
3. Change the first <td> element in this row to be a <th> element instead.
4. Now add a scope attribute to this element and set its value to row . Here's how the code for your updated
row should look:
<tr>
<th scope="row"> Joe's Pepperoni Special </th>
<td>
Select pepperoni with our signature spicy tomato sauce
</td>
<td>13.00</td>
</tr>
5. Now repeat Steps 3 and 4 for each of the rows in all of your menu tables.
6. Save the menu.html file.
The stylesheet I provide does not apply any additional styling to these <th> elements, so you should still see what is
shown in Figure 9-2. However, your table rows are now a lot more accessible to screen readers.
Throughout this section, you implemented a number of techniques to make your Menu page more accessible. This
includes using both <caption> elements and scoped table headers. It can sometimes seem like a lot of extra work
to add these in. But now you can rest easy knowing your websites are accessible to all those who wish to roam them.
Making Images Accessible
Making images accessible is straightforward. You just need to make sure that you include a good description of the
image in the alt attribute of each <img> element. When screen readers encounter an <img> element, they read