2.2 Text coded as a table (Medium)

2.2.1 WCAG 1.3.1 (A), 2.4.3 (A) - Desktop, iPad

On the qualifications page there is information regarding a prisoner’s functional skills. To sighted users, it’s clear that this is just plain text. However, when screen reader users navigate to the text it is announced as a table. This creates a disparity from what is visually presented and what is programmatically announced to screen reader users meaning they may expect to interact with this element in the same way they would a table when this is not the case.

Furthermore, as it’s coded as a table the second paragraph can not be accessed with standard swipe gestures meaning this information may be missed by screen VoiceOver users on iPad.

FIGURE 2.2: Text on qualifications page highlighted with NVDA speech viewer activated

2.2.2 Code snippet

<table class="govuk-table govuk-!-margin-bottom-0">
    <caption>Functional skills assessment levels</caption>
    <caption>Functional skills assessment levels inform 
in-prison work and education allocations.</caption>
  </table>

2.2.3 Recommendation

Ensure that what is presented visually matches what is announced by screen reader users. We recommend refactoring these elements to be within <p> elements as opposed to within a <table>. Furthermore, avoid using tables for stylistic purposes and, instead, employ the appropriate attributes for each element while adhering to responsive design principles.

---