Headings & Accessibility
Headings & Accessibility
When we talk about headings on a webpage, we’re referring to the <h1> through <h6>HTML tags.
These are a very important navigational element for all users, as well as highly useful landmarks for screen-reader users.
It’s easy to forget, given the commercial and interactive nature of the Internet, but the web and HTML were created to share text documents. For many users, respecting that tradition is very important.
The HTML of a document should reflect its semantics. Lists of things should be placed in lists. Headings should follow a logical order and they should literally be the heading of a section that follows it. Headings should never be used to simply to change the size of text; they should be meaningful semantically.
There are a few simple rules to follow when using headings on your website.
- Headings should be nested hierarchically – that is, h2 should only appear following an h1, and h3 should only appear following an h2, and so forth.
- Following that, every page should have an h1. The h1 must contain text! Empty tags are terrible for accessibility. Your pages will usually inherit an h1 from the title of the page, so you’ll usually want to start with h2 elements in your content.
- Do not use headings based on their appearance. If you have questions about the way a heading looks, please contact web services and we will assist you.
- A heading should describe the section that follows it in clear, concise language.
- Do not create a heading by simply bolding and enlarging some text. If it is a heading, that fact should be reflected in the markup.
Additional information on headings
Guides & Tutorials
Looking for specific information about how to create accessible content? We’ve created a few guides below.
