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.
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
