Ensure headers are tagged with <h#>
Part of #1106 (closed) (read this issue for access to the full audit and recommendations).
Any content headers currently marked with the class "header" or which use bold text instead of <h#> tags should be changed to be headers to make it easier for screen readers to differentiate between them.
Examples of this are radio titles (uses <div class="header">
) and labels on albums, artists, username (uses <strong>
)
Audit section (Section 1.3.1):
On some pages, some headers cannot programmatically be determined as being such. They often have a class=’header’, but this is not the same as coding them as header elements, for instance as
<h2>
. As a consequence users of assistive technologies may experience trouble understanding the structure of the page. See the title ‘Random’ and the titles of the radios, such as ‘Sens Radio’ on page https://open.audio/library/radios.On some pages the
<strong>
element has been used for titles. The<strong>
element is meant to emphasize one or a few words, not for layout purposes. See the titles of the albums, artists, username, etc. See also the labels on some pages behind the login, such as ‘Podcasts’ in the lightbox that opens when clicking on ‘Add new’ on https://open.audio/@accessibilitytest/. These are just a few examples.On the page https://open.audio/ it would be better for the HTML structure if the header ‘About this Funkwhale pod’ would be an
<h2>
. Now it’s an<h3>
, just like its subheaders ‘Statistics’ and ‘Contact’.