Image showing what the space between two buttons on a site should look like.

Designing for Accessibility

The Interaction Design Foundation succinctly summarizes the importance of accessible design: “A design is only useful if it’s accessible to the user: any user, anywhere, anytime.” People often think the need for accessibility is only targeted at people with disabilities, but really, it’s just about making sure that anyone can understand, interact with and contribute to your product.

Accessibility is something that should be at the forefront of every designer’s mind even when they’re ideating a project, but if you’re working to make your current site more inclusive, fear not — it doesn’t require an entire revamp. We’ve compiled a list of five things to keep in mind when working towards accessible design:

1) Use Alt Text with Images

Including alt text with images ensures that a screen reader will be able to explain them, which is critical if the images add value to your platform/content. If they’re purely decorative, avoid using alt text, as it may end up confusing the user.Image pointing out the alt text section when uploading a photo.

2) Don’t Solely Rely on Color to Convey Information

Outlining empty boxes on a form in red — indicating that they need to be filled out before proceeding — may initially seem fine, but it’s inhibiting for those who are color-blind or have other visual impairments. In fact, red-green colorblindness is the most common form of the condition. Instead, always include a hazard/caution sign, check mark or other shapes and forms to alert users of errors or approvals on your platform. The example below is of WordPress’ title section, where the user is alerted of the optimal title and description length both with a color (red, yellow, green) and a written description (too short, good, too long).

Image pointing out how the title length section on WordPress alerts the user of the correct length with both color and written description.

3) Include Closed Captions for All Audio/Video Files

For those with hearing impairments, closed captions are necessary for all audio and video files. Generally, captions consist of black text on a white background, placed on the lowest third of the video, but most closed captions allow the user to change the size and font of the text, as well its location on the screen.

4) Make Buttons/Controls Larger and Space Them Apart

Controls on a platform, which include any buttons or links, need to be of a certain size and be spaced out at least a certain distance to accommodate for people with tremors or of an older age. When controls are too close together, there’s a higher chance of touch error. The recommended pixel size for controls, including buffers, ranges from 34×34 to 48×48. Between controls, there should be at least 8-32 pixels of space.

5) Design for Compatibility with Assistive Technologies 

Make sure your platform is compatible with technologies such as screen readers and magnifiers, eye-tracking apps, mouth sticks, head wands and refreshable braille. These are often necessary for users to be able to fully interact with site content, so the value of the previous five suggestions would almost be nullified without assistive technology compatibility.

Once you’ve implemented these changes, you can review your site with softwares like WAVE and Color Oracle, which allow you to view the platform with the lens of a user who relies on accessible design, as well as assess whether the platform complies with accessibility guidelines.

Are there any other key things you follow when designing for accessibility? Let us know in the comments below!