Web accessibility refers to the process of making websites and digital products as usable as possible, to the widest audience of users possible - including considering the needs of those with sensory disabilities.
An accessible web should embody these 4 core principles and be:
- Perceivable - users are able to understand the information and interface elements by use of the senses
- Operable - Interface and controls should be operable regardless of platform
- Understandable - Web content and controls should feel familiar to users and function in predictable ways
- Robust - Content should be easily interpreted by any device or platform, paying particular focus to assistive technologies
To read more about all the guidelines in detail, and the different levels of compliance, visit the W3C's Web Content Accessibility Guidelines (WCAG) Overview.
Keyboard navigability & focus is priority
Visually impaired web users use assistive technologies (often referred to as ‘screen readers’) that are able to read the content on a screen out loud, as well as help them navigate the site. This software is operated with the keyboard, the touchscreen on one’s smartphone, or with specialised controllers.
Additionally, some fully sighted users may simply be unable to operate a mouse. For these reasons, it's important that your pages are navigable using the keyboard only.
» Tip - a simple way to test keyboard navigability is to try navigate through a page using the tab key and/or the arrow keys.
- Do you see focus rings highlighting links and controls?
- Does the keyboard focus follow the visual order on the page?
- Can you ‘tab’ into and out of any region without accidentally becoming stuck? (known as a ‘keyboard trap’)
Page titles are crucial
Screen readers announce page titles first when a page loads. This is the text that appears on the browser tab. Page titles are declared in the HTML with <title> tags.
This <title> tag becomes vitally important for the visually impaired using screen readers, as it tells them which page they are about to access. Titles should describe the page’s content quickly and accurately, and should not contain special characters or symbols, as some screen readers will pronounce these characters differently or skip over them entirely.
» Tip - Test page titles with text-to-speech software or websites to check their legibility and effectiveness.
Declare the intended language
Multi-lingual screen readers are able to adapt pronunciation and speak text in the appropriate accent and syntax of the declared language of a page. Language declaration is also important for braille translation software in controlling how text is output to braille displays*, and for avoiding unintentional braille contractions. (*a braille display is a physical device that outputs refreshable rows of physical braille that a user can feel)
Check colour & contrast ratios
‘Contrast ratio’, in this sense, refers to combinations of colours, and how much they ‘stand out’ from one another, or ‘blend in’ to one another. Contrast ratio is most important to consider for displaying text, but also applies to graphics and interface components (eg form inputs and buttons). Choosing contrasting colour schemes will increase the overall legibility and visibility of a page for both visually impaired and sighted users alike.
» Tip - A simple tool for checking the contrast ratios of colours in your designs is the WebAIM Contrast Checker.
Add subtitles to videos
Adding captions and/or subtitles to any video featured on your website will help people with hearing loss understand the content. They're a good idea regardless, as users may simply need to access your content in a public place where sound may not be suitable (eg. on the train or at work).
Some other accessibility pointers:
- Pay careful attention to the design and usability of forms and inputs. Forms need to have associated labels for all inputs, need to guide the user logically through the flow, and need to be operable by keyboard.
- Any other custom controls or buttons need to have associated labels, should be keyboard focusable and should indicate their state.
- Providing a 'table of contents' or sitemap gives users a quick overview of your site's structure, and also allows them to jump directly to a specific section.
- Include controls on the page that allow users to change the text size or switch to a high visual contrast mode.
- A popular technique involves adding an anchor link at the top of each page. These ‘skip to content’ links direct the user to the main content, skipping elements that are often repeated at the top of every webpage (like company logos, search boxes, navigation menus etc). For example, a user frequently visits the same blog, but wants to skip directly to the most recent post as soon as the website loads.
Whether you’re evaluating your early design mockups, or performing an audit on an existing website, it’s never too late to consider improving your product's accessibility.
Below are a couple of handy ways to test readability of existing websites:
Disable the images
A good way to test pages’ readability is to hide the images:
- Does the page still tell the story or relay the information the user needs?
- If an image contains vital information or is used as a button - is it tagged with descriptive, ‘alternate text’ in the HTML?
- Purely decorative or background images are usually skipped by screen readers, so it’s important not to rely on images to convey important content.
Disable the CSS
Another way to check a pages’ readability and structure is to disable the CSS styling. This will give you an idea of how assistive technology ‘sees’ a page, stripping away visual styling and decoration, and leaving behind the core content (headings, paragraphs and links).
- Check the content structure - are the headings (H1, H2 etc) in hierarchical order?
- Are there distinct regions of the page defined? (eg banner, navigation, main content)
» Tip - You can hide images and disable CSS (plus more tricks) with a browser plugin called Web Developer by chrispederick.com
For an automatic, technical report, one could also use Google Lighthouse - a tool included in Chrome browser to evaluate a site's performance - which includes an accessibility audit.
Conclusion
Accessibility is a term mostly associated with people with disabilities, but creating a more accessible web is not only about inclusion - it’s about contributing to a better quality web overall, and should be part of any UX designer’s toolkit.
References:
W3C Web Accessibility Initiative - Strategies, standards, resources to make the Web accessible to people with disabilities
WebAim - WebAIM (Web Accessibility In Mind) has provided comprehensive web accessibility solutions since 1999.
Google Web Fundamentals - Accessibility - Google's opinionated reference for building amazing web experiences.