Write descriptive headings, not just descriptive links

Recently I was working on a project which had a big hero-component on almost every page. Initially I marked it up as an h1, until I found out that 99% of the time it was use to display a quote or some fancy marketing slogan. That made me reconsider the use of the H1-element.


Remember when almost every site would have a ton of click here or read more links? People who were using assistive technology were having a hard times using them, as those links were not describing what they were pointing to. Back in those days very few people cared about accessibility or semantics, so not much was done to fix it. Until SEO came along.

SEO saves the day

When search-engines like Google came in the picture it became very important to build your website as good as possible to assure a good position in the search results. In those early days search-engines mainly focused on the plain HTML of a website - as did most assistive technology in those days. So when companies thought they were just improving their websites for their PageRank, they were actually improving it as well for users of AT. A big step forward for semantic and accessible HTML!

Marketing gets involved

As the web exploded, marketing and copywriters got more and more involved. Content is about the only thing on a website which is important, so it’s great that people who know about writing easy and pleasant to read content are involved. However, this also meant that boring but functional texts like Contact, News and Jobs became Stay connected, What we learned today and Do what you are good at.

Structure of a page

The structure of a simple one-page website might start looking something like this:

<header>
    <h1>My Awesome Site</h1>
</header>
<section>
    <h2>What we learned today</h2>
    <p>...</p>
</section>
<section>
    <h2>Do what you are good at</h2>
    <p>...</p>
</section>
<section>
    <h2>Stay connected</h2>
    <p>...</p>
</section>

Now I’m not saying that those titles are bad per se. It’s just that they are not as descriptive as they should be. This might result in people not understanding them correctly. This is especially a problem for users who navigate your content using a screenreader. They can simply press the H-key and get an overview of the headings on the page. What’s clearer?

  • News
  • Jobs
  • Contact

or

  • What we learned today
  • Do what you are good at
  • Stay connected

I’m guessing most of you reading this would pick the 1st list, right?

Search engines also profit!

Most of the time the H1 and the title of a page will be the same. So those marketing texts might actually end up in search results as well. What would you click on when looking for a phone number?

Stay Connected - My Awesome Website

Or

Contact - My Awesome Website

I know which one I would click first. I think I’ve made my point? Now, how can we still be friends with the content writers and marketeers in our team, while also satisfying our need for clear headings?

Solutions to the problem

As always, there are multiple ways to solve this problem. These are the solutions I could think of right now, but I’d love to hear your thoughts on the matter!

Group together in a parent element

Some of you might have thought about using the hgroup-element, right? When the HTML5-spec was introduced, an hgroup-element was introduced. The element was specifically created for headers with subheadings: The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle. That might look something like this:

<hgroup>
    <h2>Contact</h2>
    <h3>Stay connected</h3>
</hgroup>

However, the element was removed from the spec in early 2013. No worries, we can just use a header-element, right?

<header>
    <h2>Contact</h2>
    <h3>Stay connected</h3>
</header>

That’s better. But why should that subtitle be a h3-element? It’s not really a header, right? This way, people using headers to navigate would still be confronted with non-descriptive headers. So it would probably be better to just use another element, like a p.

<header>
    <h2>Contact</h2>
    <p>Stay connected</p>
</header>

Using CSS you can do as you please. You can make the h2 small and the p a lot bigger, or use a bright color on the slogan/subtitle while using a desaturated color on the h2.

Visually hide the real title

If you really don’t want to display the descriptive title, you might use a CSS utility/helper-class in your HTML to hide the contents of the element of screen, but still make them available to tools like screenreaders or search-engines. My former colleague Rik Schennink has written an excellent article about hiding this type of content, which he has named implicit content. A basic example would look like this:

<header>
    <h2 class="visually-hidden">Contact</h2>
    <p>Stay connected</p>
</h2>

Or if you want the subheading to be included in the heading itself:

<h2>
    <span class="visually-hidden">Contact: </span>
    Stay connected
</h2>

Conclusion

Whatever solution you pick, keep in mind that the solutions outlined above do not only make your website easier to understand and use for people using assistive technologies. They make them easier to use for everyone!



© 2016 Pim Derks. All rights reserved. This website is build on Jekyll. If you have any questions or comments, please feel free to drop me a line.