Quick and easy checks for website accessibility

Matt Obee 8 min read

Website accessibility is measured against a technical standard called the Web Content Accessibility Guidelines (WCAG). There are 13 broad guidelines, each with testable checkpoints called 'success criteria'. There are three possible levels of conformance: A (lowest), AA, and AAA (highest). It's a lot of information to read and understand, even if you have good knowledge of HTML, CSS, JavaScript and assistive technology.

The checks in this article cover a small number of commonly failed but easily tested areas. Ticking off this list won't tell you whether a website is accessible or not. Only a full accessibility audit by an expert will do that. What these checks will do is reveal whether accessibility has been considered at all in the past and give you some idea of where to focus your efforts.

Page titles

As well as appearing in search engine results pages (SERPs), in bookmarks, and when shared on social media, the page title is one of the first things announced by a screen reader when a page loads. Page titles tell users where they are on your website and what the page is about.

In the HTML of a web page, the page title is set inside the <title> element, which appears within the <head> element at the top of the document. If you use a CMS like WordPress the page title is set automatically and structured by your theme. You can make changes to the title using a plugin like Yoast.

Here's what the title looks like on this page:

<title>Quick and easy checks for website accessibility - Goodcircle</title>

Things to check about page titles

  • Each page should have a unique title that clearly and concisely describes the purpose of the page. Relevant keywords should be included but not in a way that makes it difficult to read.
  • Page titles shouldn't start with the website/organisation name. Instead, best practice (for both accessibility and SEO) is for page titles to be 'front-loaded', which means that the important and unique identifying information comes first. You can think of it a bit like a reverse breadcrumb, with the page title first and the website name last. For example: "Page Name - Website Name" instead of "Website Name - Page Name".

Headings

Sections of a web page are separated by headings, like those in this article. They make it easier to scan and digest, but they are also used by screen reader users to jump around the page. Headings are often cited as one of the most important accessibility features.

Visually, headings tend to be styled with a bigger, bolder font and sometimes a different colour. To make headings accessible to everyone, including those who cannot see the styling, they need to be marked-up using HTML heading elements.

There are 6 levels of heading in HTML, identified by the elements <h1> to <h6>. These headings are nested hierarchically. The <h1> heading represents the most important heading on a page and is normally reserved for the page title. Sections within the page are then given <h2> headings. Sub-sections below <h2> are identified by <h3> headings, and so on.

Accessibility testing tools like WAVE can display the headling outline and flag potential problems.

Things to check about headings

  • Every page must have a single <h1> at the start of the main content. This is also the most important heading for SEO. It should normally be worded similarly to the <title> (covered above).
  • All text that is styled to look like a heading must also be marked-up as a heading in HTML.
  • Heading elements must only be used for headings and not just to apply styling (e.g. to make text bold).
  • Heading levels should not be skipped. For example, an <h1> should not be immediately followed by an <h3>.

Readability

Website content should be as clear and simple as possible so that it can be understood by people with a range of reading abilities. Neurodiverse conditions like dyslexia can make comprehension more difficult.

The most widely recognised way of measuring readability is the Flesch Reading Ease score. Content should not require a reading ability more advanced than lower secondary education level. That corresponds to a Flesch score of 70 to 80. The higher the score, the more readable the content.

Things to check about readability

If you are a WordPress user and have the Yoast SEO plugin installed, you already have access to readability analysis for every post and page. That includes a Flesch reading ease score. For a more comprehensive solution, consider a Readable subscription. Discounts are available for charities and non-profit users.

Images

While images can be a great way of providing information, they aren't inherently accessible to screen reader or braille display users. Assistive technology cannot (yet) look at an image, work out what it shows, and describe its meaning to the user. Instead, we have to provide a text alternative that serves the same purpose as the image.

Things to check about images

  • If an image provides information, it should have an alt attribute that provides the same information. Imagine you were reading the page to someone over the phone and consider how you would translate the images into equivalent words.
  • Alt text shouldn't begin with the phrase "Image of..." because that is already announced by assistive technology.
  • If an image is purely decorative, it must have an empty alt attribute (i.e. alt=""). This tells assistive technology like screen readers that it should be ignored completely.

Text contrast ratio

Some people struggle to read text when the contrast between the text and background is low. This includes people with visual impairments and many of us who will naturally lose contrast sensitivity as we get older. Web pages should have a minimum level of contrast by default, which can only be known by checking with a tool.

Things to check about text contrast

Judging contrast levels by eye is not reliable. Instead, use a tool like Accessible Colors to check the contrast ratio between two specific colours. Other tools, like WAVE, can check all of the colour combinations on a page.

Keyboard accessibility

Not everyone can use a mouse or touchpad. People who are blind or have low vision and those with limited fine motor control will navigate using the keyboard. Other people with limited mobility might use alternative devices that behave a bit like keyboards. Web pages do offer good keyboard accessibility by default, but this is sometimes broken by things like hover menus and custom form controls.

Things to check about keyboard accessibility

  • Press the Tab key on your keyboard to move the 'focus' through the interactive elements on the page (i.e. buttons, links, and form fields). You should be able to tab all the way through the page—tabbing onto all of the interactive elements to focus them, and then tabbing away without getting stuck. Pressing Shift and Tab at the same time will let you move backwards.
  • When tabbing, the focus order should be logical and intuitive. This generally means it should flow left to right, top to bottom, following the visual order of the page. It can be confusing if the keyboard order is different from the order in which things appear on screen.
  • When an element has keyboard focus (i.e. it has been selected by tabbing to it) it must be highlighted visually in some way so that you know where you are. This typically appears as a coloured border around the element. At no point should the keyboard focus be invisible.

Form labels

It's crucial that every form field has a descriptive label and that the label is explicitly paired with the field in HTML. It's not enough to just position them close to each other. When done correctly, these labels are announced by assistive technology when a user is navigating the form. Without them, the user won't know what information should be entered into each field.

Things to check about form labels

  • Every form field must have a text label that identifies its purpose.
  • If you click on the label next to an input or text area, the keyboard cursor should appear inside that field.
  • If you click on the label for a checkbox or radio button, that option should be selected.
  • If you click on a label next to a dropdown select, that dropdown should be selected.

Get a full accessibility audit

Do you need expert accessibility advice? We can perform a high-level benchmark to give you an idea of your current level of accessibility or carry out a full WCAG accessibility audit with a comprehensive breakdown of issues. Get in touch for more information.

Get in touch

Questions about our design services? Want to arrange a quick quote? Drop us a message using the form and we'll get back to you as soon as we can.

If you'd prefer to send an email:
hello@goodcircle.co.uk

Goodcircle on Twitter

© 2020 Goodcircle Design CIC. All rights reserved.

A Community Interest Company limited by guarantee. Registered in England and Wales, number 12383169.

Member of CharityCommsMember of Social Enterprise UK