E-mail List Archives
Thread: Using Aria within a table to indicate that a cell is highlighted
Number of posts in this thread: 26 (In chronological order)
From: Geethavani.Shamanna
Date: Mon, Jul 04 2022 10:05AM
Subject: Using Aria within a table to indicate that a cell is highlighted
No previous message | Next message →
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.
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 10:15AM
Subject: Re: Using Aria within a table to indicate that a cell ishighlighted
← Previous message | Next message →
Are you able to share the table code? I'd be interested in experimenting with it.
Thanks,
David
From: Mark Magennis
Date: Mon, Jul 04 2022 10:31AM
Subject: Re: Using Aria within a table to indicate that a cell ishighlighted
← Previous message | Next message →
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
From: glen walker
Date: Mon, Jul 04 2022 11:25AM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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 ADDRESS 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
>
>
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 11:57AM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Mon, Jul 04 2022 2:18PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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 ADDRESS 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
>
>
>
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 2:50PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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
From: Kevin Prince
Date: Mon, Jul 04 2022 4:22PM
Subject: Re: Using Aria within a table to indicate thata cell is highlighted
← Previous message | Next message →
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
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 4:50PM
Subject: Re: Using Aria within a table to indicate thata cell is highlighted
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Kevin Prince
Sent: Monday, July 04, 2022 3:23 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED =
Christchurch
<http://www.fostermoore.com/>; fostermoore.com
From: Patrick H. Lauke
Date: Mon, Jul 04 2022 6:22PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
On 04/07/2022 23:50, David Engebretson Jr. wrote:
> Placing aria-current=âtrueâ would probably work to make the table accessible (by WCAG standards)
No it wouldn't, as - if I understand the original issue correctly - this
would still fail 1.4.1 Use of Color, because that's a visual SC and
having aria-anything there would not help sighted non-screen-reader
users, which is the point of the SC. At a stretch, it likely would pass
1.1.1 Non-text Content, but that's not enough. For 1.4.1 you really want
some other visible indication that doesn't rely on colour alone (e.g. a
thicker border around the cell or similar).
> 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?
A basic skip link before the table, which would also help
non-screen-reader keyboard users? It can hidden at first but appear on
focus, and allow to jump straight to the cell?
Agree that it would be a bit of a perversion of structural markup if you
added a heading there.
--
Patrick H. Lauke
https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: glen walker
Date: Mon, Jul 04 2022 6:24PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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.
From: Kevin Prince
Date: Mon, Jul 04 2022 7:10PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 7:17PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Mon, Jul 04 2022 7:49PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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 ADDRESS 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
>
>
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 8:01PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Kevin Prince
Sent: Monday, July 04, 2022 6:10 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > = EMAIL ADDRESS REMOVED =
Christchurch
<http://www.fostermoore.com/>; fostermoore.com
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 8:03PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
Thumbs up!
From: Birkir R. Gunnarsson
Date: Mon, Jul 04 2022 8:12PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
Can't wrap a heading around a table cell, it breaks the whole table,
including moving the column and row header accociation to the wrong
cells .. any sematic markup must happen inside the table cell, not to
the cell itself (except descriptive ARIA attribute like aria-current
that do not change the semantics of the table element, ditto
role-description, except it isn't really supported).
On 7/4/22, David Engebretson Jr. < = EMAIL ADDRESS REMOVED = > wrote:
> Thumbs up!
>
>
>
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 10:24PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
Birkir, I can only infer what you wrote below. Is your spell checker not working?
No offense intended, I've rarely seen you mis-spell words like that.
Am I missing something?
David
From: glen walker
Date: Mon, Jul 04 2022 11:03PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
I didn't see/hear any spelling issues. Birkir just said you can't wrap a
heading around a table cell as such:
<h3>my heading
<td>my cell</td>
</h3>
It breaks the semantics of the table. All the markup must be in the cell
itself as such:
<td>my cell
<h3>my heading</h3>
</td>
On Mon, Jul 4, 2022 at 10:24 PM David Engebretson Jr. <
= EMAIL ADDRESS REMOVED = > wrote:
> Birkir, I can only infer what you wrote below. Is your spell checker not
> working?
>
> No offense intended, I've rarely seen you mis-spell words like that.
>
> Am I missing something?
> David
>
>
>
From: David Engebretson Jr.
Date: Mon, Jul 04 2022 11:16PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
Strange if I'm the only one that see's the mis-spelling of association and semantic in Birkir's email. Apologies welcome, if so. I don't know what's going on.
I see:
"including moving the column and row header accociation
and
any sematic markup
"
Again, apologies if I'm the only one experiencing this anomaly,
David
From: David Farough
Date: Tue, Jul 05 2022 6:39AM
Subject: Re: Using Aria within a table to indicate thata cell is highlighted
← Previous message | Next message →
You're not alone.
I did not catch it the first time but did when looking closely.
I wasn't sure what the word should have been however, so thanks for that.
From: Geethavani.Shamanna
Date: Tue, Jul 05 2022 7:50AM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
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
From: Patrick H. Lauke
Date: Tue, Jul 05 2022 8:59AM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
On 05/07/2022 14:50, Geethavani.Shamanna wrote:
> 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.
aria-label on a generic element without a specific role, such as <span
aria-label="..."> ... </span>, is not consistently supported by all
browser/assistive technology combinations. You really only want to use
aria-label on a "labelable" element. See
https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/
--
Patrick H. Lauke
https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: jeffgutsell
Date: Tue, Jul 05 2022 12:25PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
In addition to using the aria on the table cell, how about also using that attribute as a CSS selector to aid low vision users who do not have screen readers?
What I am imagining would look like:
td[aria-current=value] {
outline: medium;
... other properties ...
}
Of course, my placeholder word "value" would actually use something else according to the needs of the project.
I hope my suggestion does not duplicate what someone else already has posted and I missed it.
Jeff Gutsell
From: Birkir R. Gunnarsson
Date: Tue, Jul 05 2022 12:27PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | Next message →
Apologies for my typos, my keyboard has been giving me grief lately.
Yes, using heading markup around cells breaks association and table semantics.
aria-label does not work on a <span> without a role (in ARIA 1.2 it is
suggested to be an ARIA validation error).
You could use something like role="img"> on the span
<td>
<span role="img" aria-label="highlighted: </span>
the cell content
</td>
It's a hack for sure.
But without actually seeing an example of what the table is trying to
communicate it's hard to give more specific recommendations.
On 7/5/22, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 05/07/2022 14:50, Geethavani.Shamanna wrote:
>
>> 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.
>
> aria-label on a generic element without a specific role, such as <span
> aria-label="..."> ... </span>, is not consistently supported by all
> browser/assistive technology combinations. You really only want to use
> aria-label on a "labelable" element. See
> https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/
>
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >
--
Work hard. Have fun. Make history.
From: Andrews, David B (DEED)
Date: Tue, Jul 05 2022 2:39PM
Subject: Re: Using Aria within a table to indicate that a cell is highlighted
← Previous message | No next message
There are actually two, you notice right away with synthesized speech.
Dave