Designing for Accessibility

Or, how I learned to meet the bare minimum. Spoiler- it’s not that hard.

A few months ago, I was hired to create designs for a startup in the health care industry. My main task was to create a patient-facing mobile application that serves largely as a form to collect patient information. The idea behind the application is that a patient comes in for an optical service (I am under an NDA so at the time I can not be any more specific) and uses the application installed on a mobile phone provided by the clinic. The application asks the patient to fill out various personal and medical history in a series of questions- easy enough.

However, the challenge lied in two factors: 1) the target users were largely the elderly and visually impaired, and 2) the stakeholder of the company was colorblind. Admittedly, I had not had much experience designing for accessibility in the past, and have often chosen aesthetic over anything else. So I set off to learn what I could to make sure that those who were using the product could actually use the product. A review of the Web Content Accessibility Guidelines, finding a color contrast checker (Color Safe), and a few Google searches later and I was ready to create! Here are the (bare minimum) standards I learned that I will continue to apply to my designs in the future.

Color Ratio

According to the World Health Organization, it is estimated that approximately 1.3 billion people live with some form of vision impairment. Considering our user demographics, it was safe to assume that a majority of our users would fall under this category. Color contrast is something that is oft overlooked for the sake of a more modern, edgy design, but as the WCAG outlines, the color contrast ratio between text and its background should be 4.5 to 1. Admittedly, this is not something I had ever fully considered in the past, although I don’t find it particularly hard to comply with. As I began to reflect more deeply on the reasonings for this, I started to imagine that for the visually impaired trying to read a navy blue text on an azure background would be akin to studying one of those Magic Eye posters I was never able to solve but always said I could.

Another interesting thing I learned while researching visual impairment was that red and green is the most common color combination difficult to distinguish for those with colorblindness. Even though they are complementing colors and therefore high contrast, this was something that needed to be considered. The final designs consisted of a sapphire blue, black and white color scheme, with a safety orange for the error states. Very clean and simple, all while adhering to the WCAG color contrast ratio.

Text Size

This one is pretty obvious. I can just picture my dad pulling down his readers when sitting down with the newspaper or literally any restaurant menu. Smaller text is harder to read, especially for those with vision impairment and ahem (sorry dad!), the elderly. Just kidding he’s not elderly. I, however, am and always have been a fan of smaller text in many cases. Blame it on my undergraduate degree in English and the necessity to read large portions of text in small amounts of time? Perhaps the smaller bulk of said text seems less daunting? I don’t know. I happen to think that smaller text in many cases can just look better- but there is a time and a place and this was not that. I needed these designs to be clean, but also readable. You certainly aren’t going to get much information from the user if they can’t read what information you are asking for in the first place. Thus, we stuck to one question per screen as to not overwhelm and kept the text to a cool 24 px.

Labels and Error States

Both are something that many designers overlook- in fact, I have made several designs where the error states just weren’t even considered or designed for. This is a huge mistake. I repeat a huge mistake. Let’s talk labels first. Have you ever played your favorite song and then realized you weren’t fully paying attention so you had to restart it? That’s kind of what it’s like when you use placeholder text for a form field inside the field. As soon as the user taps (or clicks) into the field all direction disappears and maybe you weren’t fully paying enough attention in the first place. It is critical to always help users to understand what it is they should be writing in a form- they should never lose context of what they are being asked to do.

On to Error States. Do you know how frustrating it can be to come across an error message but not know what in fact you did wrong? I have personally fallen victim to this many times only to be left screaming with rage in the face of my computer screen. Here’s looking at you any government website. Error messages can often be a point of frustration for many users. It can make any human feel bad like they have done something wrong. Nobody likes that. But the reality is, there are many factors that could occur to prompt an error message. It is not enough to simply state that an error has occurred at the top or bottom of the page. This provides the user with minimal information, directly leading to the aforementioned bouts of frustration. The error message should be clear, simple language that conveys the reason descriptively. Each error message should be directly associated with the field in which it occurred- and color should be used to indicate that something went wrong. A small use of imagery here like an error symbol, in addition, can also go a long way. Thank you UX Collective for writing this amazingly comprehensive article on how to create proper error states.

Text Accompanying Imagery

I love graphics. I love making cute little infographic icons and graphics, I love when I see well-constructed icons and graphics in the products I use. But imagery alone can sometimes lead to confusion. This is why as designers we need to be careful about using imagery to convey critical information. Sure, most people will recognize the use of a star to indicate reviews or ratings, but what about the use of a funnel to indicate filtering? Not quite as widely recognizable. Often it is not enough to simply use imagery and therefore we should consider using text to accompany that imagery. Icons in infographics should add to the content, not detract or distract.

Final Thoughts

As you can see, nothing I have outlined above should be difficult for any designer to follow. It is honestly the bare minimum when it comes to accessibility standards. I think too often designers feel that their creativity can be hindered by these guidelines. I ultimately did not find that to be the case. In fact, I think if anything it forced me to push the envelope a little bit and allowed me to be even more creative in my designs. It also taught me a lot about considering a larger demographic with each of my future designs. Everything that I have implemented above is now something I will carry with me on every new project and it is only scratching the surface. Obviously, there is plenty more in terms of accessibility standards we should all be considering. I will never claim to be an expert at accessibility, but I do think that if as designers we are each willing to at least do the bare minimum, we can make the digital world a more welcoming space for everyone.