12 Accessibility Recommendations for Digital Product Design

Ever since the US Rehabilitation act of 1973 prohibited discrimination against people with disabilities, accessibility has been evolving in various ways. In this article, we discuss how accessibility has been woven into the design process and where accessible design is headed.

In 1996, websites became public resources, and in 1999, WCAG 1.0, the first set of Web Content Accessibility Guidelines, was published. These milestones have had a major impact on the development of accessibility.

When designing digital products in early 2010, two key considerations emerged: the mobile-first approach and the importance of colour and font choices. Both were prompted by the issue of accessibility. Design was no longer just about being aesthetically pleasing and establishing the best usability; it was about encompassing all of the considerations relating to aesthetics and usability and making them work together in harmony.

The early days of this evolution saw some designers resisting having to modify their carefully chosen font or colour because they didn't like having to conform to these new standards. However, they soon learned the importance of conforming and adapting.

Accessibility considerations should be made throughout the whole process — not just at the end. Web accessibility is often associated with web development — what happens in HTML, CSS or JavaScript — but optimal accessibility should be considered much earlier in the visual design process. The best approach is to include annotation within the design file, which can be shared with all parties for collaboration.

Compared with a decade ago, the range of design tools available today is incredible. Back then, designers were working in Adobe Illustrator and Photoshop, but now virtual collaboration with other designers and developers is possible with the likes of web-based software such as Figma .

The emergence of plugins, libraries and well-tested components has made designing accessible products even simpler and embedded a solid foundation within the design community. Now designers have a wide range of tools for colour contrasting, text resizing and focus ordering to streamline the process of making accessible digital products.

Colour contrast tools check the balance between the foreground colour and background colour. Examples that focus primarily on text and their backgrounds include Stark or Contrast .

Text resizing tools such as Text Resizer help you to update your designs quickly and flexibly with respect to the base font size defined.

You can annotate focus order and semantics with Microsoft Focus Orderer . It helps to create designs for keyboarding and screen reader users.

Here are some key considerations to bear in mind when creating designs that are more usable for people with disabilities:

Imagine a form that alerted users about an incorrect entry with just a red keyline around a field and no supporting error text. How would a colour-blind user understand this? As well as adding supporting text, establish a colour that can be clickable and used in hyperlinks and buttons.

Use a minimum of WCAG AA compliant — ideally AAA. Sites such as webaim.org are a useful resource, as are Figma plugins such as Stark or Contrast.

As lovely as some non-web fonts look, all copies should be in text format to ensure screen readers work correctly and to avoid distortion for magnification users.

Ensure text follows a logical heading structure. Although most browsers have a zoom feature these days and have a capability of scaling up to 200% without things breaking, the minimum font size for the body copy should be 16pt, dropping to 14pt for hint and form text. Line length should not be too short or too long either — 80 characters is the recommended maximum length (Level AAA).

Is it really necessary to hide content in a hover or accordion state? If so, why? Is it just because it looks better or because there is too much content?

Some pages can be overwhelming for users, so a focus hint to guide them is essential. Imagine not having a cursor for your mouse on a website; omitting visual focus indicators for keyboards amounts to the same thing. Options include a highlighted form field or a hint text label.

Focusing on target areas is particularly important for devices with smaller screens, such as smartphones. Does that clickable icon have enough padding to avoid incorrect selection? (Aim for a minimum of 44 x 44px min AAA and 24 x 24px AA). Is the sheer number of hyperlinks in this copy likely to create a similar problem?

Design software has come a long way. It is no longer necessary to spend hours creating libraries from scratch, and using native controls and platform patterns avoids many accessibility problems. The Figma community has opened a whole world of opportunity and access to libraries and tools that have already been tried and tested by professionals all over the world. However, you will need to sense-check some of them.

Referring to a reliable library is also useful when it comes to forms and widgets that can be reused throughout the designs. It doesn’t mean your creativity is being crushed — far from it. It's more to ensure that all possible scenarios have been thought through thoroughly. You can always add your spin on things.

Animation and accessibility don’t always go hand in hand and often take away from the experience rather than enhance it. Try to keep animations to a minimum or avoid them completely because some users have their preferred-reduced-motion feature set on their browser, which reduces and disables animation.

By 2030, Internet access will be more widespread and could even be universal. Voice assistance will play a more important role in Internet navigation, and wearable technology will change the way we interact with each other and the world around us. WCAG 2.2 will be released by the end of the year, WCAG 3.0 will be rewritten and the new European accessibility act will make accessibility a requirement for all websites and apps across the EU.

As a result, accessibility should no longer be viewed as an optional bolt-on to digital product design. It should be part of every project and should not be excluded because of cost or requirements. People who don't work in the digital industry or use the tools on a daily basis may be unaware of web accessibility. It is everyone's responsibility to raise awareness of it.