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

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:

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: https://github.com/discourse/discourse/blob/5b590b96373a8c2f1f211aef63bc8317f1cb776a/app/assets/javascripts/discourse/templates/components/category-title-link.hbs#L6

8 Likes