5 Ways to Make Your Next Design More Accessible

Refine Your UI/UX

How your website is laid out (ie. user interface — UI) and how people actually interact with your website (ie. user experience — UX) are equally important factors when creating an accessible design. I will not get into the differences of UI/UX in this article, but suffice it to say, they both play an important role in creating an accessible website.

Users with screen readers, reading disorders, learning disabilities, or attention deficit disorders will especially benefit from having a clear layout and concise content — but good UI/UX is really awesome for everyone.

Accessible UI/UX Guidelines for Designers

• Plan out heading and page structure — make sure it makes sense to readers using a mouse, keyboard, and touchscreen devices.
• Design obvious focus indicators, so users can tell where they are on a page at all times. Barely there focus indicators are almost worse than none at all.
• Use whitespace to set the body copy apart from other website elements, so it it easier for users to focus on.
• Place important actions at the top or bottom of the design. These will be more reachable with shortcuts on the actual website (ex. navigation links).
• Do not use complex words, when simple ones will do. This is especially true for the essential or interactive pieces of your website design (ex. call to action buttons).
• Heading level hierarchy is meaningful on a live website, so do not to skip heading levels in your designs/wires either.

---

Typography All the Things

Your choice of typeface/fonts can make or break a website, especially from an accessibility point of view. Users with reading, learning, and attention disorders (ex. dyslexia, ADHD), English as a second language (ESL) users, and users with low vision all benefit from accessible typography.

While it can be a bit overwhelming when you think of all the elements you have to consider when choosing an accessible typeface: serif vs sans-serif, font variations, font size, kerning, tracking…just to name a few, if you follow the guidelines below you will have taken the first steps to making your website typography more accessible.

Accessible Typography Guidelines for Designers

• Easy win: pick a font that is considered accessible from the start. This is especially important for your main body copy.
• Limit the total number of fonts families on your website and provide alternative fonts whenever possible.
• Use adequate base font size — 14px at the minimum. Bonus points for specifying the font size in terms of percentage or relative value to allow easy resizing.
• Limit the use of font variations (ex. italic, bold, ALL CAPS) and do not use underlines for items that are not links.
• When in doubt, use the Golden Ratio Typography Calculator tool to help determine the perfect font size, line-height, width, and characters per line (CPL) for your website.

---

Color & Contrast is Key

Color and contrast is at the heart of every design. There are numerous studies and articles showing how the perception of a brand is really tied to the colors it uses. One study even suggests that up to 90% of snap judgments made about products can be based on color alone. When you pair that information on color theory with the number of people who have some variant of color blindness, suffer from low vision, or are completely blind (all together roughly 9% of the global population), this is a very large area where designers can have a direct and immediate impact on website accessibility.

Accessible Color & Contrast Guidelines for Designers

• Use colors on the opposite ends of the color spectrum — avoid red/green and blue/yellow combos when you can.
• Be careful with light shades in general — they are hard to see for people with low vision.
• Do not rely on color alone to convey info to your users. Make sure your links have underlines or some other visual indicator besides color.
• Use solid color backgrounds — reading text on busy backgrounds is difficult, especially if it does not have enough contrast.
• Use color/contrast WCAG 2.0 testing tools and simulators to measure contrast ratios for your website design. Small text should have a contrast ratio of at least 4.5:1 against its background. While large text (18pt and larger) should have a contrast ratio of at least 3:1 against its background.
• Icons or other critical elements should also use the above recommended contrast ratios, but decorative visual elements (including logos) are exempt from contrast ratios.

---

Forms FTW

Ah…website forms. One could write an entire book on how and why to make forms accessible. But it really boils down to the fundamental question: can a user input information and then submit it on your website?

As a designer, you get off relatively easy on this element — developing the perfect accessible webform is one of those eternal conundrums of our age — but it is important to lay the foundation of development with an accessible form design.

Accessible Form Guidelines for Designers

• Label, label, label all form fields…did I mention, label? No matter how elegant your form design is, a user will not know what information to input if your field labels are blank.
• Make required fields obvious. Please do not use color alone to indicate a required field (see the color and contrast section for reasons why).
• Input errors/messages are a must for all forms, so designers should include them in their designs.
• Group fields into logical sections when you can. For example: first name, last name and DOB fields could all be grouped under a “Personal Information” heading.
• Make your forms as simple and succinct as possible and avoid redundancy in your accessible forms.
• Make the submit button clear and place it in a logical spot. There are all sorts of tricky submit buttons out there — different color/contrast, multiple buttons, hidden submit button, etc. If you want users to give you their information, you need to make it as easy as possible.

---

Media Considerations

I can admit it…I am a sucker for a good GIF. If I could design interactive SVGs for a living, I would. I also love having millions of photos and videos at my fingertips at all times (well, as long as the wifi is good). All of these forms of media can enrich our lives — but for lot of people, it can also mean frustration.

People with visual disabilities (ex. seizure disorders, blind), auditory disabilities (ex. deaf, hard of hearing), situational/temporary disabilities, people with poor bandwidth connections, and many others can benefit greatly from media that is displayed in an accessible way.

Accessible Media Guidelines for Designers

• Limit the use of complicated media components (ex. slideshows, videos) in your design when possible. No fear…there are alternative layout options.
• If you have to include media in your design, show links to alternative ways to access the media — even in the wireframe/design phase. It is a good reminder to developers/clients to include that element.
• Videos or slideshows should at least have a play/pause button. Ideally, you would show all possible media controls.
• Add clear, complete, and concise text descriptions to essential imagery. Think twice about non-essential images.
• Scalable Vector Graphics (SVGs) are awesome — level them up by adding additional accessibility information such as title IDs, desc IDs, and ARIA tags.
• Finally, make sure your design works even if the media is missing. Thinking about graceful design degradation or progressive enhancement from the beginning, will help your website design be more useful to more users.