1.3.1.A Elements not marked up (Table, List, Headings) (high)
As a screen reader user,
I want that the appropriate semantic mark-up is used in the source code to describe the role and relationship between different elements on pages, such as headings, paragraphs, lists, forms and tables,
So that assistive technologies such as screen readers correctly interpret and convey the page structure.
-
5. complex data table not marked up -
6. list not marked up -
8. headings not marked up -
9. table heading has incorrect scope -
10. table headings not marked up
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
5 |
.Stat Data Explorer (BETA) • Census 2016, G43 Labour force status by age by sex (SA2+) ![]() |
Visually, it is clear that the content is a data table and it is clear which data belongs to which header cells; however, this is not consistently announced by screen readers as only the top row "Males" and "Females" are announced. |
<table><tr><th scope="row">Sex and age</th><th scope="col">Male 15-19</th><th scope="col">Male 20-24</th></tr><tr><th>Labour Force Status: Employed, worked full-time</th><td>71,863</td><td>292,627</td>… link to the complex table markup and good example where they’ve separated sections in the table with a horizontal row |
|
6 |
.Stat Data Explorer (BETA) • Census 2016, G43 Labour force status by age by sex (SA2+) ![]() |
Visually, it is clear that the menu buttons fall into two groups; however, this is not communicated via markup | <div><button class="MuiButtonBase-root MuiButton-root jss175 MuiButton-text jss178 MuiButton-textPrimary" tabindex="0" type="button" aria-pressed="true"><span class="MuiButton-label jss177"><span class="MuiButton-startIcon jss176 MuiButton-iconSizeMedium"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v3H5V5h15zm-5 14h-5v-9h5v9zM5 10h3v9H5v-9zm12 9v-9h3v9h-3z"></path></svg></span>Table</span></button><button class="MuiButtonBase-root MuiButton-root jss175 MuiButton-text MuiButton-textPrimary" tabindex="0" type="button" aria-pressed="false" aria-haspopup="true"><span class="MuiButton-label jss177"><span class="MuiButton-startIcon jss176 MuiButton-iconSizeMedium"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"></path></svg></span>Chart</span></button></div> |
Screen reader users are not informed about the number of items in the list and cannot easily skip between list items or to the end of the list. Implement the items as a list of 2 items and a list of 5 items. This can be done via HTML markup (<ul> and <li> elements), or via ARIA markup. As an additional recommendation, as this is a complex custom control, add a hidden heading "Select view" immediately before the list to explain the functionality. ![]() |
8 |
.Stat Data Explorer (BETA) ![]() |
Visually, it is clear that the filters are a series of distinct items; however, this is not communicated via markup. Screen reader users are not informed about the number of items in the section and cannot easily skip between sections or determine which section they are currently navigating. |
![]() ![]() |
Implement each item as a heading, for example: ![]() ![]() ![]() ![]() |
'' | ![]() |
Visually, it is clear that the page is divided into 2 main sections: filter and results. | To communicate this via markup, implement "filter" and "Results" as level 2 headings. | |
'' | .Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 | On this page, implement "Filters" as a level 2 heading and provide a level 2 heading above the main content area for example with the text "Result" | ||
'' |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 ![]() |
|
||
9 |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 ![]() |
The heading structure used in the following table does not correctly represent the layout. The heading "Time period" is a heading referring to the information in the horizontal row. Complex tables are difficult to interpret for all users, and especially for people with vision or cognitive impairments. If not marked up correctly, complex data tables are very difficult for screen reader users to navigate and interpret correctly. | ![]() |
Ensure the "Time Period" heading scope is changed to "row" ![]() |
10 |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 ![]() |
The headings displayed in the Customisation preview window of a detail page have not been marked up as table headings. Visually the association of the elements is clear, however this information is not available to screen reader users. Additionally, although the table information itself is not relevant, heading content should be unique to allow screen readers to understand the differentiation of column and row headings. So screen reader users may not understand the association of data within the preview table, and may not understand if the currently previewed table layout meets their needs. | ![]() |
Mark up the table headings with <th> tags and ensure the scope property reflects which information it is a heading for. Additionally, use unique sample information to enable screen reader users to understand the different associations between headings. ![]() |
Edited by SSandrine