Web accessibility isn’t just a buzzword; it’s a basic human right. So says the United Nations Convention on the Rights of Persons with Disabilities – and here at Formation, we’re inclined to agree.
The World Wide Web Consortium (W3C) defines web accessibility as ‘websites, tools and technologies [that] are designed and developed so that people with disabilities can use them.’
This covers a wide variety of barriers to accessibility from permanent physical disabilities – such as low vision – to temporary and situational ones – such as a broken arm or poor internet connection.
The World Health Organisation (WHO) states: A person’s environment has a huge effect on the experience and extent of disability. Inaccessible environments create barriers that often hinder the full and effective participation of persons with disabilities in society on an equal basis with others. Progress on improving social participation can be made by addressing these barriers and facilitating persons with disabilities in their day to day lives.
Thankfully, modern technology provides us with a variety of ways to address and remove these barriers to online services.
Why then are over 95% of the world’s top 1 million websites continuing to deny the basic human rights of over 1.3 billion disabled people by failing to meet their needs for equal access?
Web accessibility isn’t about fixing problems; it’s about building inclusive websites. Here are some tips for creating a website that supports the move towards online access for all.
1. Alternative Text (Alt text)
Alt text provides a text alternative for visual elements on the screen. Use alt text on your images to describe what a picture is about, so screen readers can convey this information to users who can’t see the image clearly, if at all.
Include alt text that explains what the image is communicating rather than visual details, such as colours and textures which some users might be unfamiliar with. Use plain language and avoid puns or humour as this can cause confusion.
2. Headings
Assign hierarchical headings to your on-page text. Screen readers use text labelled in this way to navigate the page, so users can access the most relevant information quickly and easily.
Prioritise the most important information on the page as H2 or H3, working your way down to H4, H5, H6 etc. Save your H1 label for the page heading. It’s best to only have one H1 heading per page.
Breaking large chunks of text into smaller sections with the use of headings makes it easier for people of all abilities to read and understand your website content.
3. Audio alternatives
Audio alternatives, such as closed captions for videos, allow users to access content that uses sound. Whether your user has a hearing disability or is in a situation where they’re unable to use sound, audio alternatives provide the information in text format.
Make sure closed captions are accurate and run in time with the visual content. You could also include sign language interpretation alongside your video content to further improve accessibility.
While closed captions relay a video’s audio content, audio descriptions relay important visual information for people who are unable to see video content.
4. Language
Language is a barrier that’s often overlooked. In the UK, 1 in 6 people are defined as having ‘very poor’ literacy skills below Level 1. This is equivalent to GCSE grades D-G. According to National Literacy Trust, adults with skills below Level 1 may not be able to read bus or train timetables or understand their pay slip.
There's also the consideration that not all your website users have English as their first language.
Keep your text simple, straight forward, and to the point. Use short sentences and break up your information into manageable chunks. Thoughtful use of images with alt text can also help clarify meaning.
5. Keyboard accessibility
Many assistive devices and people with long-and short-term motor disabilities rely solely on keyboard input to access online services.
Ensure all pages and clickable on-page elements are accessible using just keyboard input. Enabling keyboard shortcuts also helps people navigate websites without using a mouse.
Test your website to assess its keyboard accessibility and be sure to resolve any issues.
6. Colour
Many people have difficulties distinguishing between certain colours. In fact, around 8% of men and 1 in 200 women is affected by some form of colour-blindness!
There isn’t just one type of colour-blindness and people who are affected experience seeing colour in a variety of ways. Think carefully about your choice of colours and never use colour to designate meaning. Green for ‘Yes’ and red for ‘No’ are not helpful to a person with red/green colour blindness.
In addition to this, low contrast between text colour and background makes it hard for many users to read, especially those with low vision or learning difficulties like dyslexia and dyscalculia.
Aim for a contrast ratio of at least 4.5:1 and use a contrast checker to make sure your colour choices adhere to this.
7. Text size and resizing
There's no recommendation for minimum text size on a website, though 12pt for body text is generally accepted as standard. More important is the ability for users to resize website text up to 200% of its original size.
Adaptable layouts that respond to increased text size help avoid navigational issues for users – such as the need for additional a scrolling – when accessing a website using enlarged text.
8. Moving images and animations
While online video content and animations are a popular, fun way to share information on websites, moving elements on a page can hinder the user experience for some people. This includes but is not limited to some neurodivergent users; some people with limited vision, and some people with cognitive disabilities.
When using moving elements or animations, make sure it’s possible for users to pause, stop, or hide these elements if they last for more than five seconds.
9. White space
Using plenty of white space in your website design benefits most if not all users, regardless of ability.
It’s especially helpful for visitors with visual, cognitive, and learning disabilities as a page that’s cluttered with too many visuals can make seeing and absorbing relevant information difficult.
It’s also helpful for users with limited motor control; having plenty of white space around clickable elements helps with locating and selecting the right one.
10. Formatting and icons
Using consistent formatting of your pages and icons makes your website easy to navigate and understand.
Sticking to universal icons such as the ‘hamburger’ - three lines stacked on top of one another to represent ‘menu’ - helps improve accessibility and user experience for visitors of all abilities.
11. Hyperlinks
Screen readers allow users to scroll through all clickable elements on a page to find the one they need quickly and easily. But they will only read the highlighted text on a hyperlink.
If all the hyperlinks on a page are simply labelled: click here, a screen reader will read: “click here”, “click here, “click here”, without providing the user with any context as to what the link is for.
Instead, use whole sentences as hyperlinks, such as: ‘For more information on Formation’s services, click here.’, so it’s clear to everyone what each link relates to.
12. Make online forms accessible
Nobody likes filling in online forms. But for people using screen readers and assistive input technology, they can be even more frustrating.
Make online forms accessible by clearly denoting required fields and using clear error messages that explain what the problem is if the form has failed to submit.
Provide text input alternatives, such as date pickers, and label each field of the form using HTML so visitors using screen readers know which part of the form relates to each field.
If there is a ‘time-out' feature on the form, make this extendable for people who may need longer to complete it.
13. Test your website
Carry out tests on your website to assess its accessibility and make the necessary improvements to address any issues that arise.
Test it on a variety of devices such as mobile, desktop, and tablet, in different environments, and with a range of browsers to ensure it performs well for users in all situations.
Ideally, tests should also be carried out by different users with varying abilities and using a range of assistive devices.
Alongside manual tests, automated tests can be used to assess the accessibility of your website to flag issues with fonts, image ALT text, headings, website structure, HTML labels and more.
The takeaway
Web accessibility can feel like a tall order with so many criteria to consider. The easiest way to guarantee your digital platforms are compliant is to let Formation handle the design and development for you!
Our in-house creatives have worked with various public sector organisations, giving us extensive experience in developing, designing, and testing websites that meet Web Content Accessibility Guidelines (WCAG). Get in touch with Formation today to find out more about our accessible website services.
