WordPress is the most popular content management system (CMS), powering an estimated 43% of all websites on the internet. It’s powerful, flexible, and easy to use — but like all CMS platforms, it’s also prone to accessibility issues.
When you build content on WordPress (or with any other CMS), you need to consider the experiences of all users, including those with disabilities. That’s particularly important when you’re making decisions about your page’s layout.
Appropriate semantic HTML is essential for accessibility, but if you create your website completely within a content editor — such as Wordpress’s Gutenberg, the default built-in editor since WordPress 5.0 — you might make basic mistakes that impact your users. This is especially true if you use headings and subheadings without understanding their purpose.
Here’s a quick introduction to accessible headings, along with tips for laying out your content in WordPress.
Why Headings Matter for Accessibility
Headings and subheadings help to organize your content. The heading is defined with an <h1> HTML tag; it shows what content the user can expect to find on the rest of the page.
In many cases, the H1 tag is similar or identical to the page’s title tag. However, HTML title tags are not visible on the webpage. Learn more about HTML titles.
Subheadings establish the hierarchical structure of the rest of the content. They range from <h2> to <h6>. Typically, the lower the subheading level, the smaller the text. In other words, an <h3> tag will appear visually smaller than an <h2> tag.
As a result, many WordPress users use subheading tags to format the visual appearance of the text. For example, you might want your address to appear smaller on your “Contact Us" page, so you might quickly format that text with an <h4> tag — but that can create issues for some users.
Why? Headings and subheadings are defined with HTML, and they’re semantically important. Their primary purpose is to describe how your content is organized. The visual appearance of your text should be controlled with CSS (Cascading Style Sheets), which is not semantic.
Related: Plain Old Semantic HTML: A Perfect Basis for Accessibility
Assistive technologies require accurate semantic markup to work predictably.
Generally, web users will not read every word on every single page. They scan around to find the content that they need.
This is also true for people who use assistive technologies. Screen readers, which convert text to audio or braille, typically have controls to allow users to skip to important content — and headings are important content.
If HTML subheadings aren’t used for their intended purpose, people won’t understand your page’s organization. They’ll have trouble navigating your website (and they probably won’t come back).
Headings are also important for WCAG conformance.
The Web Content Accessibility Guidelines (WCAG) are the international standards for digital accessibility. WCAG doesn’t explicitly require that websites use headings or subheadings, but if websites do use headings, those headings must describe the “topic or purpose" of the content.
Additionally, WCAG 2.1 Success Criterion 1.3.1, “Info and Relationships,” requires that:
“Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.”
In other words, if you use the visual presentation of your text to provide information, that information must be available to users who cannot perceive content visually.
If text is significantly larger than the rest of the content on the page, it’s probably intended as a heading. You’ll need to make that information available to non-visual users by using appropriate HTML.
Common Subheading Mistakes That Impact Accessibility
If you’re using WordPress 5.0 or later, you’re probably using Gutenberg or another block editor to style your content. Here’s the good news: Gutenberg provides tools to help you style your text visually while maintaining appropriate semantics. You can create a heading block, choose the heading level (H1 through H6), and adjust the size and font of the text as needed.
Just remember, headings and subheadings are semantically important. Keep these tips in mind when structuring your content:
- Avoid “visual-only" headings. If text has the visual appearance of a heading, it should have an appropriate HTML heading tag.
- Use subheadings in sequential order. In other words, an <h3> tag should always follow an <h2> tag, and an <h4> tag should never appear directly below an <h2> tag.
- Don’t try to use every subheading level on every page. Most websites will never need an <h6> tag (unless they have a tremendous amount of content on a single webpage).
- Only use one <h1> tag per page.
- Make sure that each subheading is unique and descriptive.
- If you copy and paste content into WordPress, double-check the subheadings. Make sure that the subheadings are defined with appropriate HTML.
Proper use of headings will make your website more accessible for a wide range of users (and may also help with search engine optimization). For more tips, download our free eBook: Essential Guide to ADA Compliance for Websites.
