Accessibility Matters: How to Make Your Website Reach Everyone.

Why design for accessibility?

As developers, we have the responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation. The great thing about making our work accessible is that it brings a better experience to everyone. Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including people with the following disabilities:

• Visual impairments like colour blindness or low-vision
• Motor or mobility issues like wheelchair users’ concerns
• Auditory impairments like hearing difficulties and audience problems
• Seizures like photosensitive epilepsy
• Learning or cognitive impairments like dyslexia.

"There are over 1 billion people worldwide who have a disability. This data alone should convince us of the importance of designing for accessibility. There is also a strong business case for sites with good accessibility. Google has been paying more attention to accessibility as far as search rankings are concerned meaning we can reach a bigger audience, the sites will also have faster download times, they encourage good coding practices, and they always have better usability."

The following guidelines are relatively easy to implement and can help our products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0), and work on the most commonly used assistive technologies – including screen readers, screen magnifiers, and speech recognition tools.

1. Add enough colour contrast

People who have low vision could find it difficult to read text from a background colour if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million who have moderate to severe vision impairment. So, it is critical to consider the sufficient contrast between text and backgrounds.

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 18pt or 14pt bold, the minimum contrast ratio drops to 3 to 1. Some tools will help us check this quickly. For Macs, the Contraste app is recommended. With this tool we can instantly check contrast using a colour picker. If we want to get a more detailed score, we can enter our colour values onto the WebAIM colour contrast checker. This tool will calculate the score for both regular and larger text sizes in different conformance levels (A, AA, AAA.) We can change the colour values and see the results in real time.

2. Don’t use colour alone to make critical information understandable

When we are communicating something important, showing an action, or prompting a response, we should not use colour as the only visual cue. People with low visual acuity or colour blindness will have a hard time understanding our content. We should try to use an indicator other than colour such as text labels or patterns. When showing errors on the screen, we shouldn’t rely on coloured text alone, add an icon or include a title to the message. We should consider adding a visual cue such as 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 especially hard to read when we only use colour to distinguish the data. We should use other visual aspects to communicate information like shape, labels, and size. We can also try incorporating patterns into our 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. A good trick is to print our graph in black and white and see if we can still understand everything in it. We can also use an app like Color Oracle, which shows us in real time what people with common colour vision impairments see. These tips help us make sure that the information in our site is colour-agnostic.

3. Design usable focus states

Focus states should be added to all interactive elements. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. We might find these default focus indicators not very pretty and be tempted just to hide them. However, if we get rid of this default style, we should be sure to replace it with something else.

Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating our site. These are 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. 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.

We can design focus indicators that fit the style of our sites and goes well with the brand. We should create a state that is highly visible, with good contrast, so it stands out from the rest of the content.

4. Use labels or instructions with form fields and inputs

Using placeholder text as labels is a mistake when designing a form. We might be tempted to go with this trend or want to make our design more simple and modern however we should avoid doing so. Placeholder text is usually grey and has low contrast, so it’s hard to read, also it is hard to know what the fields are about once the label is gone. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over.

We should always help people understand what they should do and write in a form. It’s best if labels don’t go away, even when the person is filling an input; people should never lose context with what they’re writing. When designers hide descriptions or directions in their forms, they’re sacrificing usability in favour of simplicity. This practice doesn’t mean that we have to clutter our design with unnecessary information, just make sure to provide 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.

5. Write useful alternative text for our images and other 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 we can present alternative text.

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

We should 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 which is the worst experience you can provide.

6. Use correct markup on our 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 hierarchical flow.

It’s important to use proper structural elements when we 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. We shouldn’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 our 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>.

7. Support keyboard navigation

Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content. Many people typically use the Tab key on their keyboard to navigate through interactive elements on a web page: links, buttons, or input fields. The focus state mentioned before provides a visual indicator of the component that is currently selected.

As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom – header, main navigation, content buttons and inputs, and finally the footer. A good practice is testing our sites 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’re in a good spot!

Last, but not least, we should be careful with the size of our navigation – this includes the number of links and the length of the text. Tabbing through long menus may be demanding for people with motor disabilities. And listening to lengthy links can be time consuming for people that use screen readers. Providing ARIA landmarks or HTML5 structural elements like <main> or <nav> will make navigation easier.

8. Use ARIA

ARIA (Accessible Rich Internet Applications) is a set of roles, states, and properties which can be added to HTML to describe the meaning and purpose of common user interface elements that don’t have semantic tags in HTML. By supplementing HTML in this way, ARIA attributes make web content and applications more accessible to people using assistive technologies.

Conclusion

As developers, it is our responsibility to champion accessibility. With it, we make technology usable to all people regardless of their abilities, economic situation, age, education, or geographic location.