Accessibility Web Content Checklist

Designing smart and inclusive websites for everyday users

According to Ontario law, all public organizations and organizations with 50+ employees must comply with the Web Content Accessibility Guidelines (WCAG) 2.1 and make their websites accessible by the 1st of January 2021.

Our previous article, Accessibility and Your Website, explains both the Ontario law and the market advantages of building the accessible web.

Understanding the 4 principles of Accessibility Guidelines

The accessibility guidelines of WCAG 2.1 are organized around the following 4 principles, which lay the foundation necessary for anyone to access and use web content:

1. Perceivable Content:

Information and user interface components must be presentable to users in ways they can perceive

✓ Text alternatives for non-text content

✓ Captions and other alternatives for multimedia

✓ Content is easier to see and hear

2. Operable Content

User interface components and navigation must be operable with a variety of tools

✓ Functionality is available from a keyboard

✓ Users have enough time to read and use the content

✓ Content does not cause seizures and physical reactions

✓ Users can easily navigate, find content, and determine where they are

3. Understandable Content

Content on your website must be clear and the functionality should be easy to comprehend

✓ Text is readable and understandable

✓ Content appears and operates in predictable ways

✓ Users are helped to avoid and correct mistakes

4. Robust web pages

✓ Your website must work well enough across platforms, browsers, and devices to support personal choice of user including assistive technologies

See the full list of content guidelines.

Here, we’ll focus on three items under Perceivable Content: colour contrast, resizing of text, and images of text.

A light “A” shines on a dark background and a dark “A” looks on jealously.

Colour Contrast

A contrast ratio of 4.5:1 for normal text is required to meet Level AA. Check your contrast ratio with this tool built for and by web designers.

Contrast will help users with blindness and low vision, or learning disabilities like dyslexia, to easily read what is on the screen.

Here are some exceptions to the 4.5:1 contrast ratio:

• Text that is part of a logo
• Large text that is at least 14–18 pixels and bold can have a contrast of at least 3:1 (for example: titles)
• Text that is a non-essential part of an image (for example: a child reading a book that includes an image of a street sign)

A small “A”, a magnifying glass, and a large “A” above text on a web page.

Resizing Text

Users should be able to resize text on a web page up to 200% without the loss of page content or functionality. Users should also be able to resize text without using assistive technology.

Web developers can allow for text resizing by:

• Specifying font sizes in relative units like em’s or percentages

as well as

• Using responsive web design that expands and contracts the page layout relative to the user’s screen size

An icon of an image file next to text which is describing the image.

Images of Text

Actual text, not images of text, should be used to express information. Text can be stylized using CSS to specify font choices, colour, size, position on the page, etc.

When you include images in your content a description is required for assistive technology to read to disabled users and also for search engine ranking:

“[image] labels and descriptors are all used by Google for indexing purposes…

Better indexing means better ranking in search results.”

— 9 SEO tips for better Google Image search results

What does an accessible website look like?

Dyer & Duman has built accessible websites and web content for Hamilton clients who fall under the categories of 1.) nonprofit and 2.) large organizations (50+ employees) — here are two examples to explore:

• YWCA Hamilton
• Carmen’s Group (C Hotel)

Two brightly coloured arms reach out on their unique paths towards a high five.

Assess your website with an audit

A web accessibility audit is an expert evaluation of your website analyzing how much you comply with the AODA requirements.

Your quote is calculated for a full audit based on:

• Measuring your written and graphic content for readability/visibility
• Measuring your website’s performance and functionality (i.e. page loading speed, tools like onsite search)

You will receive a summary score of these measurements with your quote.

Get an Free Audit Quote

You can use this form to request an audit of your website’s accessibility score.

Be sure to read Part 1: Accessibility and Your Website.