WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is same table row sufficient context for a link to meet SC 2.4.4?

for

From: Bim Egan
Date: Jan 19, 2018 6:56AM

Hi Mark,

Just to add to Birkir's solid advice: You already use a different text
value for each type of media link, which is great, so if there's been a
previous explanation of what media types are available, the relationship
will be obvious to a great many users. To help anyone who may not
understand, a key to the relationships could appear in text above the table,
or be visually-hidden .

<div id="key" class="visually-hidden">
<H2>Key to link types: </h2>
<ul>
<li>Watch = video; </li>
<li>Read = eBook; </li>
<li>Listen = AudioBook; </li>
<li>Explore = online-learning. </li>
</ul>
</div>

Followed by the table, where the first row and first column cells are all
<th>. In both NVDA and JAWS, if the user tabs into the first interaction
type link, the screenreader announces the media title and whatever you've
used as the <th> cell content above the links.

Note: I've given the <div> an id of "key" because something else you might
consider is using it to associate the contents of the div with the first
cell in the table.
<th aria-describedby="key" scope="col">Title </th>

When a screenreader reaches the first cell, JAWS (but not NVDA) will let the
user know that there's associated text and announce the shortcut to access
the information in the div.

HTH,

Bim