ARIA labels for tables

Follow

Lori Arthur-Carmichael

• December 05, 2018 00:28

Our campus web team has told me our accessibility checker is marking any ScreenSteps articles with tables with an error because the tables do not have an ARIA label. From my best understanding, an ARIA label is like an invisible title for the table that is used by screen readers. A sighted person can visually see a table and understand it from context, but a person with a visual impairment needs the ARIA label to give them that context (e.g., Supported Operating Systems By Device Type).

I'm attaching a small screenshot my web team sent me to show where the label would appear (essentially right after the table tag opens), but there is more info on the ARIA label at the W3 page on ARIA.

It would be really helpful if we could add an ARIA label like we do alt text tags in the editor. In the editor, it kind of looks the same way the images do when they don't have an alt tag (see attached image below): there is a blank space next to the table icon. If the ARIA label appeared there when we added it (the way it does with the alt tags for images), it would be really easy to make sure we've added them before publishing an article.

If I can provide more info or test anything out, please let me know. Thanks!

3

• 

  Tiffany Stull

  • December 07, 2018 18:27
  • Edited

  Why would you need an aria-label for a basic table, and is aria-label even the attribute you want?  It looks like what you want is aria-describedby: https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-aria-describedby-to-provide-a-table-summary

  My guess is that the desired feature (and it might even be considered a bug that ScreenSteps doesn't allow it to be included in its tables) is the ability to add a table caption: https://www.w3.org/WAI/tutorials/tables/caption-summary/#identifying-a-table-using-a-caption

  The key features of a basic table are proper headers with appropriate scope attributes; examples:

  https://www.w3.org/TR/WCAG20-TECHS/H63.html

  https://webaim.org/techniques/tables/data

  If ScreenSteps tables don't have proper scope attributes (and in fact it looks like they do not!), it's a bug which needs to be addressed as soon as possible.

  0

  Comment actions Permalink
• 

  Lori Arthur-Carmichael

  • December 14, 2018 21:22

  Tiffany -- that's exactly it. If I could add a visible table caption, that would eliminate the need for any aria attributes.

  1

  Comment actions Permalink
• 

  Tiffany Stull

  • December 14, 2018 23:51

  Hi Lori, it might be helpful to update the feature request to clarify that you'd like the text in the requested feature to be rendered as a <caption> element.

  0

  Comment actions Permalink
• 

  Tiffany Stull

  • January 09, 2019 15:38

  Adding a vote at the top, even though I think the implementation would be better as a <caption> element, because the vote doesn't show up if added on a comment.

  0

  Comment actions Permalink

Please sign in to leave a comment.