At the start of this Hacktoberfest, I set myself a challenge: to make my four Pull Requests by finding and contributing to accessibility issues. I made a simple page on my website Up Your A11y to help find the right kind of issues, and I wrote about it here on DEV:
This week all four of my PRs were merged, and so I thought I'd share my contributions, and what I learned in the process!
1. 30 Seconds of Interviews: Adding to Questions about Accessibility
My first pull request was for 30 Seconds of Interviews. It's a great open-source project that pulls together content to help developers prepare for interviews. They had identified they needed more accessibility questions, and this seemed like a great way to share some knowledge and help get developers thinking about web accessibility!
My contribution
My PR added some content to answer one of the most common questions I've found in web app accessibility - how to handle route changes. I've written before on the topic here on DEV, so it seemed like a natural fit:
What I got out of it
The most rewarding thing about this contribution was to see the multiple other PRs contributing to the same Issue with their a11y knowledge. It was so positive and motivating! Check out the issue if you like, you'll see so many great contributions: Accessibility Questions #172
2. DDD East Midlands: Fixes for Inaccessible Icon Links
DDD East Midlands is a not-for-profit technology conference for the East Midlands in the UK. They had raised an issue in their repo noting that they needed to audit their website for accessibility.
I used Axe Chrome Extension to do a quick audit of their pages, and noticed recurring issues where icons were used as links without any associated text. The links therefore were not perceivable by screen reader users.
My contribution
My PR tweaked their usage of links with Font Awesome icons. The fixes were very simple, adding an aria-label to the link attributes to ensure the link destination is announced to screen reader users, without any impact on the current visuals. You can see the PR here: A11y Enhancements for Icon Links
What I got out of it
It was great to be able to contribute to an organisation doing so much for developers in their local area! It was also good timing for me, as I'm currently putting together a tutorial on accessible handling of imagery for my website Up Your A11y, and it was a great reminder to me to include icon fonts when thinking about this. Libraries such as Font Awesome are very widely used, but require a few extra steps to be accessible.
3. GatsbyJS: Documentation Fixes
GatsbyJS raised a Hacktoberfest issue that's been really popular in the last week or so - an audit of their documentation to check for compliance with their style guide. What drew me to this issue was the requirement:
Fix the heading order of a doc to create an accessible content hierarchy (e.g. removing an extra h1, making headings go in order, etc.)
The docs are written in Markdown, and much like here on DEV, many times users forget to ensure proper heading hierarchy. I've written here about the importance of heading levels before, so this seemed perfect for me take on.
My contribution
A simple Pull Request fixing a set of markdown files to make sure the heading levels are accessible, as well as fixes to bring the content in line with the Gatsby style guide.
What I got out of it
I'm a big fan of Gatsby, and have been intending for a long time to start making some contributions to their project - this issue helped me do just that! Heading levels are so important for screen reader users; I'd actually just been tweeting about that right before I found this issue:
Navigating through headings on a page is how almost 70% of respondents will try to find relevant content - making sure you're using the correct heading levels is key to engaging these users! A tool like Axe or Wave will help you see where you may have issues with your headings 🤓 twitter.com/webaim/status/…07:12 AM - 30 Sep 2019WebAIM @webaimResults of WebAIM’s 8th Screen Reader User Survey - https://t.co/iUCuqBPWdn Some interesting results: - NVDA takes a bite out of JAWS and is now the most common screen reader - Chrome usage increased 3X making it the most used browser - IE usage still at 14.5% - PDF = problems
(Also Gatsby give you a discount code for some free swag when you make your first contribution to them - I didn't realise that when I contributed but it was a lovely surprise afterwards!)
4. Oh My Form: Accessibility Fixes for Pre-Login Pages
Oh My Form is a free, open-source alternative to Google Forms or TypeForm. They'd identified some areas of their app that needed audited for accessibility, particularly around color contrast, although they knew they had some more work to do to identify further issues too.
My contribution
To help limit the scope of the PR, I focused on a set of three pages that are presented to the user pre-authentication: Login, Register, and Recover Password. I ran a quick audit of these pages (again using the Axe Chrome Extension), and implemented fixes including:
- Adding semantic HTML landmark elements
- Adding labels to form fields currently relying on placeholders
- Adding a descriptive
h1on each page - Creating variables for easy use of scalable font-size units instead of
px
You can see the full PR here, if you like: Accessibility fixes for login, register and recover pages
What I got out of it
This was really my most rewarding experience of Hacktoberfest - we had some great discussion on the original Issue thread, and I learned some more about the commonly accepted requirements in the US vs here in the UK.
It felt great to connect with people who are trying to build something genuinely helpful for people, and have an eye on the need for this to be accessible to all. I hope in future I'll be contributing to their project again!
Final Thoughts
Honestly I thought I would struggle with Hacktoberfest, in terms of finding the time to contribute and also in terms of the challenge I'd set myself to find a11y-focused issues. It turned out that many open-source projects just need a small helping hand to either identify their a11y issues, or to implement quick fixes that make a big impact.
Going forward, I'm going to leave the page up at Up Your A11y: Open A11y OSS Issues Looking for Help, and I plan to try and make at least one OSS contribution each month.
Could Your OSS or Personal Project Use an A11y Audit?
I'm also planning to assist OSS projects by offering short accessibility audits for their apps. I'd be happy to do the same for some personal projects too. What I found throughout these few weeks was many Issues like "Find out what the heck we need to about a11y" - far more than specific bugs needing help.
I'd like to gain more experience doing accessibility audits, so if your project needs some help with this, let me know either here or on Twitter @s_aitchison and we can have a chat.
Did you find this post useful? Please consider buying me a coffee so I can keep making content 🙂
Top comments (2)
I love this! I was looking for all kinds of a11y issues for my first Hacktoberfest :) Thanks for sharing!
Yay! There's definitely lots out there - the only trick is finding them 😂
The API search query I used probably isn't perfect; I'll need to get my thinking cap on about how better to filter it, but it was definitely cool bumping into people across open source all trying fix A11y things ♥️