Accessibility: Category page should have H4 or LI for category names

Feature
1

This is split out from the master accessibility thread: Accessibility audit and shepherd for making improvements.

These are span tags, they should be LI or H4 tags.

This is the relevant part of the UI on the categories page:

image
image1153×450 85.4 KB

Here’s console code to see the relevant HTML:

> document.querySelectorAll('span.category-name')[0]
=> <span class="category-name">support</span>

These seem like semantically meaningful headers, and visually that’s really clear. Rich’s suggestion is that these should either be headers (perhaps <h4> or to restructure the page to use <li> to indicate that this is a list of categories).

Here’s the relevant code: discourse/app/assets/javascripts/discourse/templates/components/category-title-link.hbs at 5b590b96373a8c2f1f211aef63bc8317f1cb776a · discourse/discourse · GitHub

8 Likes