Semantic Markup and Sequences
When users of screen readers navigate pages, some may rely on the structure of the document to move around. This may mean taking an “outline”, made up of the nested headings, or using landmarks, such as
main to jump around the web page.
Luckily, these often don’t need defining explicitly, as many native HTML5 elements have an implied role. In some places, these could be easily swapped into the layout. For example,
<div class="section"> could be easily substituted for
<section>. to be made by using HTML5 elements in place of some classes.
This would improve compliance with the following success criteria:
Since users may replace some of the styles offered by the page, or may move through the page using the keyboard or a screen reader, it’s iportant that the page makes sense if some style information is missing.
Ensuring that the items appear in the DOM in a logical order will help accomplish this, as defined in:
- 1.3.2 Meaningful Sequence (level A):
Examples and solutions
This list is likely not exhaustive:
(Fixed in A+ v1.8) Course archive
The course archive uses
h3 tags to represent courses. These are wrapped in
First, there is no
h2, so they’re nested directly under the page’s
Also, they don’t behave like headings, it doesn’t make sense to encourage users to jump to them within the page as they would subheadings in a document, since there is no further content to explore, only the link to follow.
The formatting could be maintained without using a heading tag, and since the courses are sorted chronologically, subheadings could be used to, for example, group the courses by year.
There is a GitHub issue (596)
(Fixed in A+ v1.8) Profile
The sequence of elements in the profile page does not match reading order. Looking at the page visually, the user might follow from the avatar, to the blue “info” block on the right which explains how to change it.
Following the DOM order, as a screen reader would, the user first passes the avatar, before continuing through the next fields, and then returns to the block explaining how to change their avatar.
There is a GitHub issue (590)