While there are a number of factors to consider when developing accessible content, it’s important to remember that there are four major categories of disabilities that must be addressed. These include visual, auditory, motor, and cognitive impairments. Because each of these disabilities are so diverse, web pages require inclusive design for all users to access content and learning tools.
Those with visual impairments might experience difficulty using a site if the following design errors are present:
- Videos without audio-based alternatives.
- Images with poor contrast between foreground and background.
- Improper tab order, resulting in unpredictable, complicated and frustrating page navigation.
Potential barriers for individuals with auditory impairments in terms of web design may include:
- Audio content without proper captioning or transcripts.
- Videos that do not provide volume controls.
- No option to increase font size or color of captioning.
Individuals with motor impairments may have trouble if the site cannot be navigated via keyboard only.
Those with cognitive impairments might require more unique alternatives.
There are 4 main principles in place, as outlined by the Web Content Accessibility Guidelines, to ensure best practices are followed when developing content for the web. All content must be perceivable, operable, understandable, and robust.
This means that all web content must be presented in a way that all users can easily perceive, either directly through the web browser, or through an assistive device, such as a screen reader. Learners must also be able to operate each interactive on a page with either a keyboard, or an assistive device as a substitute. Not only should learners be able to navigate through the content, they should also be able to understand what they’re being presented with. This means that even if the content is easy to comprehend, the interface must make sense as well. Adequate spacing throughout the text and clear user instructions where applicable will improve the user experience. And finally, for the complete user experience for all, pages must be robust enough that a wide range of technologies can reliably access and interpret the content.
So how can we ensure that these principles are put in place, and that each of the unique needs of learners are met?
When developing, remember that the key accessibility requirements are:
- Alternative text – Alt text provides a text based alternative to non-text content, including (but not limited to) images, controls, and input.
- Captions – Videos and audio should have synchronized, equivalent captions.
- Colour – Use colour and visual representation wisely. Ensure there is enough colour contrast and don’t rely on colour alone to convey important information.
- Skip Content – The ability to skip content with a skip link is convenient, especially when there are several repetitive elements on a page. A “Skip to Main Content” link is a typical example.
- Logical Heading Hierarchy – Headers, lists, and other structural elements make up the layout of every content page, and assist with page navigation. It’s important that these are arranged logically, and structured in a way that can be read by an assistive device.
- Keyboard Access – Provide keyboard alternatives to mouse clicks. Content should be operable by keyboard, emulators, or other alternative input devices in the event a user has limited vision or poor hand-eye coordination.
- Keyboard Focus Indicator – Interactive elements must have a visual indicator when they are in focus. Additionally, all links must be clearly recognizable as a link. This ensures that the user knows which page element can be manipulated with the keyboard, or is currently active.
While pages can be developed with each of those tips taken into consideration, the next step is to put those pages to the test. Before publishing content, take the time to ensure everything works as intended.
Here are a few examples of technologies and other resources that will help you thoroughly test your content:
- JAWS – JAWS (Job Access With Speech) is the most commonly used screen reader, and was designed for Microsoft Windows.
- NVDA – NVDA (Nonvisual Desktop Access) is another screen reader, a free alternative to JAWS.
- VoiceOver – VoiceOver is a screen reader designed for iOS systems, including macOS, tvOS, watchOS, and the iPod operating systems. It’s unique in that it offers helpful tips throughout use while providing auditory descriptions of each onscreen element.
- Screen Magnifiers – There are a number of screen magnifying products to choose from. For example, ZoomText is a text magnification and reading program designed for users with visual impairments. In addition to magnifying text, ZoomText is also able to enlarge and enhance any form of onscreen content. It will read characters out loud as a user types, and will automatically read pages, documents, and emails.
- Real User Testing / Peer Evaluation – Have someone else review your content. No amount of technology can replace the indispensable value of live human testing. Anyone who regularly uses assistive devices would be an excellent asset here!
It’s easy to create accessible pages with these tips and tricks in mind. Going forward, your online content will be available for everyone.
If you’ve got any tips you’d like to add, feel free to share in the comment section below!
- Introduction to Web Accessibility
- Web Accessibility Initiative
- Web Content Accessibility Guidelines: Requirements and Techniques
- W3C-WAI ARIA Best Practices for Developers
- Web Accessibility Tutorials
- Accessibility Demo
- Meeting web content accessibility standards