Accessibility: Header tags on main page

AI-generated summary

A discussion on improving the accessibility of the Discourse main page by updating header tags. kevinrobinson identified that the discussion forum title is currently an <h2> tag, which should ideally be an <h1> tag. This issue is not visible on meta.discourse.org due to the use of an image in the site header. kevinrobinson suspects the relevant code is in the home-logo.js.es6 file and proposes focusing on core UX pages such as the home page, categories, topics, and posts. notriddle created a pull request (#5493) to address the issue, which kevinrobinson appreciated.

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

H2 discussion forum title should be H1
Low priority but checked tool flagged, we should fix.

This isn’t visible on meta.discourse.org since that uses an image in the site header. Looking at the Discourse example sites on https://www.discourse.org/ I found https://twittercommunity.com/ that does show this. Here’s the check I’m doing and the relevant bit on HTML on the page:

> document.querySelectorAll('h2')[0]
=> <h2 id="site-text-logo" class="text-logo">Twitter Developers</h2>

I think this is the relevant code: discourse/app/assets/javascripts/discourse/widgets/home-logo.js.es6 at e87125b63c7e7b5d763317bfcdfdd214f74c7492 · discourse/discourse · GitHub. Maybe there’s a rationale for this being <h2> and not <h1> but I haven’t seen any on the home pages for the handful of Discourse instances I’ve looked at. There are <h1> tags if you grep around the codebase, but at a quick glance many seem for other pages or unrelated features. For this topic, I think it’s best to focus first only on the core parts of the UX that people use regularly to read and write (eg, home page, category, topic, post, etc. pages) rather than all the additional pages involved in the whole product.

4 Likes
7 Likes

Awesome, thanks for the help @notriddle! :+1: