HTML and CSS Reference
In-Depth Information
In addition to making your web forms accessible, you should ensure that your tables are accessible, too. Assistive
technologies such as screen readers should be able to process your tables, but often tabular data does not make much
sense unless you first explain what it shows.
You can enhance accessibility in your tables in a number of ways, as demonstrated in this section.
The caption Element
You can place the
<caption>
element at the beginning of a table to describe what that table displays. Screen read-
ers read this text before the tabular data to give the user an understanding of what the table shows before the screen
reader gets to the data.
Currently, none of the tables used on the Menu page has captions. Let's change that.
The code for this exercise can be found in folder 2.
Follow these steps:
1.
Open the
menu.html
file in your text editor.
2.
Find the
<table>
element with the ID
pizzas
.
3.
Create a new
<caption>
element at the top of this table, as in the following code:
<table id="pizzas">
<caption>
Our fantastic range of pizzas presented here has won us 6
awards over the past 2 years.
</caption>
...
</table>
4.
Find the
<table>
element with the ID
garlic-bread
.
5.
Create a new
<caption>
element at the top of this table:
<table id="garlic-bread">
<caption>
These handmade garlic breads are the best you will find
anywhere in New York.
</caption>
...
</table>
6.
Find the
<table>
element with the ID
sides
.
7.
Create a new
<caption>
element at the top of this table:
<table id="sides">
<caption>
