Module 6 – Website Accessibility Quick Wins
Creating an accessible website allows visitors with disabilities un-impeded access to your content. This helps them do things like read your blog, watch/listen to videos, and book a room or experience with you, with ease.
About This Tool
Reading time: ~4 mins
Format: Tool
Studies show that 71% of customers with a disability will leave a website that is too difficult to navigate.
The Web Content Accessibility Guidelines (WCAG), published by the Web Accessibility Initiative of the World Wide Web Consortium, provides a common definition and set of technical guidelines to help businesses make web content more accessible to people with disabilities.
The WCAG is divided into 3 levels of conformance, and is assessed by self-evaluation:
- A – the least restrictive on design
- AA – a moderate impact on design
- AAA – high impact on design
Most small businesses that focus on accessibility opt for an AA level of compliance.
The full set of WCAG can be a lot to grasp and understand at first, but these quick wins can help people get a quick start. They address the most important considerations for web accessibility:
The webpage title is the page’s accessible name.
Accessible names are used by assistive technology to identify the purpose of interactive elements and other objects on a web page. The title of a web page is the first thing read aloud by a screen reader when it starts reading the page; Providing unique, concise page titles helps users with disabilities quickly understand a web page’s content and purpose. It will also be used by search engines, and is used to label the browser’s tab. Be sure your title is descriptive enough to provide context as to what the user is going to view. Review sites for pages with the same (or very similar) names.
Content is written in clear language that is familiar to your audience.
Keep words, sentences, and paragraphs short. Remove redundant information and opt for short, widely understood words over more obscure ones. In general, aim to write at a level that would be comfortable for someone in grade 7-9 to read and understand.
Pages follow a clear, logical structure.
Content that is organized in a logical way renders in a meaningful way for screen readers.
- H1s, H2s, etc. – keep these in order as much as possible (also important for SEO)
- Maintain white space on the page
- Left-aligning content, rather than justifying text avoids the “river effect” and it is clearer for dyslexic readers
Images on your website have alt text applied.
Images (like photos, maps, charts, and icons) are effective ways to communicate information. Non-visual users rely on alternative text descriptions (alt text) to perceive information in images. They are not visible on the page but can be read by assistive technologies, such as screen readers. Alt text should be:
- Clear
- Specific
- Descriptive
- Fewer than 125 characters
- Alt text does not need to include “picture of” or “image of” in description.
Context is important – decorative images may not need a description.
Video and audio files on your website have associated captions and transcripts.
Transcripts, captions (subtitles), and descriptions provide a text version of the speech and non-speech audio information for those who are Deaf or hard-of-hearing, and ensure media is accessible to all visitors. Ensure all video and audio files on your website have associated captions and transcripts. Learn more.
Users have the ability to “skip” your main navigation if using their keyboard or other assistive technology to browse your website.
Navigating a navigation menu can be very frustrating for users who rely on only their keyboard or other assistive technology such as a mouth wand. Providing a “skip to main content” link as the first tab-able item on a page or in a menu allows users to jump right into the main content of the page.
Colours meet the appropriate colour contrast guidelines.
It’s important to rely on more than just one colour to communicate information, and to ensure that the colour contrast between the foreground and background is high enough that the page content is clearly distinguishable from the surrounding page. For AA compliance, that means:
- 3:1 for all user interface components and graphical objects.
- 3:1 for large text (above 24px or 18.5px bold).
- 4.5:1 for regular text (under 24px or 18.5px bold).
- You are not using colour as the only way to communicate instructions.
Use this tool to test your website’s colour contrast ratio.
Hyperlinks and button styles are consistent
It is a best practice is to keep hyperlink and button styles consistent throughout your site, to gain faster recognition and acceptance. Above all, use descriptive text to provide context to what is being clicked.
Users can pause or stop auto-play videos
Any media that auto-plays should have controls that allow the user to pause or stop playback, especially if the video exceeds 5 seconds. Rather than automatically playing video, provide users with options and give relevant warnings for flashing lights, loud sounds, and other possible triggers.
Last updated: August, 2024
