Creating accessible assets: Headers and titles
Proper use of headers and titles helps structure your content and improves navigation for all users, including those using assistive technologies. Clear, well-organized headings make it easier to understand the page hierarchy and find relevant information quickly. This article outlines best practices for using headers and titles to enhance both accessibility and user experience.
To make sure your website, landing page, form or message meets the accessibility requirements, use the checklist available here.
Requirements
- Information, structure, and relationships conveyed through presentation should be programmatically determined or available in text.
- Text that functions as a heading visually or structurally must be marked as a true heading (e.g.,
<h1>,<h2>, etc.) in the markup. - Text that does not function as a heading visually or structurally must not be marked as a heading.
- Text that functions as a heading visually or structurally must be marked as a true heading (e.g.,
- Headings must be accurate and informative, clearly labeling the sections of text they describe.
- The page
<title>has to be presented and must contain text. - The page
<title>must be accurate and informative. - The page
<title>of dynamic pages (e.g., in single-page apps) MUST be updated when the purpose of the page changes.
Screen readers enable users to navigate by headings, making them an effective way to bypass blocks of content, as required by WCAG 2.4.1 Bypass Blocks. While WCAG does not strictly require headings to meet 2.4.1, they are highly recommended, along with landmarks and skip links.
Examples
 | DO: Correctly marked headings with accurate and informative labeling |
 | DON’T: A site generated using templates doesn’t include a title for each page on the site. So the title cannot be used to distinguish among the pages. |