Improving Site Accessibility

As this was our department’s first official exploration into the world of accessibility, I took a lead role in this piece of the redesign project. To begin, my team decided to tackle the main buyer flow of Flywheel, including the homepage and the plans & pricing page. Using the WAVE plugin, the Stark plugin, and Google’s inspector feature, I went through each page, making a list of accessibility issues that would need to be addressed to bring these pages up to WCAG 2.1 AA standards. I divided these critiques into two categories based on which team would need to address them:

Many of the development issues we ran into, including improper tab order in the navigation, lack of alternative text for images and icons, and issues with core page functionality, were a result of the fact that getflywheel.com was not coded with accessibility in mind. We saw the same kinds of issues when we looked at the design aspects. Lack of color contrast on most pieces of important copy and a semantic structure that was confusing built up the majority of our work.

We also had to brainstorm alternate ways of presenting information that was currently located inside of inaccessible modules, like carousels that lacked ways to stop or pause the motion, or constant page motion that couldn’t be turned off. A lot of these were used to add whimsy to the page, in line with the Flywheel brand, and we had to redesign them in a way that didn’t get rid of the personality of the site.

Following the audit phase, I sat down and laid out all of the WCAG 2.1 standards in an Excel file, dividing them into development and design issues. From there, I summarized 12 key design points to be used in my team’s redesigns. These points can be seen in the image below:

During our redesign phase, we first took a look at the Flywheel brand colors. As a team, we brainstormed as many accessible color combinations as we could in order to replace the existing button styles and header text colors, which were a combination of light blue and white. Working within existing brand standards, we settled on yellow, which was already a major part of Flywheel’s secondary colors, and was eye-catching enough to stand out against light and dark backgrounds. A yellow button on a white background is a grey area when it comes to accessibility, and the team wondered if it would meet WCAG guidelines. After some research, I determined that, according to WCAG 2.1 guidelines, as long as buttons had multiple other defining characteristics (such as shape, text style, location, and programmatic identity), the contrast between the text of the button and the background of the button was enough to meet the success criteria.

As we continued to redesign pages, we often found ourselves in these kinds of grey areas more often. In order to leave a record of our reasoning and help inform future decisions, I took the research I did and put it all together in a slide deck. This deck contained guidelines on how to treat various web design elements, and how to make them consistently accessible. Below, you can see the entry for accessible buttons: