WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Matrix Tables

for

From: glen walker
Date: Dec 5, 2020 10:07AM

Following two basic principles can make a very accessible comparison
table. First, create a semantic table (use native <table> et al tags) with
appropriate row and column headers and second, provide appropriate alt text
for images.

For table semantics, most people include column headers but often forget
about row headers. Having both makes the table easier to read with screen
readers. In the Keurig example on the Nielson site, the Keurig models
would be the column headers and the features would be the row headers. It
would look something like this:

<table>
<tr>
<th><span class="sr-only">Features</span></th>
<th scope="col">Keurig K55</th>
<th scope="col">Keurig K250</th>
<th scope="col">Keurig K475</th>
</tr>
<tr>
<th scope="row">Review</th>
<td><img alt="4 stars out of 5" src="4stars.jpg"></td>
<td><img alt="4 stars out of 5" src="4stars.jpg"></td>
<td><img alt="4 stars out of 5" src="4stars.jpg"></td>
</tr>
...
<tr>
<th scope="row">Reservoir Capacity</th>
<td>48 oz</td>
<td>40 oz</td>
<td>70 oz</td>
</tr>
...
<tr>
<th scope="row">auto off</th>
<td><img alt="supports" src="check.jpg"></td>
<td><img alt="does not support" src="dash.jpg"></td>
<td><img alt="supports" src="check.jpg"></td>
</tr>
...
</table>

As you navigate across a row with the screen reader, it will read the
column header (coffee model) before it reads the data cell. If you
navigate down a column, it will read the row header (feature) before it
reads the data cell. So if you navigate to the model number you're
interested in, you can then navigate down the column and hear each feature
and whether it's supported or not.



On Sat, Dec 5, 2020 at 9:31 AM Jeffery Brewer < <EMAIL REMOVED> >
wrote:

> Product comparison tables may use visual images (checkmarks or dots, e.g.)
> at the intersection of rows and columns to indicate which products
> (columns) possess which features (rows). A number of examples may be found
> at https://www.nngroup.com/articles/comparison-tables/ . How can we make
> these types of tables accessible?
> > > > >