14
GitHub - marcysutton/empathy-driven-development: Demo Gatsby app for a #noSlides...
source link: https://github.com/marcysutton/empathy-driven-development
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
___ __ ___ __ __ ___
|__ |\/| |__) /\ | |__| \ / | \ |__) | \ / |__ |\ |
|___ | | | /~~\ | | | | |__/ | \ | \/ |___ | \|
__ ___ ___ __ __ ___ ___
| \ |__ \ / |__ | / \ |__) |\/| |__ |\ | |
|__/ |___ \/ |___ |___ \__/ | | | |___ | \| |
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
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK