___ __ ___ __ __ ___
|__ |\/| |__) /\ | |__| \ / | \ |__) | \ / |__ |\ |
|___ | | | /~~\ | | | | |__/ | \ | \/ |___ | \|
__ ___ ___ __ __ ___ ___
| \ |__ \ / |__ | / \ |__) |\/| |__ |\ | |
|__/ |___ \/ |___ |___ \__/ | | | |___ | \| |
Empathy Driven Development
https://github.com/marcysutton/empathy-driven-development
By Marcy Sutton / @marcysutton
Head of Learning, Gatsby
Outdoor Trip Planner App
The master branch of this repository is intentionally broken for accessibility. For fixes, check out the fixes branch.
Components
- Collapsible sidebar menu
- Form
- Carousel
- Modal dialog
- Card flip
How to run the app
Clone the directory and install dependencies:
git clone https://github.com/marcysutton/empathy-driven-development && cd empathy-driven-development
npm install
Then you can run Gatsby in development or production mode:
gatsby develop
or:
gatsby build && gatsby serve
Run tests
Run Cypress tests on the command line:
npm run test
Who are you designing/building for?
- PEOPLE, who are diverse creatures.
- 15% of the population has some kind of disability. http://www.who.int/disabilities/world_report/2011/report/en/
- Donβt leave people behind.
Don't reinvent the wheel
- ARIA Authoring Practices https://www.w3.org/TR/wai-aria-practices-1.1/
- Accessibility: the Beginners Guide https://www.deque.com/accessibility-beginners-guide/
- Deque University https://dequeuniversity.com
- Egghead.io A11y course https://egghead.io/courses/start-building-accessible-web-applications-today
- Udacity Course https://www.udacity.com/course/web-accessibility--ud891
- Notes on Client-Rendered Accessibility https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/
- Accessibility Tips in Single Page Applications https://www.deque.com/blog/accessibility-tips-in-single-page-applications/
- aXe Accessibility Testing Tools https://deque.com/axe
- Writing automated tests for accessibility https://www.24a11y.com/2017/writing-automated-tests-accessibility/
Test with real people
- Manual testing: content quality, contrast edge cases, error validation messaging, event handling & interactions
- More on manual testing: https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/
- Usability testing with people with disabilities https://access-works.com
In this app
- cypress-axe https://www.npmjs.com/package/cypress-axe
- axe-core https://www.npmjs.com/package/axe-core
- Inert polyfill https://github.com/WICG/inert
- What Input https://github.com/ten1seven/what-input
- Focus Trap React https://github.com/davidtheclark/focus-trap-react