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.