Disabilities are diverse. It sounds obvious, but it is often forgotten. Accessibility is commonly stereotyped and oversimplified. When thinking about online content, it evokes an image of a user requiring a screen reader.
"Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives."World Health Organisation
How to quickly check online accessibility
The World Wide Web Consortium (W3C) is an international community in which Member organisations, full-time staff, and the public collaborate to develop Web standards.
Keep in mind that some of the checks listed below overlap or are identical to those used in Search Engine Optimisation (SEO). Therefore, you may discover that this checklist is less of a hassle than you anticipated when it comes to web content.
Much will already be covered if your web/marketing team is practising SEO (as they should be!). So, if you are trying to sell the need for accessibility internally, remember it's good for traffic, it's good for usability, and it's the law!
W3C has created a set of easy accessibility checks for your content.
W3C easy accessibility checks
1. Check page titles for accessibility
Having clear and descriptive page titles is crucial for website navigation. It enables users to understand their current location and easily switch between open pages in their browser.
The first thing screen readers say when the user goes to a different web page is the page title. The best practice is for titles to be "front-loaded" with important and unique identifying information at the beginning.
E.g. Accessibility in E-learning | Skillcast
What to check
- Check that the title briefly and adequately describes the page content
- Check that the title is different from other pages on the website
- Check that the title adequately distinguishes the page from other web pages
2. Check for image text alternatives (alt-text)
Text alternatives are needed for those who do not see the image (e.g. people who are blind and use screen readers can hear the alt text read out loud).
The text alternatives on digital content are derived from the "alt-text". They need to convey the purpose of an image, including pictures, illustrations, charts, etc.
They need to be functional and provide an equivalent user experience, not necessarily describing the image. Most SEO and CMS tools will allow you to generate lists of assets that lack an "alt-text".
E.g. Alt-text for a search button would be "search", not "magnifying glass".)
What to check
- Every image has appropriate alternative text.
3. Text
Text alternatives are needed for those who do not see the image (e.g. people who are blind and use screen readers can hear the alt text read out loud).
Heading checks
Those who cannot use a mouse and use only the keyboard or a screen reader need correctly marked-up headings to navigate.
- All pages have at least one heading.
- Make sure all headings carry a heading tag (i.e. don't use font size or bolding)
- Only use headings where the text delineates a section
- The heading hierarchy is meaningful. Ideally, start with an "H1" and then descend the levels in numerical order
Colour contrast checks
Some people cannot read content without sufficient contrast between the text and background, such as light grey text on a light background. Others, including some people with reading disabilities such as dyslexia, need low luminance.
Three ways to check contrast
- Contrast tool - displaying contrast ratios in a table
- Eye-dropper tool - to select colours
- Turn off colour - converts page to grayscale
WebAIM has a great free contrast checker.
Text re-sizing
Some people need to enlarge web content to read it, while others may need to change other aspects of text display, such as font, line spacing, and more.
- Make sure your website and emails have responsive design baked in.
4. Interaction
Many people cannot use a mouse and rely on the keyboard to interact with online content. People who are blind and some sighted people with mobility impairments rely on the keyboard or on assistive technologies and strategies that rely on keyboard commands, such as voice input.
Accessible websites enable people to access all content and functionality via links, forms, and media controls through their keyboards.
E.g. Alt-text for a search button would be "search", not "magnifying glass".)
Keyboard access & visual focus check
- Tab to all - Check you can tab to every element.
- Tab away - Ensure elements don't have a "keyboard trap".
- Tab order - Ensure it is logical.
- Visual focus - Ensure it is clear which content is in focus.
- All functionality by keyboard - Ensure that you can do everything with it.
- Drop-down lists - Check that you can use arrows without selecting.
- Image links - Have a clear visual focus and click enter to activate.
Forms, labels, and errors
When forms, labels, and error messages are marked up correctly, people can interact with them using only the keyboard, voice input, and screen readers.
Also, the label itself becomes clickable, increasing the target area and making it easier to select small radio buttons or checkboxes.
- Check that all form controls are keyboard accessible, including that you can reach all items in any drop-down list.
5. General
The text alternatives on digital content are derived from the "alt-text". They need to convey the purpose of an image, including pictures, illustrations, charts, etc.
Check your moving, flashing, or blinking content
Users need to be able to control moving content, especially those with attention deficit disorder or visual processing disorders.
- Ensure there is a way to stop or hide any moving, blinking, or scrolling content
- Provide a way to stop, hide or change the frequency of auto-updated information
- Check that no content flashes or blinks more than three times in one second
Provide multimedia (video, audio) alternatives
Visual information cannot be seen by those who are blind or have low vision unless provided in an alternative format, such as audio or text.
- Keyboard access - See section 4. Interaction
- Auto-start control - either does not start automatically or can be controlled.
- Captions - This is more than just subtitles. Identify people and describe visuals.
- Transcript - It should be easy to access full descriptions (see captions).
- Audio description - This describes any meaningful visuals.
Check that the basic structure makes sense
A basic structure check helps ensure that the page flows and makes sense. The easiest way to do this is by checking the web page without images, styles, and layout.
- Check that the information makes sense when read in the order it is shown
- Check that the alternative text adequately reflects the missing images
- Check that blocks of information have clear headings
Next steps for accessibility
Current Web Content Accessibility Guidelines (WCAG 2.0) stipulate that e-learning content must be POUR:
- Perceivable - Information and user interface components must be presentable to users in ways they can perceive
- Operable- User interface components and navigation must be operable
- Understandable - Information and the operation of the user interface must be understandable
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of assistive technologies
If you want to improve your accessibility, follow POUR guidelines to ensure that your online content is accessible to all learners.
Want to learn more about Equality & Compliance?
We’ve created a comprehensive Equality & Diversity roadmap to help you navigate the compliance landscape, supported by e-learning in our Essentials Library.
We also have 100+ free compliance training aids, including assessments, best practice guides, checklists, desk aids, eBooks, games, posters, training presentations and even e-learning modules!
Finally, the SkillcastConnect community provides a unique opportunity to network with other compliance professionals in a vendor-free environment, priority access to our free online learning portal and other exclusive benefits.
