Why headings and subheadings are vital to accessibility …and are not styling tools.

What are headings, exactly?

Headings and subheadings are a way to build the structure of a page. First and foremost, they are a way to set out the content of a document – or web page – in an ordered way that helps ensure the content makes sense. More importantly, they create actual structure to the document, both visually, but also navigationally for those who use assistive technology. From this point on, we’ll just refer to the term ‘page’ because whether it’s a Word document or web page, the principle is exactly the same.

A heading or subheading is the brief title at the top of each section of a page that indicates to the reader what that section is about. It’s not just a challenge in terms of technical definition of which heading class to use, but also one of language as well. A well-written article indicates to the reader what each section is about in a brief line – a major challenge for most authors when done well!

The example in this blog article is as follows:
The <H1> – or Heading 1 tag has been attributed to the main heading of the page. It tells the reader that this is the first heading – read this first to understand what the page is about. Strictly speaking, you should only have one instance of the H1 on any page – the main heading. For now, we’ll ignore the search engine benefits of correctly using H1 tags to avoid dirtying the water with irrelevance.

From there, the page will require the content to be split out into sections to tackle the different stages. This is where <H2>, <H3> and other heading tags or classes come into play. They are, by their definition, denoting that the sections are headings of content, but as the number of the heading tag increases, the less ‘important’ the emphasis on that section as a starting point is inferred. An <H3> would be a sub-heading of <H2>. An <H4> would be a sub-heading of <H3>.

Here’s an example of how a page could be structured:

<H1>This is the main heading of the page</H1>
There are three sections in our example page that tackle the start, middle and end of the subject. Each section has some sub-headings of its own.

<H2>This is the first sub-heading</H2>
In this section there’s normal text, like this and then there’s a couple of sub-headings of content, like this:

<H3>Sub-sub-heading one</H3>
Some text

<H3>Sub-sub-heading two</H3>
Some text

<H2>This is the second sub-heading</H2>
Then we get to the next main section – the second main section, hence the <H2> tag. This section doesn’t have any sub-headings of its own.

<H2>This is last sub-heading</H2>
Then we get to the last main section – the third main section, hence the <H2> tag. This section has two sub-headings of its own.

<H3>Sub-sub-heading one</H3>
Some text

<H3>Sub-sub-heading two</H3>
Some text

<end>

You can see from the example how neatly structured the page is. This isn’t just a visual benefit – it has a practical use when it comes to accessibility and for those who use assistive technology because it adds structure and order to the content of the page and helps the reader navigate through the content without barriers.

 

The current problem

Users of assistive technology, such as screen readers, often come up against barriers on a page where the page’s headings (if used at all) have been chosen based on what the style of the heading looks like and not whether it will provide order to the content’s structure.

Page structure is vital when it comes to assistive technology, but if the page has not been constructed properly, no matter how well the content has been written, a user of assistive technology, such as a screen reader, will have difficulty working out what they should read and in what order.

Many screen readers give the user ‘hot keys’ that will allow them to tab through the content and the assistive technology audibly announces or enlarges the content when the user comes across something they want to read. But if that tabbing takes them through the page in a random order (because the page’s structure has not been correctly set through the use of headings) they are compromised in getting the whole story.

As you can imagine, this could create a scenario where someone who uses assistive technology might interpret a page completely differently to how it was intended, and some content may be inaccessible or be placed out of order due to the lack of structuring.

Unfortunately, web designers and webmasters who manage web pages have, largely, not used heading and sub-heading tags correctly. They have defined headings of pages purely based on the visual and style attributes, such as font, colour, size as well as attributes like its weight – all of which are visual attributes and not based on their definition of the content structure.

 

Other problems from not using headings properly

Being clear with the language used is another vital aspect of using heading classes correctly. Vague or fluffy headings do not help the reader choose whether they should read that section. Let’s be frank about this, people who use assistive technology are already facing more barriers in doing something that people without any disabilities do without much thought, so making them read something because the heading was non-descriptive or vague is not the way to gain another reader to your blog or articles.

Having well-written headings means they can get the gist of the section and decide whether to invest some time reading it, or not.

It’s pretty helpful for those people who don’t have any disabilities, too.

 

The causes

Most CMS (Content Management Systems) such as Joomla, Drupal, online website builders and even WordPress, are to blame. They all come with pre-defined styles for headings and it’s easy to write something on a web page, select one of the heading styles because it looks nice… and boom – you may have just made it impossible for someone who uses assistive technology to read your page.

Bespoke or custom WordPress installations that have been built with accessibility in mind do not have these problems, such as the Aubergine WCAG 2.1AA WordPress package developed specifically for Public Bodies. This package, used in parallel with the scan and reporting service as well as our WCAG Learning Centre helps the webmaster achieve well-constructed pages with good, sequential headings to each page.

Web designer bad habits are also the cause. If you do not have a website that has a CMS, but has been constructed using base code, such as HTML, it is very unlikely the pages will have been constructed with accessibility in mind – and over the years the content of each page, as it is edited, will have lost the all-important headings and sub-heading structure.

Sadly, laziness and apathy is another culprit. Historically, people who run websites just haven’t considered how users of assistive technology might interact with a page. It’s been too easy to chuck words and pictures on the page, publish it and ta-dah, you’re a web designer. Unfortunately, those days need to end. And soon.

 

The impact

Screen readers can’t cope without headings and users of assistive technology struggle to navigate the content. The net result is a sitewide inaccessibility.

You may not think this is a problem. If you are a private individual or company, there’s little impetus to do something about it. But it is worth remembering that about 7% of the population are registered as disabled, so you could be missing out on important customers.

However, if you are a public body – a council or Government organisation – your existence is to serve the public and you are funded by the public, so you have to do something. Laws that have come into place in the UK, US and many other parts of the world now make it a requirement to meet accessibility needs. In the UK, all public bodies (parish, town, city councils included) must have a website that meets WCAG 2.1AA compliance. This ensures the format is suitable for users of assistive technology.

 

The resolution

A change of mindset is needed by the webmaster or page creator to make sure that the page is well structured with headings and those headings tell the user what each section is about.

The change of process

Make sure the CMS or page editing tools and process you use accommodates the need for a proper use of headings. If you don’t like the visual styles of the heading classes you have on your website, get a competent web designer to edit the CSS file. Then all you need to do is think about is how to correctly use heading classes to structure the document (not just choose them based on what they look like).

Understanding the impact of not doing anything

As a private individual or company with no legal requirement, the impact is about reputation. If you make it hard for people who use assistive technology to access the content of your page, they aren’t going to be customers. If you are a public body, the impact could be as severe as an individual making a formal complaint – or worse, taking you to court – if you do nothing about the accessibility of your page(s).

The practical fixes

These are as I have already covered: a change of mindset about how to structure a page using heading tags, writing the content as best you can and getting a small amount of help from your web developer to adjust the heading class styles, if you need to.

 

The wider positive impact

The wider positive impact for documents and pages being better constructed using the correct heading tags will mean:

• Documents are more accessible to all users.
• Websites are more accessible to all and will meet WCAG (Website Content Accessibility Guidelines.)
• Mobile apps and experience will improve, especially given that 70%+ of all internet usage is from a phone, which includes a large proportion of those with accessibility needs.

Ultimately, it’s the right thing to do and aims to make a more inclusive and community-oriented internet.