WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Geethavani.Shamanna
Date: Jul 5, 2022 7:50AM

Thanks everyone for responding with some creative suggestions.

The scenario was this: Cells with certain values were highlighted in a different colour in a table. We wanted to ensure that when screen reader users navigate to these cells, they are made aware that the cell in question is highlighted.

Using aria-label to indicate that this cell is highlighted appears to be a good option. Aria-label works as long as it is included within a span element within the <td> tag.

Thanks also to those who pointed out that more than one method should be used to convey the information, such as ensuring that those cells also have thicker borders.

Geetha
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: 05 July 2022 02:49
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate that a cell is highlighted

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

You could use heading markup inside the table cell (it may be misuse of headings in theory but at least it would not break the table.
So you can do:
<td aria-current="true"><h4>value of highlighted cell</h4></td>

There should be a "large text" or "emphasized" text markup that screen readers can pick up and support (incluidng navigation). While HTML is packed full of semantic text elements (<em> <strong> etc. etc.) there is virtually no screen reader support for them.
There is slight hope that ARIA 1.2 text semantic roles may get better support, but I doubt it (after all there's still virtually 0 support for the values of aria-haspopup even if it's been out there since 2018).
Again, technically you should be able to use aria-roledescription here <td aria-roledescription="highlighted cell">value of higlight cell</td> but it would likely not work.

Another hacky idea .. if the table is all static elements (no links or buttons etc.) you could put tabindex="0" on the highlighted table cell, so pressing the tab key with focus on the previous focusable element before the table would take you to the highlighted cell.
But these are all hacks.
Implementing a skip link, button, or keyboard shortcut is probably the best way to go.
Tht shortcut must be documented.

On 7/4/22, David Engebretson Jr. < <EMAIL REMOVED> > wrote:
> I agree that documentation is going to be really important. Would that
> documentation be best in the table legend or in a paragraph before the
> table?
>
> I think defining a shortcut key, like Glen suggests, could add
> development overhead that could be avoided as user agents and
> assistive technologies develop over the years ahead. Too many
> possibilities for key conflicts in the future.
>
> I, personally, like the idea of making a really descriptive skip link
> to the data cell that is visually highlighted. I still haven't seen
> any code from Geethavani.Shamanna so I don't have any context to the
> problem. I'm just assuming that there is one highlighted data cell the
> user should obtain focus to. All assumptions I've made from their original email.
>
> Speaking of focus: could the user find focus in that cell with a
> tabindex set on that data cell? Then an aria-label for screen readers
> and plenty of other visual goodies for visually oriented folks using
> assistive technologies other than screen readers and/or keyboard only users of course.
> I guess that, since you'll need to have an ID for the skip link, you
> won't need to modify the tab order with tabindex. Probably better that
> way... but, if all of the data cells are hyperlinks innately then
> maybe tabindex is the way to go. Hmmm.
>
> Interesting problem. I look forward to hearing more (and seeing some
> example
> code) from Geethavani.Shamanna!
> David
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> glen walker
> Sent: Monday, July 04, 2022 5:24 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] [EXTERNAL] Using Aria within a table to indicate
> that a cell is highlighted
>
> If you want to provide a way to jump to highlighted cells (assuming
> you can have more than one highlighted - or maybe this is a
> conditional highlighting example where cells of a certain value have a
> different visual appearance than other cells), then you're probably
> better off programming the shortcut key yourself so that it's available to all users.
>
> Using headings or aria-current is sort of a hack. Yes, headings allow
> screen reader users to jump to a place on the page but you're only
> using a heading to get that feature from the screen reader and the
> cell isn't really a "heading" for anything, thus why Kevin said it
> might break 1.3.1, although in kind of the reverse way. Usually 1.3.1
> is for having a visual relationship on the page but there isn't a
> programmatic relationship. The highlighted cell heading is the
> opposite - you are creating a programmatic relationship when there
> isn't really a visual relationship. Yes, there's a visual difference
> for the highlighted cells but that doesn't make the cell a heading.
>
> We did something like this for navigating to landmarks. Screen reader
> users can easily navigate to landmarks but sighted keyboard users cannot.
> It's not built-in to the browser. So we programmed Ctrl+F6 to allow
> navigating to landmarks. All users could access it. (F6 is a common
> key for navigating to different parts of an application so we used
> Ctrl+F6 in a similar vein.)
>
> F2 is a common key for spreadsheets to edit the cell value. You could
> conceptually create a Ctrl+F2 to navigate to the next highlighted cell.
> The two behaviors (F2 and Ctrl+F2) aren't really related so that might
> be a poor key choice, but it's just an example.
>
> You'd have to be clear in your documentation that that shortcut key exists.
> > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C5f
> e77d38c9fa4b0576f608da5e2891ed%7C0e2ed45596af4100bed3a8e5fd981685%7C0%
> 7C0%7C637925825583605144%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL
> CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdat
> a=uoDTRUT%2B0hz309yusO5ezgTYnsCmRQqM0SbQW5lJyaM%3D&amp;reserved=0 List
> archives at
> https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%4
> 0open.ac.uk%7C5fe77d38c9fa4b0576f608da5e2891ed%7C0e2ed45596af4100bed3a
> 8e5fd981685%7C0%7C0%7C637925825583605144%7CUnknown%7CTWFpbGZsb3d8eyJWI
> joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
> C%7C%7C&amp;sdata=Coke0vpCRtQiBLJotP2WYwXKskjGxxW39bS9DHMECrs%3D&amp;r
> eserved=0 >
> > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C5f
> e77d38c9fa4b0576f608da5e2891ed%7C0e2ed45596af4100bed3a8e5fd981685%7C0%
> 7C0%7C637925825583605144%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL
> CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdat
> a=uoDTRUT%2B0hz309yusO5ezgTYnsCmRQqM0SbQW5lJyaM%3D&amp;reserved=0
> List archives at
> https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%4
> 0open.ac.uk%7C5fe77d38c9fa4b0576f608da5e2891ed%7C0e2ed45596af4100bed3a
> 8e5fd981685%7C0%7C0%7C637925825583605144%7CUnknown%7CTWFpbGZsb3d8eyJWI
> joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
> C%7C%7C&amp;sdata=Coke0vpCRtQiBLJotP2WYwXKskjGxxW39bS9DHMECrs%3D&amp;r
> eserved=0 >


--
Work hard. Have fun. Make history.