WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: Jul 4, 2022 11:25AM

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
>
>