I recently deployed a side project I've been working on for some time - Up Your A11y. Up Your A11y is a collection of tutorials and articles about - you guessed it - accessibility in web applications, and its content has a bias towards React development.
Why did I start Up Your A11y?
Through working on a project with a large national brand, my eyes were opened to just how little I understood about web accessibility, despite working with web apps for some time. A few things really struck me:
Accessible practices had been far from central to my way of approaching development, and were more of an afterthought
There was a lot I took for granted in terms of accessibility having come originally from an Android app development background. It seems there are a lot more things to be mindful of in web development
Almost everyone in my engineering team felt they could learn more about how our apps should perform in terms of keyboard and screen reader usage
I soon fell down a rabbit hole of learning, and I started collecting notes and examples to more easily refer back to later. These notes became a "lunch and learn" session for my colleagues, and later I decided to write them up into short articles and tutorials and share them online, in the hope that it will help someone else in a similar position to me.
Why the React focus?
Where I found it most difficult to find resources, examples and answers was where the accessibility concern I was trying to address was directly tied to coding Single Page Applications. I found myself lost on route changes, with focus seemingly in random places. I realised I'd taken for granted my nifty component was fit for purpose across different locations in my app without considering the heading level etc. I hadn't properly considered page titles, and so on.
I’ve given Up Your A11y a React bias, partly because it's what I know, but also because it's those React/SPA specific topics that represented the biggest 'Aha!' moments for me. While the React docs are great, I think it's useful to gather those React-specific considerations together alongside more general accessibility principles and tutorials.
What next?
I'm learning every day, and hope to keep expanding Up Your A11y with more topics and examples. I don't know if others will find the content I've put together helpful, but it would have definitely helped "past me", and I'm really glad to have the additional motivation to learn more about accessibility!
If you'd like to visit the site, you can find it at www.upyoura11y.com. I'm always grateful for feedback so feel free to reach out.
Did you find this post useful? Please consider buying me a coffee so I can keep making content 🙂
Top comments (5)
Thank you Suzanne for the awesome a11y focused site (w/ React)~
As I was going thru your posts, I saw gists used as they are.
e.g.) upyoura11y.com/page-titles/
Are gists accessible by default thus require no a11y changes?
That's such a good question and to be honest I would love to hear what other people think are the best ways to share code snippets for accessibility!
I used gist because out of the bag they read out line number + code, but Axe lint for example flags some issues as it can't determine the color contrast (I had to check a lot manually!), so I wonder if there is a better solution. Researching this is on my to do list for sure.
Thank you and looking forward to your research~ 😀
I'll definitely be sure to write a post about it with my findings 🤓 ♥️
Thank you for this!