WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using Aria within a table to indicate that a cell is highlighted

for

From: David Engebretson Jr.
Date: Jul 4, 2022 11:57AM

Good points regarding folks who are color blind and don't use screen readers.

From a screen reader user perspective, I was wondering if adding a heading to the <td> that is highlighted would work. For example, if the <table> is at heading level 2 then the <td> of that <table> that is highlighted could be at heading level 3. Seems like it could be a quick way for screen reader users to quickly jump to the highlighted cell.

For keyboard only users, maybe it could have an empty <a> tag so they could press tab to bring focus to the highlighted <td>? That way, if they are color-blind, and don't use a screen reader, their browser user settings would take effect.

Thoughts?
David


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Monday, July 04, 2022 10:26 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate that a cell is highlighted

aria-label and/or hidden text is great for screen reader users but it won't help the sighted user that has a color deficiency.

There are several things you could potentially do for the highlighted cell:
* use a different font family
* use bold or italic or underline
* have an icon in the corner of the cell to indicated it's highlighted
* have text elsewhere on the screen that says which cells are highlighted

Technique G183 (https://www.w3.org/WAI/WCAG21/Techniques/general/G183)
might also be applicable. It's more about link colors embedded in a paragraph and having the link text color be at least a 3:1 contrast against the paragraph text but it also says there needs to be another visual cue such as underlining when the link receives focus or hover. If you apply that to your case, you might be able to have a highlight color that has a
3:1 contrast against adjacent non-highlighted cells as long as there's an additional visual cue when the cell receives focus or hover. But it starts to get tricky to have adjacent cell background colors (assuming that's how you're highlighting) have a 3:1 ratio *and* have the text color in the cell have a 4.5:1 ratio with the highlight color.


On Mon, Jul 4, 2022 at 10:31 AM Mark Magennis < <EMAIL REMOVED> >
wrote:

> Hi Geethavani,
>
> You can add an aria-label to the <th> but it won't be read by
> JAWS/Chrome or NVDA/Firefox. VoiceOver in MacOS/Safari will read it in
> addition to the cell content.
>
> A better bet might be to add the information as hidden text within the
> cell.
>
> Mark
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Geethavani.Shamanna
> Sent: 04 July 2022 17:06
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] [WebAIM] Using Aria within a table to indicate
> that a cell is highlighted
>
> Hello all,
>
> We have a table where a cell is highlighted in a different colour. In
> order to comply with SC 1.4.1 and provide an alternative way of
> indicating the highlighted status of the cell, is it possible to use
> Aria-label within the cell?
>
> Many thanks.
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >