Giter Site home page Giter Site logo

jvmoreira / a11y-automation Goto Github PK

View Code? Open in Web Editor NEW

This project forked from melsumner/a11y-automation

0.0 0.0 0.0 1.95 MB

Tracking the available automation for accessibility. What a11y failures can be linted & tested for in an automated fashion?

Home Page: https://a11y-automation-tracker.netlify.app/

JavaScript 49.88% HTML 6.89% Handlebars 17.25% SCSS 25.99%

a11y-automation's Introduction

a11y-automation

Netlify Status

This app is a work in progress; improvements and collaboration are welcome.

The app aims to track a few things:

  • specific ways an app could fail digital accessibility success criteria (called details in this app)
  • automated linting methods available for each detail
  • automated testing methods available for each detail
  • manual testing methods, if they are required

This is an Ember app, which means you'll need to have Ember installed (npm install -g ember-cli) to contribute. Contributions are welcome, and come in many different flavors:

  • filing bugs
  • filing new feature requests
  • submitting a PR to resolve an issue, improve the styling, or add a new feature
  • improving the README or other documentation
  • adding art

Issues that have been evaluated for ease of contribution will have the label pr-welcome, but if you feel confident to participate as a professional, then please do so! PRs that align with the goals of the project will be reviewed.

Contributing

To work on this app locally, follow these steps:

  1. clone this repository -- git clone https://github.com/MelSumner/a11y-automation.git
  2. switch to this app's directory -- cd a11y-automation
  3. run npm install to install missing dependencies
  4. run ember s to build the app. If it all works, it'll be available at http://localhost:4200/ in your browser of choice.

The styles in this app are in the app/styles/app.scss file.

To add assets (such as images or fonts) to the app, place them in the public folder.

Adding Data

The data in this app is stored as individual .md files, which are then converted (automatically!) into .json for use in the application. This makes it fairly straightforward to add a new rule item or tag- it's done by adding a single .md file! Additionally, some generators have been created to streamline this process. (Want to see the automatic conversion in action? After you start the app locally, visit http://localhost:4200/details/all.json to see the compiled JSON output! Neat, huh?)

Add a new detail

To add a new rule file, you can add one manually to the details folder, or you can use the generator to generate the file and put it in the correct location- ember generate details rule-name where rule-name is the name of the rule to be added. Note: Only ONE new rule file should be submitted per pull request unless previously coordinated.

Add a new tag

To add a new tag file, you can add one manually to the tags folder, or you can use the generator file from the command line: ember generate tags tag-name where tag-name is a dasherized version of the criterion. For example, WCAG 1.1.1 becomes wcag-1-1-1 and the entire command would look like this: ember generate tags wcag-1-1-1. Only ONE tag file should be generated per pull request unless previously coordinated.

Questions, Suggestions, or Concerns

If you have any questions, suggestions or concerns, the best way to resolve them is to file an issue on this repo and I'll respond ASAP. I'll also try to list questions I've already been asked, just in case you are wondering about it as well.

Inclusion in Documentation

Although this app currently only tracks linting from ember-template-lint and testing from axe-core, PRs are welcome to add additional linting and testing libraries. Please follow the format in the existing details to allow your PR to be accepted/merged more readily.

Why

Why did I make this an app and not a spreadsheet?

  1. It's depressing to work with Excel and way more interesting to work with code
  2. I wanted to work with broccoli-static-site-json because it's an interesting lib to me
  3. If it's an open source repo means other people can contribute to it, and it can live beyond only me
  4. Other developers can be inspired by the work that still needs to be done in the accessibility space
  5. Maybe other developers will figure out how we can lint or test for a failure item and help solve the problem too
  6. I prefer to do my work in the open where other people can learn from it and also contribute to it

a11y-automation's People

Contributors

melsumner avatar fedqk avatar abdulsamad avatar andrewsnapz avatar minthamie avatar renovate-bot avatar rodrigocnascimento avatar ember-tomster 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.