The Dashboard blocks all use h5 tags for their headings. This results in a page that fails WCAG 2.1 level AA guidelines.

Heading markup allows assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.

Use case: Imagine you are blind. As such, you have no monitor or it is turned off. All you have are speakers and screen reading software installed on your computer. The dashboard is loaded. You it a special keyboard combination to start navigating H1 sections in the page. However the screen reader doesn't find any. So you take a chance on H2s. None are found either. H3s, H4s? Nothing. Personally, by this point, I would start to suspect that there are no headers at all on this page. What do you think the chances are that someone who relies alone on the screen reader to find information will think to themselves "Hey, maybe I should try H5 and H6 too just in case!".

In this particular case, the heading level was obviously chosen for its size instead of its relationship to the content. I am not suggesting that we change the size of the headings. The solution here would be to use a H2 instead of H5 (H1 for the page title) and add class="h5" to keep the text size.

Visually, it will look exactly the same. But to a person who relies on a screen reader, it will make a world of a difference.

Additional information:

• Success Criterion 1.3.1: Info and Relationships
• https://www.w3.org/WAI/WCAG21/Techniques/html/H42.html