E-mail List Archives
Thread: Accessible Matrix Tables
Number of posts in this thread: 2 (In chronological order)
From: Jeffery Brewer
Date: Sat, Dec 05 2020 9:31AM
Subject: Accessible Matrix Tables
No previous message | Next message →
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?
From: glen walker
Date: Sat, Dec 05 2020 10:07AM
Subject: Re: Accessible Matrix Tables
← Previous message | No next message
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 ADDRESS 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?
> > > > >