Skip to content

novellac/a11ylearn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Scavenger hunt! Fix some basic accessibility issues.

This repository contains two pages - one page, called "index," which has very few (hopefully zero) accessibility issues. The other page, called "mistakes," has at least six types of accessibility errors. Please keep in mind that we've organized these errors along the lines of WCAG guidelines, but that usability and accessibility goes beyond a set of rules. It is a fundamental part of your vocation as a dev to continue to explore and learn about what your users need, and to help the internet be useful and enjoyable for everyone.

Your mission

As a squad, please do the following:

  1. Choose a member to fork the repo.
  2. Each dev should choose at least two of the issue types from the "Resources" section.
  3. Review the /mistakes page and find the type of error you've chosen to address. (Hint: Be sure to read the web pages paired with the issue you've chosen!)
  4. Make a PR which fixes the type of error.
  5. (Optional but helpful) compare your fix with the "known good" page.
  6. In your PR, let others know how you found the error, what parts of WCAG were helpful for finding the error, and anything else you learned. Be detailed!
  7. Have other devs review and merge PRs into your fork.

How to use this code

  1. Clone the repo to your computer.
  2. If you use an IDE like VSCode (recommended for the cohort), then open the repo and click the "Go live" button in the lower right corner of your IDE.
  3. Otherwise, you can open an internet browser, and in the file options, click to open a file. Navigate to one of the HTML files. When you open it, you should see the page.

Resources

Overview of the success criteria: https://www.w3.org/WAI/WCAG21/Understanding/

  1. Missing document language (Understandable)
    1. Resource: WCAG SC3.1.1
  2. Images without alt text (Perceivable)
    1. Resource: WCAG SC1.1.1, Alt Text As Poetry
  3. Insufficient colour contrast (Perceivable)
    1. Resource: WCAG SC1.4.3, WebAIM ContrastChecker
  4. Links with ambiguous text (Operable)
    1. Resources: WCAG SC2.4.4, WCAG Technique F63
  5. Focus outlines (sometimes called focus rings)
    1. Resources: WCAG SC2.4.7, WCAG Technique F78
  6. A series of elements which should be a list (Perceivable)
    1. Resources: WCAG SC1.3.1, WCAG Technique H48
  7. An element styled to look like a heading, but isn't (Perceivable)
    1. Resources: WCAG SC1.3.1, WCAG Technique H42

About

Learn some a11y and WCAG basics on a smol scavenger hunt.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages