top of page

Accessibility at Artera

Product Designer | January - July 2022

The Problem

In late 2021, our company took on an accessibility audit of our entire application. This process resulted in the auditor discovering over 1,000 issues related to accessibility. 

The Problem

Role & Impact

Role & Impact

This project has been the project that most feels like "my own," in the sense that I had the most ownership and investment in this project than others I had worked on at Artera. Accessibility was why I got into the field of UX in the first place. 

I was the sole Product Designer overseeing this entire project from end to end. I assisted the engineers with defining the acceptance criteria for all of the issues they would be solving that needed to be signed off by UX -- this included any visual changes, the alt-text or ARIA tags added to any element, as well as zoom/resizing behavior. 

Discovery

I dove head first into our list of 1,000 issues and separated them into Design versus Development issues to start chipping away. From there, I categorized our common accessibility issues -- things like "color contrast" or "color alone used to convey information." 

The main issue categories I found within the application were: 

  • Insufficient Color Contrast 

  • Color alone used to convey information 

  • Blinking/flashing elements with no stop/pause mechanism

  • Code that wasn't semantic or improperly labeled 

  • Change of status not announced by screen reader

  • Inability to navigate via keyboard only/illogical keyboard order

Discovery

Redefining 

The main issue uncovered was that our design system colors would need to change. Even our branding colors were not going to work. As a design team, we went through to find acceptable swaps for our current colors (that would work across projects and various scenarios in which the colors were used, as well as would be acceptable to Product Marketing and match the overall branding of Artera.

Main issues we redefined: 

  •  Design system colors 

  • Consistent focus states 

  • More consistent visual language

  • Alternative notifications

  • Zoom/resize behavior for different pages

Redefining

Examples: Contrast Changes

Before

Screen Shot 2022-07-06 at 4.53.55 PM.png

After

Screen Shot 2022-07-06 at 3.29.28 PM.png

About the Changes

The most obvious difference here is we changed our primary blue, that shows up most noticeably in this sidebar here, to a deep blue that worked well against our white icons. It shows up in other locations, such as the "Text" badge on the right, as well as in our FAB button and all call to action buttons across the site. We also did things like deprecating our barely visible "Star" icon to something with much higher contrast. 

Just changing this one issue cancelled out a lot of the accessibility problems we were needlessly creating.

Examples: Blinking/Flashing for Internal Mentions

Mention Tab

Screen Shot 2022-07-06 at 3.31.06 PM.png
Screen Shot 2022-07-06 at 3.31.16 PM.png

Practice Dropdown

Screen Shot 2022-07-06 at 3.30.33 PM.png
Screen Shot 2022-07-06 at 3.31.36 PM.png

About the Changes

Previously, within a message card, we indicated that you as the user had a mention to resolve using a flashing blue circle on the right-hand side. This presented a couple of problems. First off, flashing is never a good idea when it comes to accessibility. We needed to remove that. Additionally, another issue we needed to solve was providing a little bit more context into what this element actually meant. Nowhere else had we used our primary blue to draw a user's attention to a notification. In the video above, our main navigation uses red to indicate a notification. 

 

The two numbers shown in the practice dropdown signify the total number of internal mentions to various members/departments within a medical practice on the left and your own personal mentions on the right. Your total number of mentions blinks in yellow/orange, to "match" the blinking of the message card that contains your mention. We used this opportunity to create a simpler color language. We did away with "your mentions" shown in the dropdown, as we already aggregated the total number in the sidebar to the right, and replaced the blinking blue with a solid red dot. This now means that red indicates an item that needs attention. We were establishing a more consistent color language while crushing needless accessibility issues. 

Contrast Changes
Blinking/Flashing

Examples: Tabbing

About the Changes

Previously, there was little to no tabbing functionality through our application. Where tabbing was enabled, it was inconsistent and jumped unpredictably around the page. Now, users are able to use their tab button to navigate the aplication more smoothly. 

Results

Like any other project, this one came with restraints. Unfortunately, we had to end the project earlier than expected due to engineering resources. As the project was wrapping up, we underwent a secondary audit to measure our success. We found we had reduced the number of accessibility issues by about 60%. 

Tabbing
Results
Next Steps

Next Steps

This project came at a fortuitous time! Our engineers are currently in the process of switching FE libraries, so we have the opportunity to completely revamp our design system and implement accessibility standards. We are building a new design system with accessible contrast ratios. We also plan to implement a code linter or some sort of testing standards to ensure the code our developers release is semantic and accessible. 

So many of these issues are easily preventable, and relatively easy to fix, given you have the resources. I'm excited to be part of a team that prioritizes accessibility and includes it at its early stages, not retrofitting at the end. 

Any questions or suggestions, please send me an email or message me on LinkedIn. 

bottom of page