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 8:01PM

Kevin, commenting on your email below: If you wrap a heading around the data cell that is highlighted you aren't, necessarily, changing the font size if you know how to change the CSS. With CSS you can make a heading level 3 look like paragraph text (or a heading level 1 if'n you want) without destroying the semantic presentation to the DOM. All the above is said in jest, though. I think the skip link idea is the best – accessible to all.



Regarding shortcuts on webpages: I'm not entirely sure why you'd want to add the development overhead of maintaining a shortcut if you can keep the DOM semantically valid so the user agent and the assistive technology innately knows what to do with the semantics of the HTML.



I think a skip link to the highlighted cell in the table would minimize engineering costs in the short term, and would avoid maintenance costs in the long term. A skip link to the highlighted cell might even help the webpage owners keep the customer support costs down if documentation in the table legend, or a paragraph before the table, were cognitively simple to understand.



I like the digital “food for thought”. Keep it up!

David



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



Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
https://www.w3.org/WAI/WCAG21/Techniques/failures/F43.html
"a failure that occurs when structural markup is used to achieve a presentational effect, but indicates relationships that do not exist in the content. This is disorienting to users who are depending on those relationships to navigate the content or to understand the relationship of one piece of the content to another."

Usually you see it where heading is used to make text 'appear' differently - this is almost exactly that.

I concur that creating a shortcut key for the presentation would do it. If using the hidden text option then a screenreader (or anyone else) can search for that text. Slightly more complex/advanced would be to change the font as well as highlight then a screen reader can look for instances of xyz font.

I prefer the hidden text to be visible and then that serves both the visual and screen reader usage. For example a highlighted cell could include *** , if it's a static output then that would be easy: if the tabkle is a dynamic one e.g. updating periodically then the algorithm that highlights needs to also add in any text and format changes

All the best

Kevin


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 glen walker
Sent: Tuesday, 5 July 2022 12:24 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

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.