Blog.

Article topics

Headings, page styling and text formatting – with accessibility in mind

Mark Tomkins

Well formatted headings

Headings on pages provide structure. They break the content of the web page down into its key sections and this is good both from a user’s experience – it demonstrates the content has been considered when being written but also helps those who require a little assistance in reading it. Whether that’s through disabilities, such as dyslexia or a learning difficulty or because the user has sight difficulties and uses a screen reader.

The headings provide the benefit of giving the user (let’s call them ‘readers’ from now), the ability to skip to the section they want to read without having to read through the entire document.

Many screen readers used by those who have low vision or blindness navigate the reader through the headings – so it’s important to get these right to avoid them being sent all over the page in different directions.

This is done using ‘heading classes’. This is not new technology, but one that has really just not been used widely or properly enough until recently by most website authors.

These heading classes have two attributes – the first is their visual styling, such as the font, font size, font weight and colour. The other attribute is their designation – their heading class number.

For example, on this page, the page’s title is heading class 1 – ‘H1’. It is recommended that web pages only have one ‘H1’ per page. After that, the headings on the page must be used sequentially and without skipping a class or using them out of order. Using them out of order could potentially give a reader who uses a screen reader a bad experience of having the page content in a different order or prevent them from going straight to the section they need.

Why styling is a problem

The problem is that most website authors choose their heading classes they use on a web page by how the font and typefaces look (it’s size, weight, colour etc) rather than using the proper heading classes, and that’s how non-sequential or incorrect heading classes creep in. When web authors choose the heading classes for sections on a page by how they look, the sections of the content are all jumbled up and, whilst it is unlikely to be noticed by someone with good vision, someone with low or no vision and who uses a screen reader will find it difficult to navigate through the content. Additionally, when heading classes (and other text formatting) is overstyled with colours or difficult to read typefaces, those with learning difficulties or older users will also struggle.

A good example of heading formatting

Here’s an example of what works best, using a sample block of text that has sections with proper heading classes.

This is the page title – (it’s H1)

Here is a block of text. (this is in normal paragraph style). If you are using WordPress, the page or post’s title you give it will automatically be H1 so you don’t need to use that again on the page.

This is the next heading on the page – (it needs to be H2)

Here is a block of text. (this is in normal paragraph style)

You can now use lower heading classes for sub-sections as long as you stay sequential and don’t skip a level.

This is a sub-section heading – (it needs to be H3)

Here is a block of text. (this is in normal paragraph style)

This is another sub-section heading – (it also needs to be H3)

Here is a block of text. (this is in normal paragraph style)

You can now go back to H2 to start a new main section title (it needs to be H2)

What you should not do is choose another heading class that is out of sequence, i.e H4. The next heading class you can use after the above H2 would be either another H2 or H3.

This technique is transferable to when you write MS Word documents, too and helps ensure that those files and any PDFs you make from them are also accessible.

Practical tips

When formatting the heading classes in an MS Word document spend 5 minutes modifying the font, size, weight and colour before you get started in the bar at the top of the page below the application menu – that way you can easily select the heading classes without having to worry about the styling. Those styles will then stay there and you can use them over and over for consistency.

However, a website may not be quite so straightforward as it may have been developed without any particular order to the heading classes. We recommend the following:

  1. Make a new web page and give it a sample title (e.g My example text page)
  2. Type out on the page the above block of examples, making sure to select the heading classes for each
  3. It will display them how the website’s underlying styling rules were set
  4. Review these and decide if the heading classes (starting from H1 through to H6) reduce correctly in font size and weight (and colour if you like). If they don’t and you’re handy with changing this in the website’s CSS file – make those edits. If not, your local web developer will take less than an hour to sort that out for you and will be a good investment for you. It should cost no more than £60-70.

You can find more detailed information on the W3C best practice heading formatting techniques web page.

Accessible page styling

The next area to address when it comes to best practice page formatting for the most accessible experience is to ensure the web page content is set out in a clear and ordered way. This isn’t just a help to those users of assistive technology but all users. Here’s some basic principles to follow when setting out a web page:

  1. Plan the page content – think about the sections and use the heading classes to section out the content
  2. Add ALT TEXT for every image you add – a brief description of the image. Don’t leave it as it was uploaded as it’ll most like be something like DSC289474.jpg because that’s how it came off the phone or camera.
  3. If you are using images, make sure they don’t have any text embedded in the image that’s critical to the user knowing it – such as a photo of a event poster or the scan of a document. If it has words on it, you’ll need to add a detailed ALT TEXT for it.
  4. Avoid using tables if at all possible. If you have to, use them for numerical data only and make sure the columns and rows all have headings in them.
  5. Avoid text over-formatting – we’ll cover that in the next section but it’s one to use across a website.
  6. Links – make sure the links are descriptive – if they are going to a document, make the link text the title of the document. If the link is going to another page or website, give it a proper label, e.g ‘visit the Aubergine Portfolio to see more examples of our work’ – the words ‘Aubergine Portfolio’ being the link text. Avoid using ‘click here’, ‘read more’ and ‘download’ as this does not tell the user what exactly the are getting or where they are going.
  7. Colours and contrast – keep the colours of your website strong and with high contrast to each other – pastel and pale colours are best avoided and placing coloured text on coloured backgrounds is a definite no-no.

Accessible text formatting

There is always a temptation to over-style text on a web page. That includes styling such as bold, italic, underlining, colours and font sizes. The desire behind the reason is that the author wants to emphasise or highlight a certain part. However, in a lot of cases, the styling is over-used or is unnecessary. For those that use assistive technology or just require the web page to be clear and concise, the visual clutter of styling can create difficulties in reading the text, both from a technical point of view in that the screen reader interprets the text incorrectly or the reader visually experiences something challenging when reading it.

The basic rule of thumb is keep it simple. Keep the styling to a minimum. Here are some good tips to follow when considering adding styling to text:

  1. Only use coloured text if that colour is strong and of high contrast to the background
  2. Don’t use difficult to read or over-styled typefaces
  3. Don’t use small text sizes
  4. Don’t embolden or italicise long lines of text or whole sentences.
  5. Don’t underline text unless it is a link to somewhere or something – follow the link text principle previously mentioned.
  6. Avoid using acronyms where possible – write out the name in full along with the acronym at the start of the sentence.
  7. If you are using WordPress or similar – toggle to the ‘text’ view of the page editor and look for all the unnecessary ‘ ’ characters as these are where you have hit return a few times to make space – this can cause problems with screen readers.

Following all these basic principles will ensure that your web page will be as accessible as possible and you can check it using a free Chrome Browser extension called ‘WAVE’ by Webaim. This can be added easily to your browser.