1

I am making a table using HTML. It needs to meet WCAG standards, but I am having issues understanding what is an acceptable caption for a table. Can I use <h1> and aria-describedby instead of a <caption> element?

I have followed a W3 Web Accessibility tutorial - all of their examples meet WCAG. Though it seems like my table doesn't meet WCAG H39 Using caption elements to associate data table captions with data tables.

Based on Approach 2 from W3 this is what I currently have:

<h1 id="tableHeading">Table of requests</h1>
<p>Some other text that is relevant to the page</p>

<table aria-describedby="tableHeading">
....
slugolicious
  • 15,824
  • 2
  • 29
  • 43
Ambassador Kosh
  • 459
  • 5
  • 19

2 Answers2

3

You first have to understand that elements can have an "accessible name" and an "accessible description". The "accessible name" is often just referred to as the "name" and is what assistive technologies use to refer to the element. For example, the name is what is announced by a screen reader when you navigate to the element and the name is what a speech interface user would say to select the element ("click <name>").

In your example, which refers to Approach 2 from W3, aria-describedby is setting the "accessible description" of the table. The <caption> is what sets the accessible name. Note that the W3 example sets both and not just aria-describedby.

So, if you only use aria-describedby and not also a <caption>, then you are only setting the description of the table. The table won't have a name for the screen reader to announce but it will still announce the description.

So the answer to your question is, "not exactly". You can use an <h1> and aria-describedby but it does not replace <caption> because the caption is the accessible name of the table. But you can tweak it a bit and use <h1> and aria-labelledby instead of a caption to set the accessible name.

Note that you can have a <caption> that is not visible so that the accessible name is set (and the screen reader announces it) in case you are worried about the aesthetics of the page and don't want a visible caption. Visible captions are a best practice but you can certainly hide it if needed. But don't hide the caption with CSS display:none. Instead, hide it with CSS that essentially sets the size to 1 pixel using something like an "sr-only" class.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
1

I've tested your example in Chrome 94 using JAWS 2020 and NVDA 2021.2 and I can't see any problem with using an <h1> tag with aria-describedby on the <table> element instead of using <caption>. Both screen readers announce the <h1> with aria-describedby in exactly the same manner as the native <caption> element, and treat the <h1> text as the table's caption when the <caption> element is removed.

Many applications use custom table layouts where <caption> is not applicable, so they instead rely on aria-labelledby or aria-describedby to name the table and describe its contents.

In my opinion, the WCAG recommendation is there to ensure that developers use standard HTML5 elements as much as is practical, but your method of using <h1> and aria-describedby achieves the same effect. So, use standard HTML5 elements wherever possible; where it's not possible (i.e. you don't have control over that portion of the code) you can use ARIA to achieve the same effect for screen readers.

George Chapman
  • 462
  • 2
  • 9