1. What is Accessibility?

Accessibility is not a checkbox to be ticked in a list or requirements. Instead, it is a tool that helps to design for people, those that have been ignoring for years.

Accessibility is the concept of whether a product or service can be used by everyone—however they encounter it. Accessibility laws exist to aid people with disabilities, but designers should try to accommodate all potential users in many contexts of use anyway. To do so has firm benefits—notably better designs for all.
— Interaction Design Foundation

Levels of accessibility

There are 3 levels of accessibility compliance in the WCAG, which reflect the priority of support.

WCAG A (essential)

If this is not met, assistive technology may not be able to read, understand, or fully operate the page or view.

WCAG AA (ideal)

Required for multiple government and public body websites. You may pursue AA compliance, at least.

New AODA requirements for Ontario websites

WCAG AAA (specialized)

This is reserved for parts of websites and web apps for a specialized audience.

2. Accessibility best practices for content

Content is the most important part of your site. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements.

Plain language

Use plain language writing to make important information and ideas more accessible to all people.

• Use plain language and avoid figures of speech, idioms, and complicated metaphors
• Write content at an 8th grade reading level

Check Readability Analyizer

Buttons

Buttons are used to trigger an action or event.

• Make sure that button, a, and label element content is unique and descriptive
• Avoid terms like “click here” and “read more”, they do not provide any context

Language direction

Text and numbers should always be in the correct direction for the language to ensure content is easy to understand.

• Use left-aligned text for left-to-right (LTR) languages
• Use right-aligned text for right-to-left (RTL) languages
• Avoid centered-aligned or justified text because is difficult to read

Accessible images

Images are a very common part of most websites. Help make sure they can be enjoyed by all.

• Use alt attributes (alt text) to give a description of an image for people who may not be able to view them
• Make sure that all img elements have an alt attribute
• Make sure that decorative images use empty alt attribute values (alt="")
• Provide a text alternative describing all visible information for complex images such as charts, graphs, and maps
• Avoid informative text or paragraphs on images
• For images containing some text (decorative, logos), make sure the alt description includes the image’s text (the OCASI logo should have an alt value of “OCASI”, e.g.)

Headings

Introducing content

Heading elements (h1, h2, h3, etc.) help you break up the content of the page into related “chunks” of information.

• You may use heading elements to introduce content
• Heading elements construct a document outline, and should not be used for purely visual design
• Use only one h1 element per page or view to communicate the high-level purpose of the page or view

Headings sequence

Missing or improper headings is one of the ten most problematic issues experienced by people who rely on assistive technology to navigate the web, and it is an easy fix.

• Heading elements should be written in a logical sequence, the order of the elements should descend based on the “depth” of the content.
• Don’t skip heading levels, do not jump from a h2 to a h4, skipping h3 elements
• If heading levels are being skipped for a specific visual treatment, use CSS classes instead

Lists

Lists elements let people know that a collection of items are related, if they are sequential, and how many items are present in the list grouping.

• Use list elements (ol, ul, and dl elements) to list content
• Include sections of related content, items visually displayed in a grid-like layout, or sibling elements
• Use proper HTML elements in lists and do not put them on the same line as text

Colour contrast

Colour contrast is about how legible colours are when placed next to, and on top of each other.

Normal text

• Check the contrast for all normal-sized text (level AA compliance requires a contrast ratio of 4.5:1)
• Check the contrast for all large-sized text (level AA compliance requires a contrast ratio of 3:1)
• Check custom ::selection colours in your CSS declaration

Graphical elements

• Check the contrast for all icons (level AA compliance requires a contrast ratio of 3.0:1)
• Check the contrast of borders for input elements, such as text inputs, radio buttons, or checkboxes (level AA compliance requires a contrast ratio of 3.0:1)
• Check text that overlaps images or video by asking yourself if text is still legible

Links

• Check the contrast for all the underlined text links (level AA compliance requires a contrast ratio of 3:1 from their surrounding text)
• Check the contrast for all the non underlined text links (level AA compliance requires a contrast ratio of 4.5:1 against their background colours)

Tools for colour contrast

• WebAIM contrast color checker
• The contrast triangle for text links
• Contrast grid

Tools for colour blindness

• ‘Who Can Use’ colour combinations
• Sim Daltonism (on the Mac App Store)

