What is A11yTune
A11yTune is an accessibility puzzle hunt developed to try and teach some React Native accessibility concepts in a (hopefully) fun and interactive way.
I wrote it based on lessons me and my team have learnt on our last mobile project, using our documentation, React Native's accessibility docs, and React Native AMA as references.
This site contains a series of challenges based on a mobile app for a fictional record seller - A11yTune. Each challenge focuses on a screen of the app, which has several accessibility issues. I've indicated some things that are wrong with each screen, and it's up to you to do some clever googling to learn how to fix them. Any code you write will be updated in the app, which you can run on your phone, and you can use the website to re-test your code to see if the issues have been solved.
It is entirely possible you will solve a challenge in a way I haven't foreseen, or that the pacing of these challenges could use some adjusting, or that you know a better accessibility approach a challenge should be suggesting instead - I'm always keen to learn more, if you have any feedback or improvement suggestions please send them over to bianca.darolti@softwire.com
What do you need to get started
- A phone with Expo Go installed
- Optionally some earphones if you'd like to test screen reader features quietly
A couple of quick notes before you start
- In each of the challenges, you'll need to make some edits to code. Unfortunately, the built-in IDE won't alert you to any errors in your code, but Expo Go will when you run the code on your device.
- If you're having issues getting the code to load in Expo Go, quitting and restarting the Expo Go app usually sorts this out.