In 2019, we made a commitment to design for every reader. This meant securing training for our team, conducting audits of our existing sites, remediating issues found, and creating robust guidelines for our designs moving forward.
Process
As designers, nearly every decision we make impacts usability. We’re committed to our mission of designing for all: creating truly accessible designs for the full range of readers. Navigating the nuances of accessibility can be daunting, and we’re happy to offer our expertise to the company.
When designing for accessibility,
we consider:
Color & Contrast
One of the most difficult aspects of our transition to Web Content Accessibility Guidelines (WCAG) AA compliance is related to color. While the changes can seem subtle, slight differences such as text appearing black or gray can determine readability. As a rule, we’ve moved from gray text to black, and lightened our background colors from darker greys to whites so there is greater contrast. We’ve also had to come to terms with our brand limitations—“PRH Orange” is not an accessible color when text is set in it. As a result, we’ve removed it from usage within headlines and links, and rethought its application across our outlets. A keen eye may notice we use a modified “Accessible Orange” on PRH.com that is darkened enough to pass contrast limits.
Font-size
Across the board, we’re making our fonts larger. WCAG requires that body copy be at least 14px, and this increase inevitably has a ripple effect across the typographic hierarchy of a site. Larger type is simply easier to read. By increasing our default sizes as well as allowing users to zoom in on pages up to 400%, we are ensuring that our readers with limited vision don’t miss a word.
Links
A recent trend in web design is to indicate a clickable link merely by making it a different color. This minimalist approach works for many users, but when considered in the context of color and contrast, it’s no longer sufficient for accessibility. In order for a link to be AA compliant, it must not rely on color alone as a visual indicator. Underlining, bolding, and directional icons are all options that should be explored when styling links.
Resources
Armed with these sites and tools, you can make incorporating accessibility into your designs a sustainable practice.
WEBAIM
The go-to resource for web accessibility. Webaim provides training, evaluation, and accreditation, and should be everyone’s first stop when familiarizing themselves with accessibility.
WAVE
Webaim created this browser plugin that allows you to quickly audit your site for accessibility concerns. We use this regularly in our audits of live sites.
Color Contrast Checker
Using a contrast checker is essential when verifying color accessibility. This checker built by Webaim is a quick and easy way to determine whether your palette cuts the mustard.
Stark
For new designs, you need a way to check accessibility before the site is actually built. This XD/Sketch plugin allows you to do just that—it’s been very useful to our team.
Don’t know where to start?
We’re here to help.
We’re experienced with designing for accessibility, and can lend a hand if you don’t know where to start. We can help you conduct your own site audit or try to answer any questions you might have.
Contact us with questions and suggestions!