Audio

Transcripts allow people who cannot hear to still understand the audio content.

• Confirm that transcripts are available
• Format the transcripts

Video

Do some video-specific checks:

• Confirm the presence of captions that allow a person who cannot hear the audio content of a video to still understand its content
• Remove seizure triggers since certain kinds of strobing or flashing animations will trigger seizures

Tables

Tables are a structured set of data that help people understand the relationships between different types of information.

• Use the table element to describe tabular data, most probably rows and columns are not needed
• Use the th element for table headers with appropriate scope attributes (scope="col" for column headers, and scope="row" for row headers)
• Use the caption element to provide a title for the table

3. Write accessible emails

The following are some standards for you to write a regular email at work.

About content:

• avoid “click here” wording for links
• describe hyperlinks and images (if any)
• know well semantics for headings
• simplify signatures

About style:

• write clean text (better use plain text)
• use a single font
• for font sizes, use default or 16px or bigger sizes
• use very dark grey or black colours, do not use multiple colours
• highlight text with bold tags, not colours

4. Checklist for designers and developers

Global code

Global code is code that affects your entire website or web app.

• Validate your HTML
• Use a lang attribute on the html element
• Provide a unique title for each page or view
• Ensure that viewport zoom is not disabled
• Use landmark elements to indicate important content regions
• Ensure a linear content flow
• Avoid using the autofocus attribute
• Remove session timeouts
• Remove title attribute tooltips

Keyboard

It is important that your interface and content can be operated and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.

• Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input
• Check to see that keyboard focus order matches the visual layout
• Remove invisible focusable elements

Check the interactions for keyboard testing, WebAIM.org

Controls

Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.

• Use the a element for links
• Ensure that links are recognizable as links
• Ensure that controls have :focus states
• Use the button element for buttons
• Provide a skip link and make sure that it is visible when focused
• Identify links that open in a new tab or window

Forms

Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.

• All inputs in a form are associated with a corresponding label element
• Use fieldset and legend elements where appropriate
• Inputs use autocomplete where appropriate
• Make sure that form input errors are displayed as a list above the form after submission
• Associate input error messaging with the input it corresponds to
• Make sure that error, warning, and success states are not visually communicated by using colours only

Appearance

Some users change the appearance of their browsers. For example, use a bigger zoom to make content larger in size. You may check your content in specialized browsing modes.

• Increase text size to 200%
• Double-check that good proximity between content is maintained
• Make sure colour isn’t the only way information is conveyed.
• Use a simple, straightforward, and consistent layout

Mobile and touch

User behaviours on mobile devices may be different from desktop computers. You may check that your site still performs on different scenarios.

• Check that the site can be rotated to any orientation
• Remove horizontal scrolling
• Ensure that button and link icons can be activated with ease
• Ensure sufficient space between interactive items in order to provide the user with a scroll area

Media

Media includes content such as pre-recorded and live audio and video.

• Make sure that media does not autoplay
• Ensure that media controls use appropriate markup
• Check to see that all media can be paused

Animations

Animated interfaces can cause headaches, dizziness, and other issues for many people. Even you can experience side effects when exposed to excessive motion on the screen for a longer period of time.

• Ensure animations are subtle and do not flash too much
• Provide a mechanism to pause background video
• Make sure all animation obeys the prefers-reduced-motion media query

5. Documentation and guidelines

Accessibility for Ontarians with Disabilities Act (AODA)

Enacted in 2005, its purpose is to improve accessibility standards for Ontarians with physical and mental disabilities to all public establishments by 2025.

Accessibility for Ontarians with Disabilities Act (AODA)

Accessible Canada Act

Received its final reading in 2019, the Accessible Canada Act builds on the Canadian Human Rights Act, focusing on the prohibition of discrimination based on disability.

Accessible Canada Act

Web Content Accessibility Guidelines (WCAG)

First published in 1999, the Web Content Accessibility Guidelines are part of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, which is the main international standards organization for the Internet.

Web Content Accessibility Guidelines (WCAG) 2.1

The A11Y Project

The A11Y Project is a community-driven effort to make digital accessibility easier. It is committed to creating and maintaining an accessible, inclusive environment. It is a resource that is intended to be able to be used by everyone.

A11Y Project