Designing for Accessibility

Hands in a circle.

Digital accessibility is the practice of building websites, digital content, and applications that can be used by a wide range of people, including those who have visual, motor, auditory, speech, or cognitive disabilities.

Designing a website that is accessible does not have to be difficult and expensive. When creating a new site from scratch that meets the requirements for accessibility, you typically don’t have to add extra features or content; meaning it shouldn’t require additional cost and effort. However, keep in mind that fixing a site that is already inaccessible may require extra work.

At Provisio, we believe we have the power and responsibility to make sure that everyone has access to what we develop, regardless of ability, context, or situation. The great thing about making our work accessible is that it creates a better experience for everyone.

Let’s look at some simple steps for designing sites that are more accessible. These principles focus on web and mobile accessibility.

Add enough color contrast.

Color contrast is an often-ignored web accessibility problem. People who have low vision can find it difficult to read text from a background color if it has low contrast. According to the W3C, the contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios become more lenient with bigger and heavier fonts since they are easier to read at lower contrast. If using type that at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.

Use more than just color to make critical information understandable.

When trying to communicate important information, showing an action, or prompting a response, do not use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content.

It’s important to use an indicator other than color, such as text labels or patterns. When showing errors on the screen, don’t use colored text alone, add an icon or include a title to the message. Consider adding a visual cue like a font weight or underline text style to linked text in a paragraph, so the links stand out.

Elements with more complex information like charts and graphs can be particularly hard to read when you only use color to distinguish the data. Use other visual indicators to communicate information like shape, labels, and size. A good test is to print your graph in black and white and see if you can still fully understand everything in it.

Write helpful alternative text for your images and other non-text content.

Users with low vision tend to make use of screen readers to "hear" the web. These tools convert text on websites to speech so they can hear the words on a site.

When creating alternate text for the images on your site, try to describe what is happening in the image. The text should indicate how it matters to the story, rather than just saying something like "picture" - context is everything.

Support keyboard navigation

Keyboard accessibility is one of the most crucial aspects of web accessibility. People with motor disabilities, blind users that rely on screen readers, and people that don’t have precise muscle control are dependent on a keyboard to navigate content.

As you navigate through a page, the order of the interactive elements is critical, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page, meaning left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer.

A good test of your site’s accessibility is to try navigating it only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. If you can navigate through all your site without a mouse, you are in a good spot!

At Provisio, we design and develop your site so it is usable by all visitors and that any barriers to accessibility are addressed. We are experts when it comes to current accessibility features, and how they should be built into your site. We take the guesswork out of creating accessible sites to take your business further, faster. Unsure about your website’s accessibility? Interested in an accessibility review of your current site? Let’s connect!