6 Quick Accessibility Design Considerations to Bake Right In

Published January 28, 2021

A primary goal of accessibility, and universal design more broadly, is to offer an equivalent experience to as many users as possible. By addressing equitable use, flexibility in use, perceptible information, simplicity, and other factors, you have the potential and power to maximize your reach while helping to ensure everyone gets a consistent message — regardless of their individual accessibility needs.

When working to create a greater and more accessible product, as with any undertaking, timing is everything. The design stage is an ideal time to address several accessibility factors that will have a big impact later.

Don't sprinkle accessibility on top. Bake it right in.

1. Simple and intuitive layout

An uncluttered and predictable layout isn't just an accessibility issue — it helps facilitate a good user experience (UX) in general. Stated another way, maybe an easy-to-use layout helps drive home the point that there isn't an arbitrary line drawn, with people accessibility benefits on one side and everyone else on the other.

Rather, everyone's experience is made better by designing line and word spacing with maximum usability in mind, choosing not to overwhelm readers with massive walls of content, avoiding unnecessary horizontal scrolling, and ensuring that repeated content is presented and identified consistently.

2. Proper heading structure

More than two-thirds of screen reader users navigate by headings as their first step in using a lengthy web page, according to WebAIM's Screen Reader User Survey #8. To be accessible, headings should be coded with the appropriate heading number, nested properly. Taken alone, visual cues such as bolding and all caps do not communicate the page's organization to all users.

As designs take shape, begin to identify heading levels. This will help avoid any mismatches later between the visual presentation and the actual heading levels in the code.

3. Customization

Make any mechanisms for customizing the presentation easy to find and use. If your site will include ways to change colors, fonts, and sizes; adjust sounds; turn off animation; or other user-controlled content modifications, the design and accessibility of your site will be better for addressing its look and function early on.

4. Color and contrast

The general principle is that information should not be conveyed by color alone. For example, instead of differentiating categories by color only, include labels for clarity. Or, if input errors are called out in red text only, add an accessible icon or text to make the need for action more apparent.

All designers must also ensure there's enough contrast in text and images of text. The Web Content Accessibility Guidelines specify contrast ratios that are considered to pass.

It's going to be worlds easier to understand and apply accessibility best practices for color before the design is fully baked.

5. Image alt text

You might have heard that an accessible website can't use images. That's simply incorrect. It's fine and possibly important to use images, so long as information contained in it or conveyed by it has a text alternative.

Image alt text will often be placed in the alt attribute associated with a graphic, in which case it would typically not be visible to most sighted users while still available to assistive technology users — but this is not always the case with alt text. Any non-text content that has meaning or value needs alt text, and this extends to graphics like charts or infographics. In these cases, the off-screen alt attribute might not be adequate and an always-visible or easily-locatable extended text alternative might be best.

Fitting in extra content or functionality that wasn't planned for initially can be tougher and may require design modifications, an issue avoided by baking alt text right in.

6. Video descriptions

Because videos present visual and auditory content, they need text alternatives, too. Usually, creating accessible video experiences means including captions and transcripts. Captions are on-screen lines of text that display dialogue and other pertinent sounds. Transcripts might vary in what they include, but they're usually a text-based document that details the video contents, such as the dialogue and other descriptive information.

Like the other elements noted here, accessible video alternatives are best accounted for sooner than later. Plus, a text transcript will take up space outside of the video player in some form or another — again, bake it right into the design.

Accessibility is part of a good UX strategy

Employing accessibility in design is a critical part of a good UX (user experience) strategy. Offering all of your customers an efficient and optimal means to interact with your business will always pay off — and it will always be easier to achieve when the right considerations are kept from the beginning.

Comments