10 June 21 What Stevie Wonder can teach the world about accessible design.

Let’s start with an obvious statement: Stevie Wonder’s done some amazing things throughout his career.

He’s won 25 Grammy awards. He’s been awarded a Lifetime Achievement Award from the National Civil Rights Museum. He’s been named one of the United Nations’ Messengers of Peace. And, in 2014, Barack Obama awarded him the Presidential Medal of Freedom.

But for all of those achievements, there’s one specific moment in Stevie Wonder’s career that especially sticks in our minds.

At the 58^th Annual Grammy Awards—back in 2015—Stevie Wonder announced the award for Song of the Year (which went to Ed Sheeran for ‘Thinking Out Loud’, before you Google it).

Before announcing the award, Stevie offered this to the millions watching:

“We need to make every single thing accessible to every person with a disability.”

Cue rapturous applause. Not just from the people in attendance at the ceremony, but from us too; all the way over here in Australia.

As designers and developers, we believe accessibility is paramount.

From an ethical perspective, accessibility is crucial. We want—and need—to create equitable experiences for as many people as possible, because meaningful access to digital information and services is a basic human right. Plus, many governments, private organisations, and public sectors around the world have mandated accessibility requirements for digital service provision.

Creatively, accessibility is inspiring. Historically, designing for people with disabilities has driven many crucial technological innovations. Without designers and technologists focusing on accessible design, we likely wouldn’t have:

• Auto-complete and predictive search functionality, which was originally created to make life easier for people with disabilities.
• Voice recognition technology and voice-controlled applications.
• Some variants of artificial intelligence, which have progressed thanks to research that was initially done in order to provide greater context for people with low vision or blindness.

Lastly, there’s a clear and obvious business case for accessible design. People with disability represent around 15% of the world’s population. That’s roughly one billion people. Additionally, although they may not identify as people with disability, many members of our ageing population here in Australia will experience lowered vision and motor difficulties at some point in life. So accessible design is likely of consideration for even more people moving forward.

Each of these is a compelling case for accessible design in and of itself. But more broadly, wouldn’t you want to create products and experiences that everyone can enjoy? It just makes sense, really.

While there are established guidelines for accessible design and development, we’ve picked up a few tricks in our experience building highly regarded products for organisations like Guide Dogs, GenV, Mercy Health, and the Alzheimer’s Society of Canada.

Some highly accessible sites created with some of our favourite organisations.

Here are some tips and techniques we’ve learned along the way.

1. Be mindful of colour contrast, ratio, and size of text.

What’s the consideration?

If you’re not careful with text decisions, people with low vision or blindness may have difficulty differentiating certain sections or components of the experience. For example, it’s tough to interact with a ‘get in touch’ button when the text and the size or shape of the button blends seamlessly into the background of the interface.

Page text should be large enough to read easily, and user interface components should be designed with sufficient contrast to the background. Additionally, try to ensure that colour is not the only means of communicating information.

Things you can try:

For colour contrast, there are multiple tools available for designers and developers to check foreground and background colour combinations of all DOM elements. These will help determine whether there’s sufficient contrast for people with low vision and those with colour-blindness.

For ratio and size of text, give people the ability to increase the text size on the site, and the ability to strengthen contrast by converting into ‘black and white’ mode.

Small animations can also help people to identify the interactive elements of a page. For example, you can use hover states to show that a button is clickable. Hover and focus states are also useful ways to indicate that a button or link is clickable or navigable for people using the keyboard.

Buttons should feature a range of interaction states to convey different states.

Pro tip: avoid repeating gifs and give people the option to play video content.

We also use ARIA roles on various buttons, tabs, and menu toggles to indicate their uses and states for people using screen readers. For example, identifying when the navigation menu is open and when it is closed.

Here’s how people using a screen reader might experience navigation.

Tools you can use:

• ‘Stark’: Stark is a design plugin—compatible with Figma, Sketch, Adobe XD and more—which allows you to quickly and easily check contrast, simulates the experience of people who are colour blind, suggests colour contrast combinations, and more.
• ‘Contrast ratio’: This tool provides a visual indication of text/background colour contrast, along with precise contrast ratio information.
• ‘Contrast checker’.
• The WAVE Chrome extension: WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.

