Accessible heading structures for home pages

Home pages usually are different than the typical content page. Their language uses more marketing copy to showcase a product’s or service’s benefits.

This isn’t a bad thing. The friendlier tone connects readers with the organization – that’s the whole point.

Let’s look at this homepage. Here are some of the main headings:

You’ll notice the headings highlight benefits while trying to talk to (or connect with) the reader. For example, instead of “Business solutions” the home page uses “Find the right solution for your company – any size, any industry.”

Again, using this type of copy doesn’t make your content inaccessible or wrong.

The accessibility concerns come into play when this copy causes issues with the heading structure.

In this article, you’ll learn how to create home page heading structures that balance marketing copy/headlines with an accessible heading structure.

• Why heading structures matter for accessibility
• 3 common issues with headings on home pages
• Tips for keeping home page headings accessible

---

---

Why heading structures matter for accessibility

An accessible heading structure organizes the page’s content. This means a heading should concisely describe the content that’s below it – they shouldn’t be used as paragraph content.

When used correctly, visual and non-visual users use the headings to scan pages and find the content they need.

They’re especially important for screen reader users, who are often non-visual users, because they rely on headings to navigate a page.

Let’s go back to the home page from before. In this screenshot, there’s a heading list for the home page that someone using Mac’s VoiceOver screen reader would use. The screen reader would announce each heading to the user, so they know what content is where.

Back to top

3 common issues with headings on home pages

When crafting text for home pages, 3 common issues can cause the heading structure to be inaccessible. We’ll review ways to fix these issues in the Tips section below.

Long headings

To create a friendly tone, some marketing headlines become full sentences that then become headings. Several of these longer headings can clutter a screen reader’s output. It becomes a lot to listen to and process.

Long headings example

Here are three long headings from a real home page (names are changed):

• Save time and get real results on social media. Socialstatus makes it easy
• Next-level social listening: now in the Socialstatus dashboard
• See how we increased web traffic from LinkedIn by 136% using employee advocacy

These headings are 9-13 words long, take 3-5 lines, and the page still has other headings. Not only is this hard for visual users to scan, but it’s a lot of text for screen reader users to listen to especially because these are all on the same page.

Headings that should be content

Full-sentence headlines that become headings sometimes shouldn’t be headings – they should be paragraph content. They were just given heading HTML to visually emphasize the text.

This is difficult for a screen reader user because they heading is long, so it can clutter their output. Plus, since it’s content, it doesn’t describe the text below it meaning it doesn’t add anything to the heading structure. Now, the screen reader user can’t rely on the heading to help them navigate the page and find the content they need.

Headings that should be content example

On this website (names are changed), there is a heading 1 that reads, “Wedding planning starts here”.

Below that is a heading 2 that reads: “From venues and save the dates to a free wedding website, a registry and even your cake – Ever After is here for all the days along the way.”

A heading should concisely describe what’s below it. The heading 2 here isn’t a heading – it’s paragraph content. It was styled using an H2 HTML tag to make it larger, so it was visually emphasized.

Keeping this as a heading really clutters a screen reader user’s output because it is long content that’s announced as a heading. Also, since it’s content, it isn’t clear what text would be beneath it making it difficult to rely on headings to navigate a page.

What’s visually emphasized should be semantically emphasized

The last common issue is what’s visually emphasized isn’t semantically emphasized. This means that if something is important enough to visually emphasize as large text (or any other visual emphasis), it should be semantically emphasized in the HTML (usually by being a header) so screen reader users don’t miss it.

This doesn’t mean all the headline copy that is large and bolded should be a heading.

Visually and semantically emphasizing content example 1

Let’s go back to the example above to demonstrate this idea. The wedding website made this text a heading 2 because they wanted to visually emphasize it: “From venues and save the dates to a free wedding website, a registry and even your cake – Ever After is here for all the days along the way.” They want to visually emphasize how they help plan a wedding.

It’d be easy to think that since it’s visually emphasized, we should keep this text an H2, so it’s also semantically emphasized. But, like we said above, this clutters the output and can cause confusion. So, what’s a good solution? Well, there’s a couple of things you could do:

1. Leave “Wedding planning starts here” as the H1 and turn the H2 into paragraph text. The “Wedding planning starts here” H1 actually already semantically emphasizes the text beneath it. It already describes that Ever After does wedding planning. If a screen reader user wants to learn more about what they do, they can continue to listen to the content below.
2. If describing everything Ever After does is important, then include those as headings with text below them, which this website actually does later on the page. They have a heading 2 that reads, “Everything you need to plan the wedding you want”. Then, there are heading 3s that emphasize all the services they offer.
   

