Making a website accessible for people with disabilities is an important aspect of web development.
A full accessibility audit requires the use of both automated evaluation tools and manual user testing with assistive technology.
How do I make my website more accessible for people with disabilities?
Here are some tips to help you get started:
- Use semantic HTML: Semantic HTML helps screen readers and other assistive technologies to understand the content of your website. Use appropriate tags such as
<footer>to structure your content.
- Provide alternative text for images: Alternative text (
alttext) is a brief description of an image that is read by screen readers and search engines. It helps visually impaired users to understand the content of the image.
- Use descriptive link text: Use descriptive link text instead of generic phrases such as
read more. This helps users to understand where the link will take them.
- Ensure keyboard accessibility: Ensure that all functionality on your website can be accessed using a keyboard. Some people just use the keyboard to browse the website; others use the mouse or trackpad. Many people with motor disabilitiesÂ use a keyboard. Users of assistive technology will normally navigate using a keyboard. In addition to regular keyboards, some users may use customised keyboards or other technology that simulates keyboard functions. An important aspect of keyboard navigation is to incorporate visible keyboard focus, appropriate tab order, and avoid keyboard traps.
- Provide captions and transcripts for multimedia: Provide captions and transcripts for videos and audio files. This helps users who are deaf or hard of hearing to understand the content.
- Ensure color contrast: Ensure that there is sufficient contrast between text and background colors. This helps users with visual impairments to read the content. Important graphical icons, and user interface controls like radio buttons and checkboxes, must also meet the 3:1 contrast ratio. This principle, however, has some exclusions.
- Large text (over
14ptbold) has a contrast ratio of at least 3:1.
- The content is decorative. Words used as a decorative element have no color contrast requirement.
- The content part of a logo or wordmark.
- Text on an inactive element or component (i.e. disabled state) does not need to meet a contrast requirement until they can be interacted with. However, it is strongly advised that inactive states do meet the 4.5:1 ratio and that active elements have a larger contrast.
- There is no contrast requirement if nobody shouldn’t see the content at a given time.
- Large text (over
The following areas should be considered while performing manual testing by a real user with disabilities:
- Keyboard-only user: The user has a motor disability that prevents him or her from operating a computer or devices with anything other than a keyboard. An adaptable keyboard can be used to make operations easier.
- Voice activation user: The user has a motor impairment that requires him or her to use only voice commands to operate a computer or device, which is made possible by assistive technology such as a microphone and dictation software.
- Screen reader user: The user has a visual impairment that requires him or her to use assistive technology such as a screen reader to operate a computer or device through keyboard control and feedback via synthesized audible descriptions of visual elements.
- Users who have color blindness: The user has a visual impairment that restricts access to content in a specific color spectrum. To modify the color spectrum of the content, the user uses system/browser controls or assistive technology.
- Low vision user: The user has a vision impairment that prevents him or her from viewing content at 100% magnification. To increase screen magnification, the user employs system/browser controls or assistive technology.
- Deafness, hearing loss, and being hard of hearing: The user has a hearing impairment that restricts his or her ability to access audio data.
- Cognition and learning disabilities: The user has a learning disability that prevents him or her from accessing content that requires a high level of literacy. Cognitive accessibility covers accessibility considerations for people with cognition and learning disabilities.