Accessibility - AODA
Lets start a wiki on this… The ideal is to keep this a short 5 minute read that covers the basics. Link to more advanced documents/resources. This is a living document please!!! feel free to make changes! I’ll leave spelling mistakes so your forced to make some edit :)
Requirements - WIP
“University has an obligation to meet Web Content Accessibility Guidelines WCAG 2.0 Level AA for all public websites” (target 2025)
Who must comply
As of January 1, 2021, the AODA requires you to make all public websites accessible if you are either:
a designated public sector organization or
a business or non-profit organization with 50 or more employeesThe organization that controls the website (either directly or through a contractual relationship) must meet the accessibility requirements.
These requirements only apply to websites and web content published on a website after January 1, 2012.
Internal websites
You do not have to make your internal website (intranet or extranet) meet WCAG 2.0 levels A/AA.
However, if an individual asks you to make content available to them in an alternate accessible format (such as large print or braille), you must work with the individual to meet their needs.
The Government of Ontario and Legislative Assembly of Ontario must make their internal websites meet WCAG 2.0 levels AA.
What about password protected staff and student sites?
Guidance
Always write HTML code with accessibility in mind!
Make your HTML code as semantic as possible.
Semantic elements are elements with a meaning; if you need a button, use the <button>
element.
Examples of non-semantic elements:
<div>
and<span>
- Tells nothing about its content.Examples of semantic elements:
<form>
,<table>
, and<article>
- Clearly defines its content.
Use alt
attribute to describe images.
Use clear language:
Keep sentences as short as possible
Avoid characters that cannot be read clearly by a screen reader
Avoid dashes. Instead of writing 1-3, write 1 to 3
Avoid abbreviations. Instead of writing Feb, write February
Avoid slang
A link text should explain clearly what information the reader will get by clicking on that link.
Checkers
Public sites
Siteimprove
Sites behind authentication
WAVE (browser plugin), https://wave.webaim.org/
Lighthouse (built into Chrome dev tools)
axe DevTools (browser plugin)
a Firefox web developer addon, https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Tutorial
I am not sure how useful LinkedIn learning is for this.
Basic
These tutorials have html examples.
https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
https://www.a11yproject.com/posts/2014-05-15-getting-started-aria/
https://www.a11yproject.com/posts/2020-08-20-an-indepth-guide-to-aria-roles/ .
These videos have html examples:
Kevin Powell’s playlist on Underutilized HTML elements
Kevin Powell’s playlist on https://www.youtube.com/playlist?list=PL4-IK0AVhVjMobWfe4VmvbAwLmpG1RQMT
Introduction to WAI-ARIA (Accessible Rich Internet Applications)
Advanced
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
https://blog.logrocket.com/aria-live-regions-for-javascript-frameworks/
General References
Links to extra support and other resources
"Check Web Site’s (X)HTML & CSS, Accessibility & SEO," https://www.webnauts.net/check.html
https://www.smashingmagazine.com/2024/02/accessibility-standards-empower-better-chart-visual-design/