The topic of web accessibility might seem a little intimidating at first. It’s usually synonymous with screen reader software, visual impairment and not much more, but that’s only a part of the picture.
The UK’s Home Office recently released a collection of posters created to better illustrate the essence of inclusive and accessible web design — including some needs most never consider.
Here are some highlights and additional insight based on the topics covered in the posters.
Designing for Users with Low Vision
Minding color contrast and font size
A simple way to improve readability is to be mindful of color contrast and font size — for example, avoiding medium gray text on a light gray background. Using a 4.5:1 contrast ratio — measured from a free color contrast checking tool — goes a long way to help users with low vision impairments and color deficiencies. The A11Y Project offers a plain-language guide on color contrast that’s worth a read.
Publishing all information on web pages
Avoid relying on PDFs and downloadables to post information that can be adapted to the web. A reader has more control of how content is consumed when it’s on a well-designed web page. This doesn’t mean avoiding offering downloads entirely — it means using them as a complement or takeaway for web-first content.
Buttons and notifications in context
Be considerate and place buttons and notices in places that are appropriate. It’s an unnecessary challenge for readers and a poor design practice to separate information or actions from where they’re contextually relevant. For example, if someone doesn’t complete a form field in a way that satisfies the requirements, show the error message clearly and inline with where the issue needs to be resolved, rather than at the top of the form.
Designing for Users on the Autistic Spectrum
Simple, consistent colors and layouts
Avoid clutter and chaos — that could mean steering away from bright, contrasting colors in favor of simpler, less harsh tones, as well as using layouts that are less complex and cluttered. Consistency is paramount.
Plain English; sentences and bullets (no wall of text)
Use language and structure that’s easy to follow. Avoid the dreaded walls of text — find a simpler way to communicate. Remember, web readers don’t typically read web content anyway — you’re doing yourself and your readers a favor by simplifying what you have to say.
Action buttons should be helpful descriptive, not unpredictable. That means avoiding labels like “click here” or “learn more”. This follows the concept that your web page should be consumable by skimming alone — buttons shouldn’t require the context of other content.
Designing for users who are Deaf or Hard of Hearing
Text to accompany video content
The effectiveness of video content is well-documented, but it shouldn’t exclude people from consuming a message. Provide a text-based alternative for video content, in the form of video subtitles or a separate transcript.
Simplicity in text and structure
Each page should be structured logically. Use clear, simple, effective language. Everyone will enjoy the benefits — especially anyone who has to rely fully on consuming visual, text-based content.
Preferred communication type
On a contact form where people might typically enter a phone number and email address, include an option for the reader to choose the method in which they’d prefer to hear back from you. While a phone call might be standard protocol, not everyone prefers to receive a phone call response.
Designing for Users with Dyslexia
Use images and diagrams to support text
Users with dyslexia will appreciate avoiding blocks of text, which are more difficult to read than well-structured web content. Images and diagrams can complement text and provide another way for people to consume your message.
Consider providing alternative methods — in conjunction with normal web page text — for sharing your message. Video is a great example — for some people, it resonates better than written text — consider it a complement to live alongside typical written content.
Short, clear, simple content
The less someone has to read in order to consume your message, the better. Use simple, precise language — again, avoiding the dreaded wall of text — to get your point across. Simplicity in formatting helps readability, too.
Designing for Users with Physical or Motor Disabilities
Large, clickable buttons, and well-spaced elements
Don’t rely on very precise actions or click targets in order to complete a task. Larger buttons, active form label text, comfortable padding, and touch-friendly elements allow more people to comfortably use your website or application. Everyone will enjoy the benefits of being mindful and inclusive in this case, particularly mobile and touchscreen users.
Design for keyboard- or speech-only use
Ensure your website or application can be used without a mouse — many people rely on a keyboard to use the web. WebAIM offers a comprehensive guide on designing for keyboard usage. Be mindful of what happens when someone uses the Tab key to navigate.
Consider how you can ask less of people in order to complete a task. Ask for fewer required form fields, infer information based on input (like looking up a city and state based on a postal code entry), and eliminate unnecessary “nice-to-have” fields and tasks.
Everyone will benefit when you’re mindful of more people’s needs. These principles aren’t designed to inhibit creativity in design; in fact, they’re designed to be more inclusive, which is the very essence and purpose of design in the first place.
About Steve Luvender
Steve Luvender is a Senior User Experience Designer at Liquid Interactive, where he works with organizations to design and implement solutions that delight people and create business results.