Stark is a great way to iteratively validate different design decisions.

2. Factor for accessible forms.

What’s the consideration?

Most forms have specific inputs that require high levels of interaction from the person filling out the form.

Remember the challenges associated with the ‘get in touch’ button that disappears into the background? Take those same challenges, and then imagine adding a credit card number, rather than just clicking on a button.

Poorly designed or inaccessible forms can be problematic for people with low vision or those with motor-coordination difficulties.

Things to try:

• Form fields should always be easily discoverable, so people can differentiate form inputs from other components throughout the site. Each field should have a clear visual state differentiation to indicate which level of interaction the field is in. For example, Active, Hover, Focus, or Disabled. Provide clear visual feedback on which form element is currently focused, so that when people type on their keyboard, it is clear they’ll be filling the input for the focused form element. Disabled or read-only form elements should be treated as non-editable form inputs, and the screen-reader should notify the person accordingly.
• Ensure there’s a clear visual indication of any errors that occur, to provide people with clear feedback for any form elements that are filled incorrectly. This could be an email address that is mistyped, or a phone number that doesn’t include a country code. It’s important to include some context or messaging to explain why the input is invalid, rather than just a visual indication in isolation. If the person submits the form with incorrect values, it’s also best practice to automatically focus on the first invalid field. This saves the person from having to hunt through every field to find the problematic input.

Give people clear and immediate feedback on any misapplied form inputs.

• Always ensure there are guidelines and assistive elements to help people provide the right type of information for each field. For example, if a field requires a phone number with an area code written in brackets, it would be helpful to tell the person that we expect (09) 1234 5678 as the valid format.
• Field lengths and structures should reflect the type of information you expect people to provide. For example, a credit card’s expiration date should be a smaller field than the cardholder’s name. We can also use a ‘maxlength’ property to determine the maximum number of characters for a specific field. For example, the ‘expiry month’ and ‘expiry year’ fields will always be a maximum of two digits each.
• Forms that are laid out vertically are easier to read and scan than forms that feature side-by-side fields. That said, if you have form labels above an input field and the form is laid out vertically, it is acceptable to split the form into two columns for large screen sizes.
• Form labels are crucial; it is considered bad practice to leave out form labels in favour of providing placeholder text within the input field itself. This is because placeholder text disappears as soon as the person types anything in the field, making it difficult to review the form before submitting. For easier scanning and quick reading, it is also recommended to keep labels above each form field.

3. Validate design decisions by testing with people from all backgrounds, ages, and abilities.

What’s the consideration?

Getting real people to engage with your proposed design is always illuminating. When you conduct user testing with a broad-spectrum demographic—and particularly with people who will engage with your designs using different technologies, like screen readers—it’s even more so.

Things to try:

This one’s pretty straightforward: conduct user testing sessions with real people who are representative of the types of users who’ll interact with your product.

It’s always valuable to follow accessibility guidelines, but don’t rely entirely on tools, scores, and evaluations. Get your prototypes in front of real people!

4. Cater for people who navigate using the keyboard.

What’s the consideration?

Keep in mind that some people aren’t able to use a mouse or a trackpad. As a result, they rely on using the keyboard to navigate through sites.

These people will innately use the ‘tab’ key, ‘shift+tab’ and the arrow keys to navigate through content. In our experience, keyboard users may also use other assistive technologies simultaneously, such as screen readers like VoiceOver or braille readers.

Things to try:

• Remember that the focus state of any active components become extremely important for people to identify where they are in any page. It’s also worth being mindful that many native form elements have accessibility features already built into them. Developers should be careful when using custom controls in projects; like for example, an interesting dropdown plugin. You should always check that any plugin(s) used have accessibility baked into them and accommodate people who use a key-board only approach to navigation.
• If you’re using apps, plugins, widgets or JavaScript techniques that trap the keyboard—a pop-up modal, for example—make sure you provide a clear close button so people can leave the situation.
• Test everything thoroughly yourself. Use your keyboard to navigate between all links, buttons, form fields, and other features. The current focus should be easy to identify, and the order of movement within any page or modal should echo the visual layout. While you conduct this testing, ask yourself the following questions:
  • Can I access all features?
  • Can I operate all controls?
  • Is it reasonably easy to identify where I am on-page at any time?
  • Does the focus wrap within the entire page or modal dialogue?

