Page Comparison

...

Sites behind authentication

• WAVE (browser plugin), https://wave.webaim.org/

• Lighthouse - (built into Chrome dev tools)

• axe DevTools (browser

...

• plugin)

• https://www.craigabbott.co.uk/blog/axe-core-vs-pa11y/

• Coblis - Color Blindness Simulator

• 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.

• Common HTML Patterns

• 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:

• Estelle Weyl – “Fast. Simple. Accessible.“

• 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/

• https://dev.to/sarveshh/how-to-implement-aria-tags-for-better-accessibility-a-comprehensive-guide-for-web-developers-h3k

General References

1. https://developer.mozilla.org/en-US/docs/Learn/Accessibility

2. https://www.w3.org/TR/html-aria/

3. https://www.w3.org/TR/wai-aria-1.1/ .

Links to extra support and other resources

• https://uwaterloo.ca/digital-accessibility

• https://uwaterloo.ca/web-resources/resources/accessibility

• WCAG2.1 Help Tool

• https://picocss.com/

• "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/