For one of the first projects I ever worked on in an agency setting, we had a monster list of items to either finish, ask about, or respond to. A classic punch list.
So, I was given this list in a Google Doc. I ambitiously went about attacking this near 80 item list. For things I fixed, I highlighted the line green. For things I was unsure of, I highlighted the line yellow. For things that were non-issues, I highlighted them red.
An bit later, my boss called me, freaking out. He asked why I hadn’t responded to the tickets, because he was outside the client’s door. I was like, “Umm? I highlighted them all right on the doc. Didn’t you see?”
“I’m colorblind!”
Oops.
It turns out red, yellow, and green basically all look yellow-ish to most color-blind people. My boss had no idea what I’d done on that checklist.
It’s also why most traffic lights are stacked. A separate indicator to color, such as position, or a shape, or other rather simple thing, helps fix these issues.
In this post, the author highlights how Yoast’s WordPress SEO plugin has made the same mistake in the Page Analysis section of the plugin.
I don’t want to pick on the plugin, because I have a feeling most of us have made this mistake, or another like it. So instead, I encourage you to check out The Accessibility Project, a great resource for web makers on accessibility, or a11y for short. You can also get involved with WordPress accessibility projects on the Make blog for it.
Accessibility is important, and there are many aspects to it. It’s not just about color blindness. It’s not an easy part of making websites, and it affects a minority of users. But it’s an important minority and we should never use that as an excuse to deliver an inaccessible experience. We can do better.
Hey Man,
Really loved your article!
YEOST SEO is a great tool and a colourblind nightmare! In the end I got a buddy of mine to fix the icons with shapes etc. as this was easier. I have since found issues with ebay too and they are a pretty big site to miss such a thing. The Accessibility Project is perfect but even in my day to day of things its a nightmare as most people either dont know it exists or they dont care 🙁
This chrome extension might be useful to some folks. It adds some accessibility auditing tools to Chrome’s developer tools. https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
Accessibility has been something I’ve kept in mind on my latest project and is something every developer should think about. I recently listened to a podcast about Accessibility that had some great points and tips about the subject. You can find it here.