The-Internals / Deep-dive-into-A11y

Diving deep into A11y

1. Types of issues in accessing the web.
2. Assistive Tech (Screen reader, Switch, adaptive controller etc)
3. A11y trees - How browser understands
4. Role of semantics on A11y
5. Tab and Keyboard navigation
6. Focus trap in modal
7. Impact of using Unicode, and Icons, emojis.
8. Client-side routing Impact on A11y
9. Issues with infinite scroll
10. Tooling for A11y //code

Code snippets

1. Focus trapping in Dialog
2. Focus on keyboard navigation
3. Tooling for a11y

Misc

1. Gist of different do's and don't and snippets

Resources

• digitala11y.com
• Writing HTML with accessibility in mind https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
• Writing CSS with Accessibility in Mind https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
• Writing JavaScript with accessibility in mind - Manuel Matuzovic https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9
• JavaScript is not an enemy of accessibility! – Marco's Accessibility Blog https://marcozehe.wordpress.com/2016/11/23/javascript-not-enemy-accessibility/
• The Three Developers and the Insightful User Tester https://www.24a11y.com/2017/three-developers-and-the-insightful-user-tester/
• All about Web accessibility https://link.medium.com/2HKNbecmf5
• https://link.medium.com/3QwcW2imf5
• Deciding semantic html tag http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

Free course:

• https://classroom.udacity.com/courses/ud891

Wiki

• https://en.wikipedia.org/wiki/Accessibility

Checklist

• https://www.wuhcag.com/wcag-checklist/

Matzo blog

• https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/

Others

• https://a11y-style-guide.com/
• https://a11yproject.com
• https://developer.yoast.com/the-a11y-monthly-making-modals-accessible/
• https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
• https://github.com/The-Internals/Deep-dive-into-A11y/blob/master/tooling.md
• https://patrickhlauke.github.io/aria/demos/modal/index-aria-inert.html