A new AODA requirement for Ontario websites will come into force on January 1st, 2021. Under the Information and Communications Standards, organizations must make their websites and web-based apps accessible. Organizations must do so by making their websites compliant with Web Content Accessibility Guidelines (WCAG) 2.0, Level AA. This international standard gives web developers guidelines on how to make their webpages accessible to computer users with disabilities. Some of these guidelines outline how to make web content visible to a variety of users. Here we will describe a few of these web accessibility guidelines for making content visible.
Web Accessibility Guidelines for Making Content Visible
Web designers must ensure that people can access their content using a variety of senses. As a result, designers should never use colour as the only way of making information stand out. For example, designers may sometimes use colour to:
- Require an action or a response
- Highlight information
Designers should use other ways to distinguish information, in addition to colour. For instance, designers can separate or highlight information using:
- Headings
- Lists
- Buttons
Similarly, instructions for moving through or interacting with a site must never rely on only one sense. For example, instructions that rely on only one sense are:
- “Click the green button on the left.”
- “Click the largest triangle.”
- “When you have selected the correct result, a bell will ring.”
Instead, designers must create instructions that users can follow using a variety of senses and programs. For instance, screen readers read text, but not colours, shape, or size. They also do not indicate whether information is on the left or right side of the screen. However, they do read labels on buttons. In contrast, people accessing computers visually will not access instructions that rely only on sound. Therefore, designers should create instructions that people can read using various senses or programs. For example, some instructions that users can read and follow in multiple ways include:
- “Click the ‘next’ button.
- “When you have selected the correct result, a feedback message will display.”
Colour Contrast
Designers must also ensure enough colour contrast between a website’s background and the text and images in the foreground. In most cases, the ratio for colour contrast should be 4.5:1 or more. However, the ratio for larger images or text is 3:1 or more.
In addition, there are no contrast requirements for text or images that are:
- Part of logos or brand names
- Decorative or not visible
- Part of “an inactive user interface component”
- Minor elements of a picture that includes more important content
Text Alternatives
Finally, web designers must provide text alternatives for any non-text elements of their websites. These text alternatives must serve the same purpose, and provide the same information, as their non-text counterparts. However, there are some exceptions to this guideline, including:
- Time-based media
- Tests or exercises that would be invalid if shown as text
- Content that creates a specific sensory experience
For these elements, designers should provide brief descriptions to indicate what this content is.
Other exceptions have unique solutions, including:
- CAPTCHA allowing users to confirm that they are humans, not computers
- Designers should provide an alternate form of CAPTCHA
- Visual elements used for decoration or formatting
- Designers should make these elements invisible to assistive technology
- Controls, or other content that allows users to input information
- Designers should provide names that show the purpose of these elements
Advanced Requirements
The WCAG webpage provides the full list of requirements, as well as technical guidance on how to implement them. The AODA only requires websites to follow guidelines in version 2.0, level AA. However, the WCAG webpage provides guidelines at level AAA. In addition, the page also includes new guidelines added in Version 2.1. For example, some additional guidelines for making web content visible are:
- Contrast ratios of 7:1 or more for text and images
- Contrast ratios of 3:1 or more for non-text elements
- Guidelines for vertical and horizontal scrolling
While websites do not need to follow these guidelines, they can choose to follow them as a best practice. Websites that follow more guidelines have the chance to welcome more visitors and do more online business.