Giter VIP home page Giter VIP logo

a11ylearn's Introduction

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

a11ylearn's People

Contributors

novellac avatar paola4 avatar ginacastromonte avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.