How to Build Products With Accessibility in Mind

Getting Familiar With Accessibility 

The process of designing a product always begins with the understanding phase, where you have to ask: what is the root of the problem? Who are my users? What behaviors or needs do they have? A solution cannot be created without truly understanding the problem we are facing.

The same thing happens with accessibility. We cannot design with accessibility in mind if we do not understand what it is and what the parameters are to know if a design is accessible or not.

If we look for “accessibility” on dictionary.com, it is defined as “the degree of slope which allows any object to be used by the public.” Over the years I have created my own definition that allows me to understand and be clear about the role of accessibility in my design process.

Accessibility for me is “the possibility that any user, whether they have a disability or not, fails to achieve their goal with the product.” This allows me to think about the experience based on functionality and question myself during the process, asking, for example: “If a user with a serious visual disability needs to make a transfer to a family member through my application, will they really be able to achieve their task?” This allows me to think about the user experience from different perspectives and contexts.

Getting Started

When we design we should always ask ourselves: How do I know that my design is accessible? There are many ways to detect if a design is accessible or not. In fact, search engines bet more every day and give a higher score to sites that obtain a good rating on accessibility, taking into account these three main aspects:

• User experience
• Visual elements
• Code writing

In regards to these three points, we’ll discuss the tools you can use to significantly improve accessibility on your platforms.

1. User Experience

Focus States Are the Key

Focus indicators help people know which specific element has the keyboard focus and help them understand where they are on a certain area of the website. These states are commonly used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation.Essentially, the software reads the context that happens on the focus states and allows the user to hear the action that they need to do.

The elements that should be focusable are links, form fields, widgets, buttons, and menu items. They need to have a focus indicator that makes them look different from the elements around them.

Always Include Labels or Instructions With Form Fields and Inputs

People who use screen readers navigate through a form using the Tab key that allows them to jump through the inputs and labels on the form. The <label> element is read for each input on the form. Any non-label text usually gets skipped over.

Helping people to understand what they should do and write in a form will significantly increase the overall accessibility of your website, even when the person is filling an input; the user should never lose context with what they’re writing.

This practice doesn’t mean that you have to fill your website with a bunch of unnecessary labels and information -just make sure to provide clear and essential cues. Too much instructional text can be just as much of a problem as too little. The goal is to confirm that the individual has enough information to complete their tasks without friction.

2. Visual Elements

Find Balance With Color Contrast

Color contrast is one of the most common issues that we find on accessibility these days. People who have low vision could find it difficult to read text from a background color if it has low contrast. The World Health Organization (WHO) estimates that there are 217 million people who have moderate to severe vision impairment. So, it is critical to consider the color and contrast as a key element in our product building process, especially because we do not want our users to make the wrong decision or have trouble using the product just because they can’t read it or understand it properly.

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 forgiving with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.

Some tools will help you check this quickly. If you use a Mac, I recommend getting the Contrast app. With this tool you can instantly check contrast using a color picker. If you want to get a more detailed score, I recommend entering your color values onto the WebAIM color contrast checker.

Don’t Rely on Color for Important Decisions

When you’re communicating something important, showing an action, or prompting a response, don’t use color as the only visual cue. People with low visual acuity or color blindness will have a hard time understanding your content.

Try to use an indicator other than colors such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone. Add an icon or include a title to the message. Consider adding a visual cue, such as font-weight, or underline text style to linked text in a paragraph, so that the links stand out.

Elements with more complex information like charts and graphs can be especially hard to read when you only use color to distinguish the data. In these cases, use other visual aspects to communicate information like shape, labels, and size. You can also try incorporating patterns into your fills to make the differences more apparent.

A great example of this guideline is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture.

3. Code Writing

Useful Text for Images and Non-Text Content

People with low vision often make use of screen readers to “hear” the web. These tools convert text to speech so that the person can hear the words on a site.

There are two ways that you can present an alternative text:

• Within the <alt> attribute of the image element
• Within the context or surroundings of the image itself

Try to describe what’s happening in the image, and how it matters to the story, rather than just saying something like “picture.” Context is everything.

If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content, then adding an empty <alt> attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

Google is working on an image captioning AI that can describe photos with 94% accuracy. This model is open-sourced and still in the research stage – hopefully, we’ll start seeing it used in different products. In the meantime, we should manually provide text that describes the meaning and function of the images in our content.

Mark Up Your Content 

Headings mark where the content starts – they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page.

Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low vision get an overview of the page by reading each heading in a hierarchal flow.

It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page.

Not using markup correctly affects accessibility. Don’t use HTML tags for a style effect only. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. The people that use your site can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings <h1>.

Building for Accessibility in Your Next Project

The focuses and tools outlined in this blog should provide you with a solid starting point for building your products with accessibility in mind. The result will be that you provide a better experience for all of your users, which can increase your user retention, improve productivity, and increase revenue sourced from the product.

If you’re looking for an expert development team that makes accessibility a core element of its design process, reach out to us today, and we’ll talk about how Very can help with your next project.