It’s hard to imagine your daily workflow without the internet and a screen of some form. Whether you’re on Facebook, reading the NY Times, reviewing your online bank statement, or taking a picture, it’s very likely that you spend hours of time online. Here’s where web accessibility comes into play. Social media, skimming through articles, watching videos, and even submitting forms should be tasks anyone can do on a website, no matter an impairment.
The World Wide Web Consortium (W3C) offers this definition of accessibility: “Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.”
Another way to think of accessibility is allowing all users to see your web assets the way you intended for them to be viewed. You’ve spent all this time and money to create a beautiful app with visual cues, headers, links, and related content - why restrict this content to just those that can view it? If your company has a video explaining your company culture and there are no captions, how can a deaf person understand the words?
Here are the 10 most common accessibility mistakes and how to fix them:
Having a higher color contrast allows users with low vision or color deficiencies to understand the information on your site. This doesn’t mean you have to compromise the vision of your site, as there are a lot of ways W3C advises designing for optimum contrast.
The color contrast of a website should be at least 4.5:1, with a few minor exceptions. A quick test of your color contrast can be done by using apps like Color Oracle, Colour Contrast Analyser, or a11y to review your site and see what suggested color combinations aren’t up to standard.
You can also see a live view of your site as those with color blindness are reviewing it by using the Toptal Color Blindness Filter.
Not only does adding meaning to links help your SEO, it allows visually-impaired users to understand what is happening on the page.
For example, if you have an icon with a picture of mail on it and no link description, a visually-impaired user would not know that links will send an email to info@yourcompany.com.
You probably have links that go to additional content and “read more,” but there’s typically no hierarchy to them. A visually-impaired user hears these “more,” “read more,” “learn more” links out of context as they navigate the site.
To provide the context for them, best practice would include adding hidden text in the link. For example, in “Learn More,” your hidden text could be “Learn more about how Six Feet Up can build faster apps.” This extra information is easily relayed to the user and makes navigating around your site much more logical in approach.
Screen readers can’t describe to a visually-impaired user what is happening in an image if there is no alt-text. Essentially, omitting the alt-text attribute means a screen reader will read out the entire image URL instead of a sentence or two. Cumbersome, right?
The difference between describing an image as: “Child playing” and “5-year-old child playing with red ball in new community playground” is a drastic difference in understanding what the image is portraying.
Along with #4, all images and videos on your site will need captions. The screen reader is describing all things happening on your site, and without these important descriptions, users that rely on screen readers are missing this content entirely.
If your videos are on YouTube, you can allow auto-captioning. A word of caution - if you have unique or company-specific words, it will not do a great job interpreting the caption. Here is a step-by-step guide of how to add custom YouTube captions. Another option is hiring captioning services like Rev to transcribe the recordings and you can post them directly on the site without having anyone type the full video and image descriptions.
If you’re visually scanning a page, you can see what is larger and therefore more important to review, no matter where it is placed on the site. A visually impaired user reads the page in the order you wrote, so navigation by heading structure is crucial.
Here’s a trick: create the structure like a speech outline. Title should be the largest, then headers, then subheaders, and so on. Shifting your design process from a visual to a semantic structure can be the difference between an accessible and non-accessible experience.
Accessibility rules require that all forms have labels with a “for” tag pointing at an “id” in the form element. Each “id” needs to be unique as many screen readers do not allow for multiple labels associated with the same form element. That would be like the screen telling you the “Name” field is for both “Full Name” and “First and Last Name.” They’re the same thing, just two different ways of interpreting the information. However, a screen reader will not relay that information to the user. Simple, unique, and direct “ids” are the easiest way to present your form label.
A visually-impaired user should be able to accomplish every action and scroll through using their keyboard only. This means you’ll need to have “Keyboard Focus” unhidden on your site for navigation. A quick test you can do is use the tab bar and see if you can navigate the page using only that key. If it’s not easy, it’s likely visitors won’t spend too much time on your site.
In addition to keyboard-only access, you will need to verify there are no keyboard traps. This means you’ll need to implement standard exit options for moving focus away from an element. For example, if you have a pop-up discount bar when the user navigates to a certain page, there needs to be a way to exit that pop-up by using only the keyboard.
Sometimes you have to take shortcuts when you’re on a deadline but cutting corners can negatively impact your accessibility score.
When possible, we recommend using true HTML tags when creating content, as they have semantic meaning, as opposed to Aria. Aria has a place in development, but when it comes to accessibility, it is almost always best practice to use HTML. It’s the difference in a screen reader and clarity between
<div role="checkbox" aria-checked="false" tabindex="0"></div> (ARIA)
and
<input type="checkbox"> (HTML)
We get it: you’re excited about a specific topic and you want to use all caps to relay that to your users. However, did you know that each capitalized letter is read out individually by screen readers? “BLOG” will be read as “B-L-O-G”, not “Blog.”
This can be fixed in CSS using “text-transform: uppercase”. There’s no reason you can’t use all caps on your site, but creating accessible text is as vital as relaying the information in the first place.
As of this posting, WCAG 2.1 is the latest standard in the European Union while the United States is using WCAG 2.0 AA. However, both standards share key guidelines.
A few of the low-hanging, easy to fix items that you can check off include color contrast, image alt-text, and using real HTML tags instead of <div>. Making these simple changes will allow a new market of users to review your website and learn about your services.
In general, a well-organized (and accessible) website allows users to quickly get the information they need, so web accessibility should not be one person’s sole responsibility. This is a collective effort throughout your organization, with each department playing a vital role in the implementation.
Take the time, be proactive, and implement accessibility into your site as quickly as possible. If you’re still stuck, reach out to us. Have a question? Need help? Let us know; we are happy to help.
Six Feet Up, Inc.
11208 Windermere Blvd.
Fishers, IN 46037 - USA
Phone: +1 (317) 861-5948
Email: info@sixfeetup.com
