Does the level one heading tag on a page need to be visible to the eye and to screen readers?
Question
<h1> heading and an <h1> tag that a screen reader can recognize?
Answer
On a webpage, headings provide an information hierarchy for users without visual impairments and for users of assistive technology, and there should be a single level one heading that describes the overall purpose of the page. The level one heading tag (<h1>) can be used as a method to allow assistive technology users to navigate to the top of a page, so it is not required to be a visible line of text on the screen. Whether the level one heading is visible or not, it should be coded so that screen readers will announce it.
Should an <h1> tag be used in this manner, it should be written in HTML before the main content of the page. Screen reader users can utilize the level one heading as a means to skip to the page header (similar to how a skip to content link navigates to the main content of the page). The <h1> tag should not be hidden from the accessibility tree, as it provides guidance and assistance to those who use screen readers and other assistive technology to understand the contents of the page.
Example snippet
<h1 class="sr-only entry-title">Home</h1>
To learn more about building content that's easy to navigate for users on assistive technology, visit the Landmarks, Links, and Headings course from Accessible Web Academy.
