WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jul 4, 2022 2:18PM


Your best bet (from a screen reader perspective) is to use the
aria-current attribute, simply aria-current="true" (unless th
highloighted cell indicates current date or time in which case you can
use aria-current="date" or aria-current="time").
There are a few other token values of aria-current, see the ARIA 1.1 definition.


On 7/4/22, David Engebretson Jr. < <EMAIL REMOVED> > wrote:
> 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
>> >>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.