Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Resources from my talk on accessible docs 🧑

A11y-Friendly Documentation

πŸ–₯ PDF Slides πŸ“ Abstract 🌐 a11y-friendly-docs.netlify.com/ πŸ“Ή Video

Readings

πŸ“– Quick tip: a11y and a brief numeronyms primer
The A11y Project explains what the heck "a11y" actually is.

πŸ“– Accessibility For Everyone by Laura Kalbag
An excellent book from Laura Kalbag that covers everything from what it's like to use the web with a disability to a11y testing your websites.

πŸ“– Assistive technology report
According to the World Health Organization, over one billion people globally need an assistive device.

πŸ“– Myth: Accessibility is 'blind people'
Dave Rupert describes the four categories of accessibility.

πŸ“– The Business Case for Digital Accessibility
The W3 outlines the unexpected business perks of building accessible websites.

πŸ“– A Vision of Coding, Without Opening Your Eyes
Florian Beijers, who has been blind since birth, talks about how he learned to code and the challenges he faced.

πŸ“– Planning for Accessibility
While this article is also by Laura Kalbag, it includes a quote from Anne Gibson that perfectly explains why you should care about building accessible websites even if you're not the one writing the code.

πŸ“– Hack on MDN: Better accessibility for MDN web docs by Janet Swisher
In September 2018, MDN hosted an a11y hackathon for their web docs and this blog post talks about the outcomes of that weekend.

πŸ“– This is for everyone - Government design principles
The design principles enforced by the UK Government, with the link skipping directly to number 6.

Tools

πŸ›  Color Oracle
Desktop app that allows you to quickly grayscale your screen or check it from the perspective of various types of colorblindness.

πŸ›  WebAIM Color Contrast Checker
By putting in the hex of your background color, foreground color and font weight, you can see if your text will be compliant with accessibility standards.

πŸ›  Hemingway Editor
A web app (and linter) that highlights problematic words/sentences and offers suggestions. You want to aim for a Grade 8 reading level or lower.

πŸ›  WCAG - Web Content Accessibility Guidelines
Internationally recognized, adopted standards produced by the W3C to help us build a more accessible web.

πŸ›  Firefox Accessibility Inspector
Additional developer tools with features like an accessibility picker and highlighting of UI items.

πŸ›  axe
An open source rules library for a11y testing.

πŸ›  WAVE Browser Extension
An evaluation tool that provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.

πŸ›  The A11y Project's Web Accessibility Checklist
Thorough checklist that you can use, reference and adapt for your own project.

Assistive Technologies πŸ‘©β€πŸ’»

πŸ€– JAWS
πŸ€– Apple's VoiceOver
πŸ€– NVDA
πŸ€– Microsoft's Narrator
πŸ‘€ Dwell Control

Code Examples

πŸ— HTML - HyperText Markup Language
πŸ— ARIA - Accessible Rich Internet Applications

Documentation Examples

For keyboard navigation, focus indicators and skip links:
πŸ› Shopify's Developer Portal
πŸ‡¬πŸ‡§ Gov.UK
πŸ¦– MDN Web Docs

Colorblind-friendly:
πŸ“Š Trello

Public documentation accessibility policy:
β˜•οΈ Oracle

Mentioned Talks

🎀 Sergei Kriger at ID24
Detailed information about building accessible SVG charts.

🎀 Ashley Bischoff at Fronteers
Straightforward techniques and approaches to plain language in documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.