Does the table have a programmatically-associated caption or name?

Goal

Ensure that the table has a name, so that it can be identified programmatically.

Why this matters

Some users of assistive technology (AT) can navigate a page by bringing up a list of the tables on it, then choosing to jump to the table they need. If the table doesn’t have a name, then the list of tables is difficult to use.

Naming tables through the use of a visible caption also provide users with Cognitive and Neurological Disabilities a better idea of what the table it attempting to portray, especially if the name is well-chosen.

How to implement

• Preferred method: Ensure a <caption> element is the first child of the <table> element and that it describes the table succinctly. Read more on <caption:> The Table Caption Element on MDN.
  • Ensure the table name is unique among tables on the page. Having two tables named “Results” on the same page will not help users get to the correct results table for their situation.
  • Note: a <th> spanning all of the columns to provide this information isn’t good enough because AT will not recognize its purpose or present it in the list of tables.
• Add an aria-label or a aria-labelledby attribute to the table element.
  • The aria-labelledby attribute works particularly well if a heading already displays just above the table that describes the table’s purpose.

How to test

1. Inspect the table.
2. Ensure that the table fits one of the following two criteria:
   1. The <table> has a <caption> child element.
   2. The <table> has an aria-label or aria-labelledby attribute.
3. Ensure that each table has a unique name compared to other tables on the page.