#a11y 🦻
Hello friends!
I hope you're enjoying this Serial Maker newsletter! You can now join me and other Serial Makers on Discord. Check out the past editions if you missed them. And if you know someone who might benefit from this newsletter, please forward this email to a friend 😀
Lately, I've been working to bring a few products up to snuff in regards to 508 compliance, the U.S. government standard for accessible products for individuals with disabilities.
This issue is all about accessibility 🦻
TL;DR
Try using digital products with accessibility features turned on
Understand the standard
Use a tool for automatic accessibility standards scanning
Understanding accessibility
The best way to understand what it's like to use technology with a disability is to try it out for yourself. I highly recommend everyone try this even if you're not developing an accessibility standards-compliant product. If anything, you'll gain a new understanding of how important accessible products are.
On your computer, try disconnecting your mouse, and navigating the web with only your keyboard.
On your iPhone, go to Settings > Accessibility and turn on VoiceOver. Try navigating your iPhone with only VoiceOver commands, or attach a Bluetooth keyboard and navigate only with the keyboard.
On Android, go to Settings > Accessibility and turn on Screen reader Voice assistant. Attach a Bluetooth keyboard, and navigate your Android phone with TalkBack.
You'll get a real appreciation for what it's like to try and use an app or site that's not accessibility standards-compliant.
Good luck navigating back to Settings to disable these accessibility features 😉
Testing accessibility
Luckily, there are a number of tools available for testing accessibility compliance. Here's a shortlist for some platforms and frameworks.
Stark
Integrated accessibility compliance tools for Sketch, Adobe XD, and Figma. Instantly check if your contrast ratio between foreground and background colors meets AA or AAA standards right from your favorite design program.
AbleNet
AbleNet is the leading manufacturer of assistive technology. If you want to test with an actual assistive technology device, like a switch instead of a keyboard, buy one and use it in your app.
react-axe
Accessibility auditing for React.js applications.
iOS Simulator Accessibility Inspector
The Accessibility Inspector will overlay accessibility information for each UI element in your app, including the accessibility label and traits.
Android Accessibility Scanner
The Accessibility Scanner app will scan your app and suggest accessibility improvements like enlarging small touch targets, increasing contrast, and providing content descriptions for interactive elements.
If you know of any other tools or tricks for accessibility, please reply and let me know.
Keep making, and thanks for reading! 🙌
Hit reply to tell me what you're making. I'm looking for anyone interested in talking about their own side-projects and maker journey, so speak up if you'd like to appear in Serial Maker. I'd also love to know what you thought of this issue, and what you want to hear about in the future. And don't forget to continue the conversation on Discord!
Until next week,
Craig