4.1 Visually hidden table column announced by screen readers (Medium)

4.1.1 WCAG 1.3.1 (A) - Desktop

On a prisoner’s learning and work progress page, a table is used to display their Functional skills. Visually, this table comprises of four columns that indicate a prisoner’s skills, as well as the type and level they have achieved. However, when a screen reader user navigates this table, it announces a visually hidden column as “Column 5 source.” This is likely to be confusing for several user groups, in particular low-vision screen reader users, who will be able to partially see the screen and not understand why the screen reader is reading out elements that aren’t visible.

FIGURE 4.1: Column headers highlighted with NVDA speech viewer activated

4.1.2 Code snippet

<th scope="col" class="govuk-table__header">
<span class="govuk-visually-hidden">
Source</span>
</th>

4.1.3 Recommendation

We recommend removing this visually hidden table column to ensure what is visually presented matches what is announced by screen readers.

---