Editors Note: This post was updated and revamped in November 2020 for better accuracy and comprehensiveness.
It might come as a surprise, but the Internet isn’t “one size fits all.”
Inaccessible website design prevents millions of Americans in the disabled community from enjoying an online experience most of us take for granted. Many of these issues could be resolved, however, using simple website accessibility tools.
For the roughly 19 percent of the U.S. population with visual impairments, learning challenges, hearing loss, and more, there are dozens of struggles lurking behind every URL. But making your website design accessible is a lot easier than you might think, especially when you know which tools to use.
Common Obstacles to Website Accessibility
Let’s talk about some common obstacles people with disabilities face when surfing the web and our favorite tools to check for them.
People with disabilities are the largest and most diverse minority group in our country. So it almost goes without saying that people with different disabilities encounter different obstacles when using the Internet. Still, there are several common challenges that can be caught and fixed with our favorite web accessibility testing tools.
1. Ambiguous link text and lack of alt text on images.
People with complete vision loss face obstacles with the software that provides computer-generated speech describing what appears on the screen, as well as the location of the visitor within the broader context of the website. Screen reader users often run into problems when developers fail to put appropriate tags on graphics, links, forms, or tables.
Browser Testing Tools:
There are a variety of great tools that can provide general accessibility evaluations for your website. Some of them even help simulate how the website may be presented to someone who is visually impaired.
- Web Accessibility Evaluation Tool (WAVE) - Run a URL through this free tool from WebAIM to evaluate your website's content. You'll get a list of issues, including images without alt text provided. WAVE is also available as browser extensions for both Chrome and Firefox.
- Lighthouse - This open-source and free tool from Google provides performance, SEO, and accessibility audits for websites directly within Chrome DevTools.
2. Websites that cannot be navigated without a mouse.
For people with either vision or motor impairments, websites are often navigated without the use of a mouse. In that case, a screen reader, keyboard, or switch may be used in place of the mouse.
Always test navigating your website with a keyboard (tab to move focus and space or enter to select).
It's as important for website developers to test the usability of the websites they develop in screen readers, just as they would in various browsers. There are a lot of different screen readers, and each of them works slightly differently. But even testing just one of the most popular screen readers can help identify roadblocks that are present on any screen reader.
The WebAIM Screen Reader Survey includes statistics about demographics and usage data about the usage of specific screen readers and their impact on accessibility.
Here is a list of the top screen readers:
- JAWS (Windows only) - Starts at $900
- NVDA (Windows only) - FREE
- VoiceOver (Mac only) - FREE/included on OSX and iOS
3. Information conveyed through color only.
For those with color blindness, low vision, blurry vision, or other visual impairments falling short of complete vision loss, it can be difficult to detect differences between certain colors.
These variations in perception affect how your design appears and if usability depends on perceiving color contrast, then your website will be less functional for some users.
Color Contrast Tools:
According to the Web Content Accessibility Guidelines (WCAG) regarding contrast, the visual perception of text must have a contrast ratio of at least 4.5:1 or 3:1 for large text. Even to most designers, these numbers don't mean a whole lot.
The good news is there are several great tools for evaluating color contrast in your designs and directly on websites.
- Contrast Finder - This tool allows you to evaluate the contrast of HEX codes and find accessible alternatives.
- Color Contrast Analyser for Sketch - A Sketch plugin that evaluates the contrast of text directly in the web design program!
- Color Contrast Analyzer Chrome plugin - Evaluate the contrast of any text and images on the web with this tool from the IT Accessibility Office at NC State University.
4. Text content that is too dense or complicated.
For a whole host of reasons, you want your website copy to be clear and direct. Remember that your audience is most likely not subject matter experts looking to read a dissertation about your industry.
It’s also important to consider that some cognitive impairments such as reading disorders, memory disorders, attention deficit disorders, and others, can compromise a person's ability to understand complex text.
When writing content, a rule to keep in mind is to break up large chunks of text. A longer post filled with one or two sentence paragraphs is a lot more inviting than one paragraph that is four sentences long.
Although you'll still need to make sure you're not injecting too much jargon into your content, this is a good first step to making your content more readable.
The links point to specific improvements in the text that would increase readability and provide access to common reading level algorithms to evaluate your website pages for readability.
There are tons of great resources out there about website accessibility that don't fit into the categories above. But this post wouldn't be complete without mentioning some of our favorite websites with tons of useful information, tips, and code resources for designers looking to improve web accessibility:
- Free Course on Web Accessibility from Google
- The A11y Project
- Inclusive Components
- Accessible Email
- PDF Accessibility
Knowing is half the battle
Of course, the best strategy is to always understand the specific obstacles that could affect your user interface and to plan around them.
Does your design incorporate adequate color contrast and an appropriate amount of white space?
Do you offer or anticipate offering webinars, video, or audio through your website?
Is your text organized with appropriate headings?
Are your sentence structures, phrasing, and wording aimed at a general audience?
Knowing about the obstacles standing in the way of inclusion and accessibility is only half the battle.
Implementation of these web accessibility practices and tools is necessary to give users a more inclusive web experience. And implementation can seem even more daunting.
The good news is Unity Web Agency can help with evaluating and improving website accessibility. If you want to make your website more accessible, but lack the time or resources to execute the changes in-house, contact us today.
Together, we can make your website beautiful, effective, and accessible!