Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appfolio/a11y-academy
https://github.com/appfolio/a11y-academy
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/appfolio/a11y-academy
- Owner: appfolio
- Created: 2019-09-06T23:50:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-27T22:41:04.000Z (about 3 years ago)
- Last Synced: 2023-04-10T11:41:18.218Z (over 1 year ago)
- Language: TypeScript
- Size: 783 KB
- Stars: 0
- Watchers: 10
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Developing for Accessibility
This repository covers the content for the Developing for Accessibility academy session.
This app is built on top of [Create React App](https://create-react-app.dev) and [Reactstrap](http://reactstrap.github.io/)
## 🏅 #Goals/Learning Outcomes
- Learn guiding principles for developing for accessiblity
- Use accessible HTML
- Use a pattern/component library so it's easy to be consistently accessible
- Use automated tools to test the accessibility of your app
- Manually audit your site because automated tools can't catch everything 😅
- Learn how to use automated tools for developing accessible apps
- Static code analysis
- Automated tests
- Browser extensions
- Learn to fix common accessibility mistakes
## 🚀 Starting the project
The `fixme` branch has a bunch of accessibility violations to fix.
```
git checkout fixme
```
### Install dependencies
```
npm install
```
### Start the app
```
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Note that if there are Typescript errors, the app won't compile. To bypass this set the environment variable `TSC_COMPILE_ONERROR=true`, e.g.
```
TSC_COMPILE_ONERROR=true npm start
```
### Run the linter
```
npm run lint
```
### Run tests
This project uses [axe-core](https://github.com/dequelabs/axe-core) to automate accessibility testing.
```
npm test
```
## ⚠️ Fixing Violations
- [Page Title](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
- [Cards](https://inclusive-components.design/cards/)
- [Skip navigation links](https://webaim.org/techniques/skipnav/)
- [Bootstrap screeen reader utilities (v4)](https://getbootstrap.com/docs/4.6/utilities/screen-readers/)
- [Bootstrap visually hidden utilities (v5)](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/)
- [Button](http://w3c.github.io/aria-practices/#button) - don't add click handlers to `
`s - just use a button 🙂
- [Link](http://w3c.github.io/aria-practices/#link) - great for navigating to another page or to a section of the current page. Links != buttons
- [Main landmark](http://w3c.github.io/aria-practices/#aria_lh_main)
- [Forms](http://w3c.github.io/aria-practices/#aria_lh_form)
- ``
- Placeholders are not labels
- `` and `` need to be siblings because of [Bootstrap](https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios)
- [Grouping items in select elements](https://www.w3.org/WAI/tutorials/forms/grouping/#grouping-items-in-select-elements)
- [Disclosure](http://w3c.github.io/aria-practices/#disclosure) - an element for showing and hiding text
- [Tooltips](http://w3c.github.io/aria-practices/#tooltip)
- [Tables](http://w3c.github.io/aria-practices/#table)
- main focus is using semantic HTML
- [Images](https://www.w3.org/WAI/tutorials/images/)
- [Page Language](https://www.w3.org/TR/WCAG20-TECHS/H57.html)
- [aria-hidden](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden)
## 🎓 Resources
### Learn More
- [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/)
- [Web Content Accessibility (WCAG) Guidelines 2.1](https://www.w3.org/TR/WCAG21/)
- [Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/)
- [a11y project](https://a11yproject.com)
### Browser Tools/Extensions
- [axe](https://www.deque.com/axe/) (Chrome, Firefox)
- [WAVE Browser Extensions](https://wave.webaim.org/extension/) (Chrome, Firefox)
- [Accessibility Insights](https://accessibilityinsights.io) (Chrome)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse/) (built into Chrome)
- [Web Inspector Audits](https://webkit.org/blog/8935/audits-in-web-inspector/) (built into Safari Technology Preview)
### Development Tools
- [eslint-plulgin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - ESLint plugin for accessibility rules on JSX elements
- [axe-core](https://github.com/dequelabs/axe-core) - an accessibility testing engine
- [axe Linter (VSCode)](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter) - an editor plugin that checks for accessibility issues
- [axe Linter (GitHub app)](https://github.com/marketplace/axe-linter) - automatically finds and fixes issues on GitHub pull requests
### Core Library Accessibility Docs
- Bootstrap Accessibility
- [v4 docs](https://getbootstrap.com/docs/4.6/getting-started/accessibility/)
- [v5 docs](https://getbootstrap.com/docs/4.6/getting-started/accessibility/)
- [React Accessibility](https://reactjs.org/docs/accessibility.html)
### Other Libraries
- [React Testing Libary](https://testing-library.com/docs/react-testing-library/intro) - a general purpose testing library for React (replacement for Enzyme) with accessibility as a first class concern
### Other Stuff
- [VoiceOver Keyboard Shortcuts on a Mac](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
This project was inspired by Marcy Sutton's [Empathy Driven Development](https://github.com/marcysutton/empathy-driven-development) project and her [talk at JSConf EU 2018](https://www.youtube.com/watch?v=l95VFLj3e2w).
Special thanks to Brianna Koch and Nic Bertino for their help in developing this course.