My A11y Hacktoberfest Retro
Tags: hacktoberfest, a11y, webdev
Published: 2019-10-14 05:45:11

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](https://www.upyoura11y.com) to help find the right kind of issues, and I wrote about it here on DEV:

{% link https://dev.to/s_aitchison/let-s-fix-some-a11y-issues-this-hacktoberfest-315c %}

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](https://github.com/30-seconds/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:

{% link https://dev.to/s_aitchison/handling-route-changes-in-react-accessibly-44fn %}

### 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](https://github.com/30-seconds/30-seconds-of-interviews/issues/172)


## 2. DDD East Midlands: Fixes for Inaccessible Icon Links

[DDD East Midlands](https://www.dddeastmidlands.com/) 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](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) 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](https://github.com/DDDEastMidlandsLimited/dddem-web/pull/100)

### 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](https://www.upyoura11y.com/), 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](https://www.gatsbyjs.org/) 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](https://github.com/gatsbyjs/gatsby/pull/18331) 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:

{% twitter 1178568359903932416 %}

(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](http://ohmyform.com/) 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](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)), and implemented fixes including:

- Adding semantic HTML landmark elements
- Adding labels to form fields currently relying on placeholders
- Adding a descriptive `h1` on 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](https://github.com/ohmyform/ohmyform/pull/58)

### 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](https://github.com/ohmyform/ohmyform/issues/54), 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](https://www.upyoura11y.com/contribute-to-a11y-in-oss/), 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](https://twitter.com/s_aitchison) and we can have a chat.


--------
*Did you find this post useful? Please consider [buying me a coffee](https://www.buymeacoffee.com/mgkZuRU) so I can keep making content* 🙂