Danielly D Aldana
ADA Compliance: Designing for All
Objective:
To meet ADA compliance requirements site wide.
Problem:
-
The site does not meet minimum requirements for those with low vision
Challenges:
Just because a color is marked 'websafe' doesn't necessarily mean a color is passable. Testing our lightest text colors on the darkest of backgrounds proved to be the most challenging. Finding the balance of meeting AA criteria and glazing over AAA was important as I didn't want to ignore the most sensitive. We are an eyewear retailer, after all.
Also, enforcing the policy of no embedded text within creative is a challenge, especially when working with a variety of creative contributors. Exploring some bandaid solutions is not ideal when at some point, automated localization becomes applicable in the near future.
Status: In Progress
Output:
-
Working with Bureau of Internet Accessiblity, we are striving towards ADA compliance by 2021
-
Switched from branding colors on the site, utilizing the Deque Color Contrast Analyzer
-
Adjusting backgrounds to preserve branding colors, in some cases(i.e. the footer).
-
High contrast is not the only solution. To increase legibility, we are changing the character spacing to .3 and applying all caps on section headers, and .12 on body copy.
-
Relieving ourselves from Black font family. Black is meant for large, display application, and not for petite section headers. It's tight spacing makes it hard to read at sizes less than 16. I absolved the team from black and switching to bold. We can all relax now.
-
Separating product flag color from warning color and changing it to a bright magenta to breakaway from all the teal litter from plaguing the site.
-
Adjusting warning colors to fiery oranges instead of the marigold yellow.
Further Phase II Considerations:
Apply a toggle state in which the user could manipulate high contrast as opposed to the default view.
Links: