The author, Bluegrass Digital’s Nick Durrant

A few years ago, Guillermo Robles took Domino’s Pizza to court. His issue? The popular pizza brand’s website. As a blind man, Robles was unable to order food from Domino’s even when using screen reading technology. His attorney explained that if the blind and visually impaired can’t access websites and apps, they are unable to fully and equally participate in modern society. This amounts to discrimination. And the courts agreed.

Not only can a lack of accessibility be bad for your business’ reputation, it can also be bad for your bottom line. When you consider that about 16% of the world’s population – or around 1 in 6 of us – lives with some form of disability, according to the World Health Organisation, failing to speak to these people and cater to their needs and preferences simply doesn’t make good business sense. But beyond the business side of things, I think it’s most important to build websites and apps with accessibility in mind so that people like Robles are given the opportunities to participate in our digital world.

This is exactly what the World Wide Web Consortium (W3C) stands for. W3C develop protocols and guidelines that ensure the long-term growth of the web. As part of this, W3C’s Web Accessibility Initiative (WAI) and their Web Content Accessibility Guidelines (WCAG) aim to provide businesses with a set of standards they can use and resources they can follow to make their websites, apps and other digital content creations more accessible to everyone.

Below, I unpack six things you can do to make your website or app more accessible.

1. Use headings to organise and structure content

Structure is incredibly important for screen reader users. By carefully labelling different themes or topics, you can make it simpler for screen reader users to navigate through the content. If screen reader users can navigate through a page according to its headings, it saves time because they can skip to the section that is most relevant to them and only start reading at that point. With this in mind, it’s also essential to lay out your app or web content in sequential order and in a way that is logical and well-structured.

2. Choose colour carefully

The right colour attracts attention and improves how you convey information. From an accessibility perspective, choosing the right colours is incredibly important and developers should consider the spectrum of colour blindness when designing websites and apps. If there isn’t enough contrast between the foreground and the background, people with colour vision impairments or low visibility may find it difficult to view content. For example, red and black or red and green colour combinations can cause confusion because some cannot distinguish between these colours, meaning that the text will be illegible. 

Black text on a white background has the highest readability but this combination can cause eye strain and/or halation if pure black is used with pure white – again emphasising the importance of choosing the right colours.

3. Include proper alt text for images and captions for videos

Imagine you’re reading a web page aloud to someone over the phone so they can understand what the content is about. Would you feel inclined to describe the images on the page? Probably only if you think they might add value to the person you’re talking to. If this is the case, that image needs alt text. Sometimes an image is used purely for decoration and won’t need alt text but you can add “aria-hidden” to the image so that they are hidden from screen readers; thus, removing some of the ‘noise’ from the page. When an image has a clear purpose, it is important to include clear alt text so that screen reader users can understand what message is conveyed via the images on the page. This is especially true for imagines like graphs or infographics. Similarly, if a video appears on the webpage, it’s critical to include a caption to that users know if the video features information they need.

4. Give links descriptive names

If you’re hyperlinking content, be sure to use text that properly describes where the link will go. And remember that you’re trying to communicate with other humans so be sure to make your use of language feel like you are just talking to someone. When designing with accessibility in mind, “click here” is not descriptive enough because it doesn’t explain anything about the hyperlink. In saying this, it’s equally important to be concise so that users can easily scan content for links and decide if it’s worth their while to click through.

5. Design your forms for accessibility

Did you know that a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a totally inaccessible security measure that is commonly used to validate form submissions? Should users need to fill out an online form, be sure that the form is easy to navigate and that all fields are clearly labelled. If anything is unclear, screen reader users won’t know how to complete the form. Some ways to go about this include adding subheadings. In cases where fields are similar, you can group these under different field sets; so “First Name”, “Last Name” and “Date of Birth” could be grouped together as “Personal Information”. If certain information is “Required”, this should be labelled accordingly so that the screen reader can alert the user that a specific field must be completed.

6. Choose a content management system that supports accessibility

There are so many content management systems you can use to build a website but if you want to develop with accessibility in mind, you need to choose a CMS that simplifies testing for accessibility. Umbraco gives brands the freedom to approach accessibility in a way that matches their requirements. But it’s not only about users. They also have accessibility features in place to enable developers with disabilities to use Umbraco.

By making websites accessible, we ensure that everyone has equal access to online content. Hesitant about where to start on your accessibility journey? We can help. Get in touch here.

Alternatively, connect with Bluegrass Digital on Facebook, LinkedIn or Twitter.