AODA

Tips & Tricks

Produced by

Table of Contents

• Summary 1

• Think POUR: The 4 Core Principles 2

and 12 Guidelines of WCAG

• Hierarchy 3

• Contrast 4

• Images for the Web 5

  • Alternative Text Tips 6

• Tools & Resources 7

Summary

Thank you for utilizing REM Web Solutions’ AODA consulting services! We’re excited to help you in your path to bring AODA compliance to your website which helps ensure that all visitors to your website are able to experience it at its full potential.

In this document are recommendations, tips and tricks to help you maintain the requirements for AODA Level AA for all of your websites. It has some very useful information about core principles & guidelines, your CMS, visual hierarchy, colour contrast and images for the web. We’ve also included links to helpful tools & resources.

Think POUR

The guidelines for successfully passing AODA compliance are organized around the following four core principles and 12 guidelines established by the WCAG. They are the foundation of understanding access and use of web content for people with disabilities.

When considering accessibility, it’s always best to put yourself in their shoes and realize that others may not use computers the same way you do. Empathize with your users and make them feel included rather than excluded.

The 4 Core Principles and 12 Guidelines of WCAG

Hierarchy

Visual hierarchy is a method of organizing design elements in order of importance. The structure of the content must be in the correct sequence of readability.

Important elements must be strategically placed to allow the readers to logically comprehend content. One important component of visual ranking is the use of headings.

Below is the proper sequence of headings; they must properly nest by their rank or level.

Headings Sequence

Heading 1

Only to be used once on a page.

Heading 2

Must be at least 1 point size smaller and nest below an H1.

Heading 3

Must be smaller than H2. Is to be used as a subheading for H2 only.

Heading 4

Must be smaller than H3. Is to be used as a subheading for H3 only and so on.

Contrast

Colour is an essential design element that helps designers create areas of interest, support visual hierarchy and maintain brand standards.



Good Contrast

Ratio: 5.37:1



Poor Contrast

Ratio: 2.03:1

The AODA in partnership with the WCAG 2.0 has some requirements regarding the use of colour in order to support people with colour deficiencies and low vision. Primarily these requirements deal with contrast, however, this can affect your design in several different ways.

On the right are examples of contrast that would fail or pass based on their ratios.

Working with Colour

• Contrast– minimum ratio of 4.5:1

• 14pt Bolded or 18pt + text needs only a ratio of 3:1

• Use texture to complement colour information

• Text on images should always use as high contrast as possible

• Incidental/Decorative items such as logos are exempt

Tip

For resources on colour contrast checking tools, please go to page 7: Tools & Resources.

Images for the Web

Images and graphics on websites are full of rich visual content that goes beyond the written word. They support the written content and act as visual cues for way-finding, understanding the content and generally make the information more appealing.

In contrast to the above statements, images can be hard to perceive for people with vision deficiencies. With the use of non-visual prompts such as “Alt Text,” your websites will

not only pass AODA Level AA requirements, but will also aid people with disabilities in understanding and contextualizing the images in your web pages.

What is Alt Text?

Alt Text example for the above image:

<img src=“/images/book-shelf-bw-photo. jpg” alt=“Bookshelf full of various items such as books and vintage cameras”>

“Alt Text” stands for “Alternative Text.” It’s a tag embedded into an image using HTML code. It’s a vital component of web accessibility.

The AODA and the WCAG 2.0 consider many different forms of non-text content, such as images and audio/video content, and require reasonable text alternatives in order to make them accessible to people with visual impairments. Alt Text is necessary for screen-readers such as the JAWs computer

program to recognize and correctly describe an image on a web page.

In order to understand the requirements, it’s valuable to be aware of the purpose of the images by assessing the role each image or graphic is playing in the larger context of the website.

Please see the example image and its HTML code on the right.

Images for the Web Continued...

Alternative Text Tips

• Use simple and plain language.

• Don’t use more that 140 characters. Keep it between 5 and 15 words.

• Consider the context of the image.

• Describe the purpose of the image and what’s in it.

• Avoid the use of adding the words “picture” or “image” within the description as it would be redundant.

• While the tag itself is required, alternative text should only be filled in images that relate to the content. The rule of thumb is if an image is intended to evoke a feeling, alternative text should be considered.

• Decorative images should have a blank Alt attribute. This will make a screen reader ignore the tag which will reduce audible clutter for the user.

Tools & Resources

Address:

72 St. Leger Street, Unit 2 Kitchener, ON, N2H 6R4 Phone: 519.884.4111

Toll-Free: 1.866.754.4111

Email: sales@remwebsolutions.com

Website: www.remwebsolutions.com