This year, we were proud to participate in Global Accessibility Awareness Day on May 17. Global Accessibility Awareness Day is an annual event that aims to get people talking about how to make software and the web accessible for people with disabilities.
At ActiveCampaign, we decided to run several internal events, from workshops to book clubs and a hackathon, throughout the week in order to raise internal awareness of accessibility and to get a bit of experience working on those kinds of problems.
Web Accessibility Workshop
This workshop focused on exercises targeting some of ActiveCampaign’s most common accessibility problems. Attendees gained experience fixing problems with button/link descriptions, color contrast, document structure, focus management, form element descriptions, and image descriptions. They also gained experience using tools like the aXe Chrome Extension, the Spectrum Chrome Extension, and ember-a11y-testing.
The workshop itself was created by Howie Bollinger and Sean Massa. It’s open source! You can modify and run it yourself!
Screen Reader Workshop
The Screen Reader workshop was designed to get attendees more comfortable using a screen reader. This was based on the W3C examples of good vs. bad accessibility. We took each “bad” page, tried to navigate it with a screen reader, then tried the same thing on the “good’ page.
Attendees loved gaining the experience (including the many frustrations) of using a screen reader.
Accessibility Book Club
We kicked off an accessibility book club with Accessibility for Everyone by Laura Kalbag.
The book club ran regularly for several weeks after the hackathon, culminating in a final discussion on June 13th. One influential takeaway for the group was how accessibility can be improved incrementally and over time. This led to a proposal to set aside time each week for regular lunch and learn style workshops. Each workshop would focus on one issue that exists in our platform today and efforts to implement accessible solutions as a team.
On Global Accessibility Awareness Day itself, we had an accessibility hackathon. We formed teams, targeted specific areas of our platform or the open source projects we use, then went to work!
We ended up gaining very valuable experience working on accessibility. We also had four specific deliverables come out of the day.
The Forms Team tackled several issues with our public-facing forms. These were tricky because they are embedded on third-party websites. We still managed to get some accessibility wins!
- Added labels to all form elements
- Added roles where we couldn’t use semantic html elements
The Navigation Team tackled our top-level app navigation issues. Here are the wins!
- Fixed tab indexes
- Fixed search bar tab trap
- Moved focus/active styles from JS to CSS
- New Skip to Main Content link
- Design Spec for increased contrast in navigation
The Colors Team tackled our color contrast issues. They explored new design options for our application in these areas:
- Contact List
- Contact Profile
- Campaigns Editor
The Testing Team tackled some ease-of-use issues with the ember-a11y-testing tool we use to assert specific accessibility requirements. There were some great wins!
Everyone who participated enjoyed learning more about accessibility, and what it means in our work. Our goal for the week was to increase internal awareness around the issues and generate ideas for how to start making tangible progress for our platform. It is safe to say our Global Accessibility Awareness efforts were a success, and have opened many opportunities for us to carry this momentum forward!
Our week wrapped up with several improvements to the accessibility to our platform! While our efforts have not made it to production yet, the conversation is rolling and our team has gained a new sense of possibility and responsibility regarding accessibility on the whole.