In this section, I'll examine the overall structure of the page before delving into a component-based review.
The page is arranged into the following landmarks:
<nav><main> element contains the form<footer>These are excellent, with only two minor enhancements to suggest:
<nav> into a <header> element. Doing so would allow direct jumps to the main section, bypassing all preceding repeated content, which enhances landmark-based navigation.<footer>Implementing these changes would yield a clean and neat structure, where each element is housed within top-level landmarks. The video below illustrates how a screen reader user can now swiftly navigate between these elements.
Navigating between landmarks using a screen reader
Navigating between landmarks using a screen reader
On mobile, where the form is linearized and displayed on a single page, an effective enhancement would be to encapsulate each step within their own <section> element. This can be achieved programmatically by connecting their headings with the aria-labelledby attribute and their descriptions with the aria-describedby attribute.
Implementing these changes would lead to the steps appearing amongst the landmarks, with their labels and descriptions being announced upon selection. This promotes a more equivalent experience for screen reader users. Just as sighted users visually scan the page for sectioning cues to construct a mental model, non-sighted users can now do the same via landmarks.
Alongside landmarks, headings also serve a similar purpose — they're used to "scan" the page and aid navigation. So let's proceed with them.
From an accessibility perspective, maintaining a clean heading hierarchy is an excellent practice. As previously mentioned, individuals use these elements to comprehend the page structure and navigate quickly between sections. Examining the heading map of the page reveals the following structure: