• Success Criterion 4.1.3
  • Conformance level AA

Table Sort Confirmation That’s Never Announced to Anyone

4.1.3 — Status Messages

Scenario

Setting

A video streaming service's show detail page

What’s wrong

Sort-applied confirmations on tables announced nowhere.

Example 

<table>
  <thead><tr><th onclick="sortEpisodes('rating')">Rating <span class="sort-arrow"></span></th></tr></thead>
  <tbody>...</tbody>
</table>
<!-- clicking the header re-sorts the tbody rows and rotates the sort-arrow icon,
     with no live region announcing that the sort applied -->

Why it matters

A viewer sorting episodes by rating gets no confirmation the table reordered, and may not notice the change without sight.

How to test

Apply a sort to a table with a screen reader running: if the 'sorted by X' confirmation isn't announced anywhere, it fails.

How to fix

Use aria-sort on the header for ongoing state, plus a one-time live region for the moment the sort changes.

<table>
  <thead><tr><th onclick="sortEpisodes('rating')" aria-sort="descending">Rating</th></tr></thead>
  <tbody>...</tbody>
</table>
<div role="status" aria-live="polite" class="visually-hidden" id="sortAnnouncer"></div>
<!-- set sortAnnouncer's text to "Sorted by rating, highest first" inside sortEpisodes() -->

Outcome

A viewer hears "sorted by rating, highest first" and finds the top episode immediately.

Who is affected

Screen reader users sorting an episode list cannot tell the sort order actually changed.

Learn more

Related scenarios