Accessible Headings Are Great for Users (and Great for SEO)

When you read an (for example, this article), do you read every word? 

If you’re like most people, the answer is a resounding “no.” According to research from the Nielsen Norman Group, most internet users prefer to scan content rather than read. Only about 16% of internet users read every word on every new page that they come across.

When content is scannable, it’s more effective for communication. You can break up longform content in various ways — for example, by adding images, hyperlinks, and HTML lists — but subheadings are especially helpful.

Subheadings can also improve accessibility, and they’re useful for search engine optimization (SEO). Below, we’ll explain how appropriate subheadings can enhance experiences for your users while helping you earn higher positions in search engine rankings. 

Why Accessible Headings Are Important for Users

Thoughtful headings and subheadings help people scan your page to find the information they want. To be accessible to all users, headings must:

• Be clear and descriptive. For example, “read more" isn’t descriptive, so it isn’t especially useful for readers.
• Use appropriate semantic markup. That means <h2>,<h3>, and related HTML tags. 
• Use subheading tags in a consistent, predictable order. An <h3> tag should only appear under an <h2> tag, while <h4> tags should appear below <h3> tags, and so on. 

Proper semantic markup is crucial because it allows assistive technologies (AT) to identify subheadings. For example, many people with visual impairments use screen readers to access the internet. A screen reader user might read each subheading before reading any of the other text on a web page; if subheadings don’t have semantic markup, the screen reader may not be able to find them. 

Semantic markup also benefits people who use a keyboard alone (with no mouse) to browse the internet. Properly labeled headings allow these users to jump to specific sections of the page.

Related: Subheadings and Accessibility: What is a "Visual Heading?"

How Accessible Headings Improve SEO

Search engine algorithms are designed to send people to useful, thoughtfully written content. When you build content that works for everyone — including people with disabilities — you’ll create a better experience, which can quickly improve search rankings. 

Headings and subheadings can impact SEO efforts in several ways:

• Improved User Experience Metrics - Google and other search engines prioritize pages with clear, organized heading structures, since those pages tend to provide better experiences for users.
• Keyword Placement - Properly structured headings allow you to strategically place keywords and phrases relevant to your content. Search engines consider these keywords when indexing your page. 
• Voice Search Optimization (VSO) - Voice assistants like Alexa and Siri rely on headings to deliver concise, relevant information to users. Well-written headings can help your content appear in voice search results.

Related: If SEO Matters to Your Business, Accessibility Matters

Avoiding Common Mistakes with HTML Subheadings

The Web Content Accessibility Guidelines (WCAG) addresses subheadings in WCAG 2.1 Success Criterion (SC) 2.4.6, “Headings and Labels.” That criterion requires that headings and labels describe the topic or purpose of the content. 

However, WCAG doesn’t explicitly require the use of subheadings. It’s certainly possible to build a working, accessible web page without using subheadings — but if you’re writing a considerable amount of text, you should probably use subheadings to make your content more readable. 

To provide the best experience for readers, follow these tips: 

• Write subheadings for users, not for search engines. Avoid stuffing keywords into your subheadings; use natural language to describe what each section is about. 
• Try to use subheadings in their hierarchical order. Don’t use HTML subheadings for their visual appearance in your content management system; use them to define structure, then use CSS (Cascading Style Sheets) to adjust the appearance. 
• Use one <h1> tag on each page. In many cases, the <h1> tag will be identical to the page’s title tag. 
• Use the other subheading tags (<h2> through <h6>) in their hierarchical order. 
• Make sure your headings meet WCAG’s requirements for color contrast.
  
  

For additional guidance, download our free Easy Guide to Accessible Headings.

And to learn about the other advantages of an accessible mindset, send us a message — or get started with a free automated web accessibility analysis.