Accessibility Tips for your Design Team

No digital accessibility project lies in the hands of one person – developing for an accessible website or app almost always involves team members from multiple departments, working together to achieve the goal of still higher levels of accessibility and compliance. When content is written, produced, or developed with accessibility in mind, it can make other parts of the process easier, but no single department can be tasked with making it happen on their own.

What does this mean for your project? First and foremost, it means getting everyone to buy in to the need for, and goal of, digital accessibility. This includes content creators, planners, managers, and of course your design team.

Like most creative professionals, web designers love a challenge. Being presented with a problem to solve is one of the keys to an enjoyable project, and developing a more accessible website or app is exactly that – a well-defined problem that can be solved with strategic thinking, great ideas, and hard work.

So how do you get your design or development team to buy into the accessibility project? Here are a number of key things that everyone—especially designers—should know about accessibility.

Accessibility and innovation go hand in hand

Occasionally, designers can see accessibility requirements or standards as limits to design. They may be thinking of simple websites from twenty years ago, or the idea of a website reduced to PDF documents.

In truth, however, accessibility can present interesting and important design challenges, all of which are aimed at making the end result available (and useful) to even more people. And getting more people to use your site, app, or digital resource can never be a bad thing.

To hover or not to hover

In short – NOT to hover is the answer.

When it comes to users who are relying on keyboard-only navigation, or those who are experiencing motor-related limits to their browsing (temporary or permanent), requiring people to hover on an item for more information limits access to that information. For example, anyone utilizing keyboard navigation won’t be able to see that there is a button or link available if they’re required to hover on a portion of the content.

There are a number of alternative ways to organize secondary information relative to the primary content, such as placing options inside of menus, changing the contrast of options, or including info icons instead.

Proper forms

Forms are prevalent everywhere online these days, but too often they are neglected in terms of their accessibility. There are a number of simple considerations, however, that make forms more user friendly.

First, clearly defined boundaries for form fields make it much easier for users to navigate – especially with adaptive pointing devices and other accessibility technology.

Related to that, form fields need helpful and accurate labels which help in terms of navigation and clarity. Providing users with clarity takes nothing away from the design of the page or form, but makes a tremendous difference for users relying on assistive technology and tools.

Keeping things in focus

Visual focus is critical not just for the appearance of your site, but also for the navigation of it. Too often, designers who are using a default CSS will forget to change a critical line of code – the line removing the style attribute from focus.

Why is visual focus important? If you can imagine browsing your favorite site with only your keyboard (and, perhaps, a screen reader), you can quickly get a sense of how important focus is in terms of finding your way through the web. This simple feature makes a huge difference to users relying on keyboard navigation.

The most important thing here is to remove the default focus state so that your chosen focus state is the dominant one, and there is no overlap between the two. Once defined, the focus state will be incredibly helpful to a lot of people.

Compare and contrast

The WCAG (LINK TO: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) establishes a minimum contrast ratio for the difference between text and background colors. This visual difference is critically important for any users with low vision, color blindness, or a range of conditions that affect visibility.

A number of tools exist to help with contrast, but in general following the recommendations at the link above will make it easier to provide a more clear and enjoyable experience to users across a broad spectrum of abilities and approaches.

There’s more to it than color

Contrast is also important because of a simple limitation – you can’t rely solely on different colors to differentiate or communicate information.

Users who have difficulty distinguishing between certain colors, or those who may be dealing with colorblindness, will not be able to differentiate areas on a page or those requiring attention/correction solely based on color differences.

When dealing with form field errors, for example, some users may not know if or when something needs to be corrected if you are relying solely on color differential. As a result, you need to include other methods of communicating these issues to a broader range of users.

Make a selection from the menu

There’s a pretty big difference between a menu (a list of options), and what W3C defines as a non-modal dialog.

The first is a clearly defined list of choices, arranged neatly from top to bottom, and there is only one option at each level. A non-modal dialog is an example where each row item has more than one option or selection available—an “edit” and “delete” button next to each, for example.

If you think about navigating the page with the arrow buttons on your keyboard, you can very quickly understand where the dialog example can get confusing (or, in some cases, unusable).

When in doubt, simplicity is key. Follow the WAI standards for menus and make interaction points or choices easy for people to understand, and your site should be much more accessible.

—

In every creative or technical field, limitations are present. For those who embrace the challenge, these provide both a useful framework for their project, as well as a fun puzzle to solve. Viewing accessibility standards as critical parts of your design brief, rather than restrictions on the possibilities, will no doubt make your project more enjoyable and more accessible.