Get in touch

+44 (0) 28 9099 2882
deeper@fathom.pro

Fathom

Accessible HTML: a simple guide

Accessible HTML: a simple guide

A super simple guide to building websites that work for everyone.

People access digital services in different ways. Accessible design is fundamental because it helps to remove barriers between people and good online experiences. Accessibility needs to be considered throughout the design stage, usually ensuring that designs meet the WCAG 2.0 AA standard. Investing in accessible design at an early stage can help organisations increase conversions, reduce support centre costs and avoid legal difficulties.

Why accessibility is important

  • In the UK, 1 in 5 people have a disability (Gov.uk). In Ireland it’s 1 in 7 (NDA, 2018)
  • 20% of adults with a disability haven’t used the internet (Office for National Statistics, 2018), and when they do, a quarter of the sites they visit aren’t accessible (We are Purple, 2017)
  • Estimated spending power of the UK’s disabled population is £249 billion (We are Purple, 2017). Back in 2014, the figure in Ireland was €3.3 billion (The Journal)
  • These figures do not account for people with temporary disabilities and conditions that affect access, such as short–term injury and illness

How a webpage is built

I appreciate that a lot of our readers don’t need me to educate them on this, but as Gov.uk rightly points out, accessibility is the whole team’s job. Whether you’re a marketer, a developer or a UX practitioner, it’s good to revisit the fundamentals.

Human anatomy

Moua, N. (image owner). Skeleton, skin and brain [digital image]. Retrieved from Unsplash / Cropped from original

HTML, CSS and Javascript are the basic building blocks of the average website. To differentiate between these components, I like to use a common analogy of the human body: 

  • HTML is the skeleton, essentially the structure of the page, including things like text, images and video
  • CSS is the skin, because it creates the look and feel of the page (colour, layout, typography, line length etc.)
  • Javascript is the brain, which makes elements on the page interactive and dynamic, such as animations, ad tracking and error messages on forms

HTML in particular is where the accessibility heavy lifting is done, so that’s what I’ll focus on here.

The accessible HTML checklist

Here are five things to look out for when assessing accessibility on a website:

1. HTML needs to be semantic

By not placing everything in divs or a table layout, it’s easier for assistive technologies to read the elements on the page.

2. Images should utilise the alt attribute correctly

Do not start with “An image of…” as a screen reader will usually read it as “An image of an image of…”

3. Videos should have captions

This is an example of how designing for accessibility makes life better for everyone. If you want to watch a video on the bus but you’ve forgotten your headphones, you’ll appreciate closed captions.

4. Full navigation should be possible using the keyboard

For example, [tab] for going through the main menu, [enter] to select and arrows to move up and down. This is essential for people who do not use a mouse or track pad.

5. Use of the ARIA attribute

This is important when a text label is not visible on the screen (Mozilla). This article on Medium describes what ARIA does in as simple terms as I can think of:

“The [role] attribute defines a specific role for type of object (such as an article, alert, slider or a button). Additional ARIA attributes provide other useful properties, such as a description for a form or the current width of a progressbar.” (Oyetoke Tobi Emmanuel)

How to test if a website is accessible

There are lots of tools out there to test the accessibility of a website. I recommend WAVE. It allows you to check if a site is semantic, that important elements like alt tags are used correctly, and will show you a list of errors where it finds them on the page.

There are also browser plugins such as Chrome Vox that allow you to experience a site using screen reader technology, enabling you to put yourself in other users’ shoes.

The takeaway

Accessibility should never be seen as an optional extra. If you’re involved in Ecommerce or digital marketing, the idea of creating barriers that prevent potential customers from getting around your online marketplace is very counter intuitive – you certainly wouldn’t do it in a physical store. For any public sector organisation, accessible design is likely a legal requirement. But overall, demonstrating empathy and enabling people to access online services, regardless of one’s abilities, is just the right thing to do.

Cover image: Travis, D. (image owner). Person holding glasses [digital image]. Retrieved from Unsplash / Modified from original

By Mark Devlin

Mark was a UX Designer with Fathom from January 2019 to April 2020, when he moved to take up a Senior Product Designer role at Signifyd.

View more insights by Mark

Like to read more of our insights regularly?

Receive our monthly insights newsletter straight to your inbox.

To prove you’re a human please rewrite the following into the box below.
m4inujyo

Latest from the blog

Our latest views and ideas

Our Cookie Policy

Find out more I accept

Like most websites, ours uses cookies to make sure you receive the best experience possible. These cookies are safe and secure and do not store any sensitive information. To continue, please accept the use of cookies.