Either of these removes the long H2 headline while still making sure the visual emphasis on what this organization does – helps with all things weddings – is also semantically emphasized.

Visually and semantically emphasizing content example 2

Let’s review an example where the visual emphasis doesn’t match the semantic emphasis.

On this website, there’s a heading 2 that reads, “Find the perfect tools for your business”. Below are five tabs. Each tab has an icon and a business type the user could pick from to see what tools would help in their specific niche.

These five business types are visually emphasized with icons. They also literally organize the content below them by business type, so they act as headings for that content. But, they aren’t headings in the HTML.

This means a visual user goes from the H2 “Find the perfect tools for your business” to the five business types. But, a screen reader user would go from “Find the perfect tools for your business” to the next heading on the page – they’d miss that content.

A simple fix is to make the five business types headings. Their visual styling doesn’t have to change, but making them a heading 3 would nest them under the H2 “Find the perfect tools for your business” so a screen reader user can access them easily too.

Back to top

Tips for keeping home page headings accessible

We know the common issues that can make a heading structure inaccessible on home pages:

• Headings are long
• Headings are content that doesn’t describe what’s below
• What’s visually emphasized isn’t semantically emphasized

Here are tips to help you balance a beautiful design with marketing copy and an accessible heading structure.

Rewrite the heading

A good way to fix long headings is to simply rewrite them. This doesn’t mean remove the friendly tone – it just means making it more concise.

Let’s do this with the long headings from above.

First, we had: “Save time and get real results on social media. Socialstatus makes it easy.”

Instead, this could be: “Save time and get real results with Socialstatus.”

If it was necessary to explain that Socialstatus is a social media manager, there could be a sentence below explaining what social media platforms it helps with.

Next, we had: “Next-level social listening: now in the Socialstatus dashboard.”

This could be: “Next-level social listening.”

The fact that it’s a heading on the home page already implies it’s a feature that’s available, so saying that it’s now in the dashboard isn’t necessary.

Lastly, we have: “See how we increased web traffic from LinkedIn by 136% using employee advocacy.”

The main point is increasing web traffic from LinkedIn by 136%, so let’s adjust the heading to focus on that: “See how we increased web traffic from LinkedIn by 136%.” Or, it could be completely rewritten to, “The results speak for themselves.”

All of these changes keep the tone and main points while shortening the headings. This declutters a screen reader user’s output.

Add headings and remove heading semantics from paragraph text

If your headings are paragraph content, adding a heading and removing the heading semantics from the paragraph content can fix the issue.

Let’s say I had a coffee website with these three headings:

• Heading 2: Our coffee artists take pride in not only the best-tasting coffee, but the best looking too. We can do over 50 coffee designs to make your coffee as unique as you.
• Heading 2: Our coffee beans are sourced from Columbia. We then use the French press to give you a full-bodied flavor.
• Heading 2: Try our coffee by visiting any of our three locations in Burbank, CA. We can’t wait to meet you.

Each of these headings really are paragraph text. To fix this, I could remove the heading semantics from these and add headings above this text that still emphasizes that main points. It could end up like this:

• Heading 2: Coffee that tastes as good as it looks
  • Paragraph text: Our coffee artists take pride in not only the best-tasting coffee, but the best looking too. We can do over 50 coffee designs to make your coffee as unique as you.
• Heading 2: Why our coffee just tastes better
  • Paragraph text: Our coffee beans are sourced from Columbia. We then use the French press to give you a full-bodied flavor.
• Heading 2: Where to find us
  • Paragraph text: Try our coffee by visiting any of our three locations in Burbank, CA. We can’t wait to meet you.

Adding these headings and removing the heading semantics from the content helps all users. This makes it easier for visual users to skim. It also declutters a screen reader user’s output and these headings better describe the content they’d find below.

Consider the goal of the visual emphasis

When thinking about the visual and semantic emphasis matching, consider the goal of the visual emphasis. For example, are you trying to emphasize key benefits or features? Or, is there a certain brand tone you’re trying to get across?

The visual and semantic emphasis doesn’t have to be an exact match. So, review your entire page to determine if these visual goals are also met in the semantics, or heading structure.

If they aren’t consider rewriting or adding headings so they match.

Back to top