Skip to content

Accessibility fixes for basic front end widgets by applying strategies outlined in a11y course. This repository contains the course files for the Web Accessibility for Developers MOOC and eBook developed by The Chang School at Ryerson University.

Notifications You must be signed in to change notification settings

Kikisek/A11y-course

 
 

Repository files navigation

LearnAria Course Files

The files in this repository accompany the "Web Accessibility for Developers" course, and eBook, created by The Chang School of Continuing Education at Ryerson University, in Toronto, Canada.

Web Accessibility for Developers

There are 10 widgets included in this repository (plus one example widget), that are purposely inaccessible. As part of the course activities, participants learn about WAI-ARIA, and apply what they learn to fix the accessibility of these widgets.

Widgets include:

  • Toggle Buttons (Example)
  • Progressbar
  • Accordion
  • Carousel
  • Tree Menu
  • Navigation Menu
  • Slider
  • Tooltips
  • Tab Panel
  • AutoComplete Form
  • Sortable List

Using These Files

To use these files, course participants (or anyone interested in creating accessible widgets) should:

  1. Fork this repository into their own GitHub account
  2. Rename the forked repository to [username].github.io in the repo's settings
    1. If you already have a GitHub Pages site, rename the repository to "learnaria" and enable it as a subdirectory under your existing site in the repo's settings.
  3. Test your GitHub Pages site by opening https://[username].github.io. (You may need to wait a few moments for the site to become available)
    1. For those with an existing GitHub Pages site, open https://[username].github.io/learnaria
  4. Take the course to learn how to apply WAI-ARIA to add accessibility to the widgets (or read the eBook).
  5. Apply the WAI-ARIA described for each of the widgets in the course, then commit those changes back to your forked repository.
  6. Test the widgets with ChromeVox (the screen reader used in the course) to ensure it functions as expected.
  7. Submit the URL to the widget in the course assignments for marking (in the course see the Rubric for marking details).

Beyond the Course

The Web Accessibility for Developers course will also be available as an ebook, with a link posted here when it becomes available. Those who are unable to participate in the course, or those who would like a reference based on the course, you are encouraged to download the ebook and work through the exercises on their own.

About

Accessibility fixes for basic front end widgets by applying strategies outlined in a11y course. This repository contains the course files for the Web Accessibility for Developers MOOC and eBook developed by The Chang School at Ryerson University.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 56.8%
  • CSS 23.0%
  • HTML 20.2%