a few years ago, William Robles took Domino’s Pizza to court. Your problem? The website of the popular pizza brand. As a blind man, Robles couldn’t order food at Domino’s even when he used screen-reading technology. His lawyer explained that if the blind and visually impaired cannot access websites and apps, they cannot participate fully and equally in modern society. This amounts to discrimination. And the courts agreed.
Lack of accessibility can not only be bad for your company’s reputation, it can also be bad for your bottom line. If you consider that about 16% of the world’s population, or about 1 in 6 of us, lives with some type of disability, according to the World Health Organization, not talking to these people and catering to their needs and preferences just doesn’t make business sense. But beyond the business side of things, I think the most important thing is to build websites and apps with accessibility in mind so that people like Robles have the opportunity to participate in our digital world.
This is exactly what the World Wide Web Consortium (W3C) stands for. W3C develops protocols and guidelines that ensure the long-term growth of the web. As part of this, the W3C Web Accessibility Initiative (WATER) and its 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. .
Here are six things you can do to make your website or app more accessible.
1. Use headings to organize and structure content
Structure is incredibly important to screen reader users. By carefully tagging different themes or topics, you can make it easier for screen reader users to navigate your content. If screen reader users can navigate a page according to its headings, they save time because they can jump to the section that is most relevant to them and only start reading at that point. With this in mind, it is also essential to design your application or web content in sequential order and in a logical and well-structured way.
2. Choose the color carefully
The right color draws attention and improves the way you convey information. From an accessibility perspective, choosing the right colors is incredibly important and developers need to consider the spectrum of color blindness when designing websites and apps. If there is not enough contrast between the foreground and the background, people with color vision problems or low visibility may have difficulty seeing the content. For example, red and black or red and green color combinations can cause confusion because some cannot distinguish between these colors, which means the text will be unreadable.
Black text on a white background has the highest legibility, but this combination can cause eyestrain and/or halo if pure black is used with pure white, again emphasizing the importance of choosing the right colors.
3. Include Proper Alt Text for Images and Captions for Videos
Imagine that you are reading a web page aloud to someone on the phone so that 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 can add value to the person you’re talking to. If this is the case, that image needs alt text. Sometimes an image is used solely for decoration and you won’t need alt text, but you can add “aria-hidden” to the image to hide it from screen readers; therefore removing some of the ‘noise’ from the page. When an image has a clear purpose, it’s important to include clear alt text so screen reader users can understand what message is being conveyed through the images on the page. This is especially true for images like charts or infographics. Similarly, if a video appears on your web page, it’s critical to include a title so viewers know if the video presents the information they need.
4. Give links descriptive names
If you are hyperlinking content, make sure you use text that correctly describes where the link will go. And remember that you’re trying to communicate with other humans, so make sure you make your use of language feel like you’re talking to someone. When designing with accessibility in mind, “click here” isn’t descriptive enough because it doesn’t explain anything about the hyperlink. Saying this, it’s equally important to be concise so users can easily scan your content for links and decide if they’re worth clicking.
5. Design your forms for accessibility
Did you know that a CAPTCHA (Completely Automated Public Turing Test to Differentiate Computers and Humans) is a totally inaccessible security measure that is commonly used to validate form submissions? If users need to fill out an online form, make sure the form is easy to navigate and all fields are clearly labeled. If something isn’t clear, screen reader users won’t know how to complete the form. Some ways to do this include adding subtitles. In cases where the fields are similar, you can group them into different field sets; so “First Name”, “Last Name” and “Date of Birth” may be grouped together as “Personal Information”. If certain information is “Required”, it should be tagged accordingly so that the screen reader can alert the user that a specific field needs to be filled out.
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 build your website with accessibility in mind, you need to choose a CMS that makes accessibility testing simple. Umbraco gives brands the freedom to approach accessibility in a way that suits their requirements. But it’s not just about the users. They also have accessibility features to allow developers with disabilities to use Umbraco.
By making websites accessible, we ensure that everyone has equal access to content online. Unsure where to start on your accessibility journey? We can help. Get in touch here.
Alternatively, connect with Bluegrass Digital on Facebook, LinkedIn, or Twitter.
- The author, Nick Durrant, is Co-Founder and CEO of Bluegrass Digital
- Read more Bluegrass Digital articles on TechCentral
- This promoted content was paid for by the interested party
