Website Accessibility
A guide to making your website accessible for all
Last updated on October 16th, 2020
The accessibility level of a website can be ascertained by evaluating it against Web Content Accessibility Guidelines (WCAG) of which 2.1 is the latest version. Accessible websites can achieve one of three levels; single-A, double-A and triple-A. A ‘Level A’ website only meets the minimum of basic standards, while a ‘triple-A’ website is fully accessible for all users with a range of disabilities.
To build a truly accessible website, usability must be a core pillar throughout the design and build process. As well as writing code to be accessible standards, colour contrast ratio, layout and even the use of language can affect its usability.
Code Implementation
Here are some of the features/code that should be implemented when developing an accessible website.
Focus Link
An entire website should be accessible via tabbing on a keyboard, this includes the site navigation. A focus hyperlink with a strong colour should also be added so that it is very clear where on a page the user is.
Skip navigation link
This should be added to a website to allow a visitor using keyboard controls to skip straight to the content instead of having to tab through all the navigation items with every new page they visit.
Aria label attribute
This should be used where a link or buttons context is not visible on the screen. For example, a ‘Learn More’ button might make sense when seen in context, but when its read from a screen reader, additional context is required. This additional copy can be placed within an Aria label.
Image Alt Tag
All images on a website should have an alt (alternative) tag description added. This is a written description of what the image is ‘e.g. boy with a yellow jumper riding a bike’.
Accessibility Software
There is a variety of different software that can be used for visitors with visual or dexterity challenges.
Jaws
Screen reader application used by those who are blind.
Dragon Naturally Speaking
Voice activated software employed by those that do not use a conventional input device such as a keyboard or mouse.
Accessibility Statement(s)
To be fully compliant every website should have an accessibility statement to explain to users what’s been done to make the website accessible and more importantly what areas are not accessible.
Here are some good examples:
Useful Resources
- Accessibility Developer – A guide to browsing websites with a keyboard only
- Accessible Colours – Find accessible colour combinations that are the closest match to your brand palette.
- WCAG 2.1 – Official Web Content Accessibility Guidelines (2.1)
- Site Improve – A tool to run automated accessibility tests
- Recite Me – An assistive tool bar that can be added to websites