The Need for Accessibility in Design
What is accessible design?
There are many different forms and formats of accessible design, but, in general, “to design for accessibility means to be inclusive to the needs of your users.” The goal is to be as inclusive as possible and consider, in particular, the needs of people with disabilities. Though accessibility is closely linked to usability, the former focuses on if all users can share an equal user experience while the latter focuses on if designs are effective, efficient, engaging, and easy to learn. Readability also comes into play as it can depend on how accessible a design is, especially in regards to vision impairment. All three aspects work together in UI/UX design and deserve equal consideration. Many programs and guidelines exist to help provide an outline for designers; for web design (and UI design in general), the Web Accessibility Initiative is the gold standard for strategies and resources.
The most significant issue, however, in accessible design is knowing what to design for and how to do it — different disabilities or conditions call for different guidelines, and it can be a struggle to identify which a design should abide by. Common issues in design can arise from visual, motor, auditory, or learning impairments, as well as various cognitive disabilities that are impacted by certain formats or colors. Other ability barriers can include issues from the environment (bright or dim light) and prior events (eye fatigue from previous use). The numbers impacted by eye fatigue have actually significantly risen recently, as people spend more time online due to the pandemic. Identifying which issues to prioritize and how to amend them is key in taking steps toward accessibility.
Why should accessibility matter?
Designers have the responsibility to make their designs inclusive and available to as many as possible — accessible design is a step closer to this inclusion. In the United States alone, over 56 million people have a disability: that number increases to over 1 billion people worldwide. More so, accessible design tends to improve usability and readability in general, helping all users as a byproduct. It makes sense that improving designs for certain populations would improve the designs for everyone. If an intrinsic motivation to provide equal access to your designs is not enough, business-wise, making design accessible can significantly boost a brand. It can open a website to a much wider audience, return better search results, have better usability, encourage innovation, and be SEO-friendly. This issue is also prominent and emotionally charged — it is not uncommon for websites to be taken to court on the basis of website accessibility flaws. Accessible design has grown into a public issue, and in a time of inclusion and acceptance, accessibility early on helps, not only people with impairments, but brands themselves. Beyond business and publicity, a move toward accessibility is a move toward inclusion and empathy.
3 aspects to consider for accessibility:
As one of the biggest stigmas against accessibility is its supposed difficulty, below are three easy areas to be mindful of when designing that won’t be timely nor costly. Spending money, time, and effort on accessibility should not be seen as a burden, but rather an opportunity to improve your designs while treating all of its users equally and with respect.
- Color:
Color is one of the most important aspects in making design accessible. The World Health Organization estimates that 217 million people in the world suffer from a moderate to severe degree of vision impairment, and color is a key factor in mediating that. Contrast is one of the easiest ways to help accommodate vision impairments. Low color contrast is much more difficult to read than high color contrast; in fact, the W3C suggests the contrast ratio be between 4.5: 1 for the best readability and accessibility. Heavier, larger fonts can be more forgiving contrast-wise, but it is always best to keep contrast between the guidelines when possible. Color also should never be the only determining factor of critical information. If you base a chart entirely differentiated by color, those with full or partial color blindness will be unable to understand. Mix in text and pattern differences, so color is not the only difference. If you want to check your design’s contrast, check out this contrast checker. Trello also provided useful examples here of colorblind friendly textures. You can also use Color Oracle to check your website’s contrast and accessibility from a colorblind standpoint. When considered from the start, color is an easy factor to control in designing for accessibility.
- Controls:
Designing with controls applies most to UI design, but the principles and methods are useful across areas. Controls, more formally known as interactive content, are any content that the user is intended to interact with. Controls are to usability like color is to readability; they determine how users navigate the site, narrow their focus, and identify key areas. Generally, controls should not be too close together nor too small: the Web Accessibility Initiative suggests that the size of a control be 44 by 44 pixels minimum. Controls should also follow what is allowed in the HTML Spec. This all contributes to helping users who may have difficulties using a pointer be more precise and click the right control. In particular, focus states are a useful control to help direct users across your website. The blue outlines that occasionally pop up around options or buttons, focus states are extremely beneficial in helping a user understand where they are on a page and which element currently has the focus. Focus states can be beneficial to users who need screen readers or keyboard navigation (or those who prefer to!). Especially in regards to motor impairments, small adjustments of controls can increase the inclusion of your designs ten-fold. To check controls, consider trying to navigate your design using only keyboard controls to see how easily it’s accomplished.
- Text:
To account for those who use digital readers, cannot access the image, or have an impairment that prevents full legibility of an image, you can include image descriptions and alt-text for all non-text designs and illustrations. Image descriptions provide detailed information on aspects of the illustration or photo as well as transcribe any text included in a graphic. Alt-text, comparatively, provides only essential details of an image. Whereas image descriptions go after captions, alt-text is what will display if an image fails to load. Screen readers will read image descriptions and alt-text along with captions (depending on settings) and provide needed information. Here, writers play a key role in accessibility beyond just the design itself. The font of any text also contributes to design readability. Ornate, fancy fonts (while super fun!) can be difficult to read — especially for long text blocks. For essential information, try to keep fonts sans serif and as simple as possible. You can check out this handy guide on font legibility to check your own fonts.
(Fun fact: comic sans, one of the most commonly mocked fonts, was actually created to help people struggling with dyslexia; the irregularity of the font makes the individual letters easier to distinguish. Designing for Dyslexia has an entertaining video on the history of comic sans and how it came to be widely used for the impairment. OpenDyslexic, a free, downloaded font also designed for people with dyslexia, is also an awesome resource!)
The difference you can make:
Making design accessible begins with designers; it does not have to be an expensive, timely process to meet the bare minimum of inclusivity. The three areas above are just a starting point, there will always be cases where certain formats are better than others. However, it is up to the designer to identify the groups and prioritize inclusion. If you want to learn more about how to make your own design more accessible, I recommend checking out the sources linked in the article and Designing for Accessibility is not that Hard. I also recommend taking a look at the guidelines in the Web Accessibility Initiative. For all you Figma lovers, there is a built in accessibility plugin, Able, that can check contrast and silhouette color blindness. Design is not something that should be limited in any way: that includes those who have access to it. It’s up to you designers to achieve that goal.