Resources you can use:

• The University of Washington’s Keyboard Accessibility Checklist
• WCAG’s guidelines for keyboard control functionality

5. Be considerate of screen readers.

What’s the consideration?

When you’re designing the layout of a product, interface or experience, you’ll usually start by thinking about colours, fonts, whitespace, imagery and more.

When you design with accessibility in mind—and specifically, to cater for people with blindness—you have to be mindful of whether these visual cues can be repurposed or replicated by a screen reader.

Things to try:

• Avoid using autoplay functionality on any videos. While this practice is generally bad for accessibility, the sound in any video that begins to play automatically will drown out the audio cues provided by the screen reader.
• Always use meaningful directional copy, particularly when it comes to buttons and links. People need clear direction on what they will accomplish or where they will go by clicking on something. Take the example ‘click here to contact us’. If the link is simply ‘click here’, the person won’t have enough information on what will happen once they click.
• On the topic of copy, be sure to cater for descriptive alt text when you upload any photographic imagery. Alt text provides a narrative for the contents of each image which the screen reader can relay to the person, rather than describing the image as ‘picture’ or ‘photo’.
• Use ARIA (Accessible Rich Internet Application) tags to provide additional information for screen readers as to what is happening. For example, a modal can have an ARIA-role of ‘dialog’. This instructs the screen reader to pronounce the modal as a dialog box, so the person will know they’re interacting with a modal or dialog window instead of browsing the main content of the page.

If you’re using a modal, give people clear direction for returning to the main page content.

6. Don’t hide any information in hovers.

What’s the consideration?

Make sure you don’t hide any information through the use of hovers.

For example, say you have a card style element with an image as a default state. Imagine that supplementary text describing the image or the content of the card is only revealed on mouseover. A person navigating via keyboard will only be able to identify the image, and not the additional content triggered by the mouseover. People who use their keyboard to navigate a website or interface will rely on all actionable items being visible on screen.

Things to try:

• Using Focus Indicators is a great way to make sure all information is discoverable. In this context, focus is key to guiding people through their experience of an interface. Focus indicators give people context as to where they are on a page; using them ensures that no context will be either hidden or missed as people navigate through the website.

Focus indicators in action on the Guide Dogs website.

7. Avoid over-reliance on animations and transition effects.

What’s the consideration?

Fast animation and transition effects—like visual animations for page-loading, for example—can cause people with photosensitivity to experience nausea, headaches, and in extreme cases even trigger seizures.

Parallax scrolling effects can also cause symptoms similar to vertigo due to vestibular sensitivity.

Things to try:

• Keep all animations slow and subtle. Any animation effect you use shouldn’t last more than a couple of seconds.
• If you use any .GIFs, make sure they aren’t on an infinite loop.
• In some cases, people can enable a setting which suggests that they prefer ‘reduced motion’. This setting can be selected at the operating-system level, or the browser-level. Either way, developers can respect that request and provide an experience with reduced—or no—animation effects. Find out more about these settings.

Animations should add delight and craft without being overwhelming.

8. Always use established conventions that people are familiar with.

What’s the consideration?

Regardless of accessibility considerations, your new website is probably not the first digital interface people will have visited.

As with most user-experience design, consistency of convention is key. People with low vision, blindness, motor-coordination challenges, or any other accessibility consideration will likely already be well versed in other conventions of digital design and development practice. You can and should rely on conventions like underlined hyperlinks, navigating through the header and footer, and more.

Things to try:

• Leverage predictable patterns and established conventions where possible, and always keep the interface consistent throughout the entirety of the experience. There’s no need to reinvent the wheel!
• Avoid ambiguous terms for navigation, and use familiar icons and symbols if you’re using them to provide additional context as directional cues.

***

So there you have it. Hopefully now you’re ready and raring to embrace accessible design with some of the tools, tips and techniques we use every day.

Stevie Wonder may have been very superstitious, but he makes an incredibly salient point, and one that’s worth closing on: “we need to make every single thing accessible to every person with a disability.”