Designing for AODA Website Compliance
The purpose of this website is to serve as a visual reference guide for website designers and developers, demonstrating the proper implementation of accessible website features in accordance with the Accessibility for Ontarians with Disabilities Act (AODA). The purpose of the AODA law is to ensure that people with disabilities can easily access the internet without difficulty.
Many people with disabilities have difficulties accessing websites, preventing them from fully participating in modern society. This called for the World Wide Web Consortium (W3C) to develop internationally accepted rules and standards; Web Content Accessibility Guidelines (WCAG), that online businesses and organizations must adhere to in order to make their websites fully accessible.
As of January 2021, in the province of Ontario, all public, private or non-profit organizational websites must meet the WCAG 2.1 AA accessibility standards that are based upon specific Success Criteria. external link icon [Ref. www.ontario.ca]
The government’s goal is for Ontario to become fully accessible by 2025.
Why Is This Important?
Website planning and development that neglects to consider the navigational needs of the disabled user, inadvertently creates obstacles that prevent them from participating normally in society. For this reason, it is imperative to begin the website design process with accessibility in mind so as to provide an inclusive and universal access to the world wide web for everyone.
As UX/UI, web designers and developers, it is important that we design and create websites that are accessible for all people to easily access and engage with information on the internet so that they may contribute equally to society.
Who Are We Designing For?
Physical Disabilities
People with physical disabilities may not be able to use a mouse or a trackpad to navigate a website. Websites must be compatible with assistive technology.
Vision Impairments
Vision impairment includes low vision, blindness and color blindness. Information must be provided and accessed in alternative ways.
Hearing Impairments
People with auditory disabilities require transcripts be provided for audio files and captions and subtitles on videos.
Cognitive Disabilities
Website layout, content, navigation and headings should be clearly identifiable, especially for people with cognitive impairments.
WCAG 2.0, 2.1, 2.2 Versions
Content that conforms to WCAG 2.1 also conforms to WCAG 2.0. All requirements 'success criteria' from 2.0 are included in 2.1. All requirements in 2.0 and 2.1 will be included in 2.2. [Ref. https://www.w3.org/]
- WCAG 2.0 was published on 11 December 2008
- WCAG 2.1 was published on 5 June 2018
- WCAG 2.2 was published in 2021
The WCAG Levels of Success Criteria
Each Success Criteria has three levels of accessibility: A, AA and AAA. Each level contains the criteria from the lower levels. If your website complies with Level AA, it is automatically in conformance with Level A. Websites need to meet WCAG 2.1 Level AA in order to be AODA compliant. Meeting Level AAA is not required at this time.
WCAG Level A
WCAG Level A is considered a minimum baseline for accessibility. In Ontario, Level AA is required to meet conformance standards.
WCAG Level AA
Websites should meet WCAG Level AA to be compliant with AODA standards. Level AA contains the success criteria from Level A.
WCAG Level AAA
Level AAA is the highest level of accessibility to achieve but it is not yet required by law. Level AAA contains the success criteria from Level A + AA.
What does Designing for Accessibility Need to Address?
Each of the WCAG Success Criteria are associated with specific website elements that help make a website accessible to all users. According to the Government of Ontario, these elements are organized into three main areas:
image IconWebsite Content
Content refers to information such as text, labels, images, forms, on a web page. Anything that prevents access to website content is considered a barrier. Providing alternative text identifies images to the visually impaired and screen reader users.
user IconFunctionality (UX)
The user's experience should always be enjoyable, seamless and comprehensive. However, even common features can create a negative UX to those with disabilities such as complex forms, navigation and buttons without labels.
desktop IconAppearance (UI)
The appearance of a website (e.g., colours, contrast, font-styling, white-space, button size, etc.) can cause accessibility barriers for some people with disabilities. For instance, individuals who are colorblind cannot distinguish some features.
How To Use this Website
The context for which this website is set is an online flower shop. This was chosen because it incorporates a variety of website content that people encounter daily when navigating the internet such as, images, carousels, product items and purchase forms.
The website pages are organized according to the three main areas described above; Content, Functionality and Appearance. The most common website features and elements that obstruct people with disabilities, such as navigational menus, forms, carousels, colour contrast, etc. are arranged accordingly under these three top-level menu items and are assigned to their own page.
Each web page contains a variety of examples of common features that can cause obstacles to people with disabilities when they are not created with accessibility in mind. The associated WCAG Success Criteria are embedded within these examples to demonstrate their implementation in meet AODA standards.
Click on the icons within the examples to reveal their corresponding WCAG Success Criteria.