Join us for Building ADA-Compliant WordPress Sites, our new workshop on web accessibility. It’s live on Nov. 15, and the recording and transcript will be available shortly thereafter if you can’t make it live. Register for the workshop.
In this week’s Quick Lesson, we’re reviewing why utilizing appropriate headings on your website pages is important for accessibility. Implementing headings in your HTML is simple, but figuring out which ones to use and where isn’t always so straight-forward. Don’t forget to sign up for our Web Accessibility 101 workshop next month to discuss this topic and learn more, but in the meantime, here are some tips to help you get started!
What are Headings?
Remember writing tons of book reports and research papers in school? You’d usually have to hand in an outline of your paper with your topics broken up into sections. Each topic was titled by – you guessed it – a heading. This outline made it easy for the reader to scan the topics and understand exactly what information was going to be presented throughout the paper.
Your website pages are structured similarly to those research paper outlines, in that they generally cover one specific topic and then supply sections of supporting information about it. For example, if you were writing this page about HTML on Wikipedia, you might make a list of the topics you want to cover, and then those topics would convert to your headings. Your outline might look something like this:
- HTML versions timeline
- HTML 2
- HTML 3
- HTML 4
- HTML 5
- Element examples
- Element examples
- Document type declaration
- Semantic HTML
Why are they important?
Headings are a big part of overall semantic HTML usage. They allow your users to quickly scan your page to find the content and information that is most important to them. Using headings improperly can cause confusion and frustration.
A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.webaim.org
Who benefits from them?
Sighted visitors benefit from correct use of appropriately styled headings, since they will visually emphasize the hierarchy of the content on the page. Normally heading font sizes will decrease as the headings descend, so the largest headings are often the most important sections of information on the page. That being said, if you take away only one thing from this quick lesson, let it be this:
Heading tags should NOT be used exclusively for formatting.
Visitors who rely on screen readers (and similar technology) benefit from proper use of heading tags because the screen reader can easily skip from heading to heading. This allows quick scanning of the page to find the content that they need, and equalizes the experience for all visitors.
How do I implement them on my website?
HTML is for structure: Each heading should also concisely summarize their topic, should label the content that follows it, should go in order of importance, and levels should not be skipped / placed out of order within their section.
The A11y Project offers us a great summary of best practices when it comes to semantic headings:
- A page will generally have one unique
<h1>heading, usually the page title / main topic.
- Each heading should describe the content following it. It bears repeating: do not use heading tags just to format the text.
- Your heading levels should be used hierarchically, like a book index.
- Don’t use headings for formatting, use them for context.
- Don’t skip headings or place them out of order within a section. You can skip back when moving to a new section. For example, you might end one section with a heading 4, then go back to heading 2 to start a new section. But don’t put a heading 6 on top of a heading 2 in the same section.
CSS is for formatting: If you have a heading that is
<h2>, but you want it to look like an
<h1>, make a class that matches the
<h1> and add it to the
<h2> tag. This is another reason we love using Bootstrap: it includes these heading classes that automatically match each heading level.
All HTML headings,Bootstrap documentation: Typography – Headings
<h6>, are available.
.h6classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
We use the WAVE evaluation tool from WebAIM as a part of our audit process. You can install a browser extension to do on-page audits, or run a URL through their tool on the WAVE site. Either way, you’ll get feedback about the headings on your page.
A quick Google search for “heading structure checker” results in tons of SEO optimization tools that can also help you with heading structure choices.
How can I learn more about this?
Sign up to join our accessibility 101 workshop coming up in November to learn more about this and many other tips and tricks for building ADA and WCAG compliant WordPress websites.
Using appropriate HTML markup is one of the best ways to make your website accessible. However, it’s not always clear what headings to use, and I don’t think it’s a perfect science. Doing your best to make sure your page is structured in a way that helps everyone navigate the content easily is a big step toward web accessibility.
Here are some resources that can help you troubleshoot or set up your headings correctly:
- 5 heading accessibility issues and how to fix them – by Whitney Lewis on PopeTech
- Semantic Structure: Headings – WebAIM.org
- Headings (Page Structure Tutorial) – W3C Web Accessibility Initiative
- Accessible Heading Structure – The A11y Project
- How to use headings on your site – Yoast SEO