Prioritizing Accessibility in Pattern Design
Problem
Our alert banners failed to meet standard accessibility guidelines
Solution
Redesign our alert banners to improve the accessibility for our visually impaired users.
Team
UX Designer (me), Engineers (3)
Background
Every member of the Buildium UX team is responsible for writing documentation for our design system each year. Our alert banners have always been one of those patterns that needed some love, but we struggled to find the time. As I was writing documentation for the pattern, I couldn’t help but take the opportunity to implement accessibility improvements while I was at it!
Problems
Poor contrast ratio ⚠️
5 out of 7 alerts banners did not pass AA contrast standards.
Inconsistency ⚠️
Inconsistent in terms of icon usage and height.
Reliance on color ⚠️
Relied solely on color to distinguish between message types (i.e. success vs. error).
Competitive analysis
I completed a competitive analysis of other design systems which helped me get a sense of what was familiar to users across the web. Through this research, I compiled an audit including background color, font color and icon usage across applications.
Final design
The final changes were small, but certainly mighty!
Introduced icons ✅
Each banner type includes a designated icon which is outlined in the documentation.
Improved contrast ratio ✅
I changed the font color to black in order to increase the contrast ratio to WCAG AA across all banners.
Promoted consistency ✅
With this effort, all banners are now part of a holistic family with a consistent anatomy.
Documentation
“What alert banner should I use?” This question was extremely common among engineers, UX designers, product managers and marketing. This documentation serves as a valuable resource that describes usage, styling and content guidelines. I added it to our design system in tandem with the release of the new and improved pattern.
