WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: David Engebretson Jr.
Date: Jul 4, 2022 4:50PM

Thanks for the feedback, Kevin.



Any ideas how an assistive technology user, such as a screen reader user, could immediately jump to a highlighted data cell in a table?



I'm assuming that the question that was originally presented to the list by Geethavani.Shamanna was meant to improve the accessibility and usability of the highlighted data cell in the table.



Placing aria-current=”true” would probably work to make the table accessible (by WCAG standards) but a screen reader user would still have to hunt and peck around the table to find the highlighted data cell. Seems like the usability could really suffer unless there was something specific for any assistive technology user to quickly jump to.



Seems like it could be a usability nightmare if the table is large. I'd rather there be a quick and simple way to jump directly to the relevant information/data cell. That's why I suggested a heading. If a heading wrapping around a data cell fails WCAG, and not all assistive technology users have the functionality of “quick keys” like screen readers offer, then what could work to solve the problem Geethavani.Shamanna poses?





I think the original question from Geethavani.Shamanna is a good one and I'd sure like to know the answer!



Thanks again for your thoughts,

David





From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Kevin Prince
Sent: Monday, July 04, 2022 3:23 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate that a cell is highlighted



Using a heading for this purpose would surely be a breach of 1.3.1 in implying a structure and relationship that does not exist.

Kevin Prince


Kevin Prince


Product Accessibility & Usability Consultant





Foster Moore


A Teranet Company






E <mailto: <EMAIL REMOVED> > <EMAIL REMOVED>


Christchurch


<http://www.fostermoore.com/>; fostermoore.com


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > > On Behalf Of David Engebretson Jr.
Sent: Tuesday, 5 July 2022 8:50 am
To: 'WebAIM Discussion List' < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > >
Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate that a cell is highlighted

CAUTION: This email originated from outside of the organization.


Thanks Birkir,

Curious: do you know of a screen reader that will jump directly to aria-current? I don't, but would sure like to know!

I can get to a heading quickly. That's why I thought a heading would be a good wrapper for finding the highlighted data cell in the table.

Cheers,
David


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > > On Behalf Of Birkir R. Gunnarsson
Sent: Monday, July 04, 2022 1:18 PM
To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > >
Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate that a cell is highlighted

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> <mailto: <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> <mailto: <EMAIL REMOVED> > > On Behalf Of
> glen walker
> Sent: Monday, July 04, 2022 10:26 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <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> <mailto: <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> <mailto: <EMAIL REMOVED> > > On Behalf
>> Of Geethavani.Shamanna
>> Sent: 04 July 2022 17:06
>> To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <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
>> >>
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.