You’re writing a blog and you want to bring more attention to your call to action, so you select the “Heading 3" formatting in your text editor. The text looks slightly bigger, and the font changes slightly. Great, right?
Not quite. Subheadings are semantic: When you use them, you’re providing information about your web page’s structure. Web browsers, search engines, and assistive technologies (AT) use that information — and if you use an HTML heading tag, you want to make sure that you’re using it correctly.
Below, we’ll explain how subheading usage can impact accessibility. We’ll also provide tips for making your website inclusive and visually appealing.
Selecting "heading" does more than change your text formatting
In Wordpress and other popular Content Management Systems (CMS), headings may have a standard style, font, and size that corresponds to the website’s theme. That simplifies web design and saves time; if you’re writing a dozen blogs, you probably don’t want to manually set the font and font size for every single subheading.
But choosing a subheading within your CMS will also apply an HTML attribute ranging from <h1> to <h6>. The HTML attribute is completely separate from the visual styling — it’s purely semantic.
That attribute is included because subheadings have a specific structural purpose: They break up long content into smaller “chunks.” In this article, for example, we’re using subheadings to break up the main points of our argument.
Related: Semantics and Screen Readers: Creating Better Content
Headings can change how people process your content
Why are subheading semantics so important? For starters, most people don’t read every single word of content they find on the internet. Subheadings let your users visually scan your content to get a sense of the main points.
However, some of your users may have low vision. Some may be blind. Some may configure their browsers to ignore your website’s visual styling. For those users, semantic HTML lets them still skip from one subheading to the next — without reading every line of text in between.
When you use heading tags for visual formatting, it can hurt the user experience. That’s particularly true for people who use screen readers (software that outputs text as audio or braille). Poor use of subheadings can create a number of issues:
- Full paragraphs of “normal" text might be announced as a subheading.
- Conversely, subheadings that are not properly identified with HTML (visual-only headings) will be announced like normal text.
- Subheadings might skip around in an illogical way (for example, an H4 attribute appears directly after an H2). Users might assume that they’re missing content.
In short, users may not be able to understand the relationships between different parts of the content.
Related: WordPress Sites Aren't Automatically Accessible
Misusing HTML heading tags can violate WCAG
If you need another reason to use your HTML subheadings carefully, here’s a good one: Poor use of HTML for subheadings might create compliance issues.
The Web Content Accessibility Guidelines (WCAG) is the basis for compliance with dozens of non-discrimination laws, including the Americans with Disabilities Act. While WCAG doesn’t require that authors use the HTML heading attribute, it contains two requirements that apply directly to subheadings:
- WCAG 2.1 SC 2.4.6, “Headings and Labels,” which requires subheadings to provide clear, descriptive information.
- WCAG 2.1 SC 1.3.1, “Info and Relationships,” which requires that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Use HTML for structure, then style your text with CSS
There’s nothing wrong with playing around in your CMS text editor to find ways to make your text more visually appealing. Just recognize that HTML serves a purpose — and most text editors will apply an HTML tag when you select “heading 1,” “subheading 2,” or any similar option.
The solution is to structure your website with HTML, then use CSS (Cascading Style Sheets) to change the visual appearance. You can still make a big call to action with big text and a different font color (provided that has sufficient color contrast, of course).
Like many accessibility improvements, this approach can improve the experience for all users. It also makes your page more crawler-friendly, which is excellent for search engine optimization (SEO).
For additional guidance, read: What Are H Tags? How Headings Affect User Experience. Or if you’re ready to see how your site stacks up against WCAG, get started with a free website analysis.
