To remediate certain digital accessibility issues, you may need to work with experienced designers and web developers. You might need to redesign your website or rebuild it from scratch.
Fortunately, most issues aren’t that complex. If you’re new to web accessibility, take a deep breath — you can take simple steps today to provide better experiences for users with disabilities.
Ideally, this process starts with reviewing the Web Content Accessibility Guidelines (WCAG), the international standards for digital accessibility. Auditing your content can give you an overview of your current level of digital compliance.
But if you’re looking for quick, easy fixes, there are a few logical starting points. Below, we’ll review five common accessibility barriers and ways to address them.
1. Missing or Inaccurate Alternative Text
Nearly every web accessibility article discusses missing alternative text, and for good reason: It’s a common problem that’s easy to understand — but it’s also quite frustrating for users with vision disabilities.
Alternative text (also called alt text) provides a description of an image, graph, or other visual element. If the user cannot perceive content visually — or if the element fails to load — the alt text provides the necessary context for the visual information.
Accurate alt text also has benefits for search engine optimization (SEO), and you’ll only need to spend a few seconds writing descriptions for each image. Be sure to follow the best practices of writing alt text to make your descriptions as useful as possible.
For more guidance, read: Alternative Text: What and Why
2. Color Contrast Issues
Color contrast refers to the difference in luminosity (light) between text and its background. Low-contrast text can be difficult to read, particularly for people with vision disabilities.
WCAG recommends a minimum color contrast ratio of 4.5:1 for normal text and 3:1 for large-scale text. The Bureau of Internet Accessibility provides the a11y® Color Contrast Accessibility Validator, which can be used to test websites and color-pairs against WCAG’s requirements.
After testing your content, you’ll need to change the colors of the text or backgrounds on any non-conformant pages.
Depending on the nature of your content, this might not be an easy fix. If you need to completely change your website’s template to make text more legible, you’ll need to work with your design team — but the results will be worth the effort.
For more guidance, read: The Basics and Importance of Color Contrast for Web Accessibility
3. Inaccurate or Duplicate Page Titles
Page titles can help users understand the purpose of each web page. The title is typically displayed at the top of the browser (and in search results — page titles are an important SEO signal).
Each page must have a clear, descriptive, and unique title. Consider performing a page title audit and rewriting any titles that are duplicates. The best practice is to limit your titles to around 30-60 characters and avoid short, vague text like “services" or “home.”
For more best practices, read: Why Page Titles Are Important for Web Accessibility
4. Keyboard Traps
A keyboard trap occurs when a user cannot move their focus away from an element (such as a form or video player) by using their keyboard alone.
Keyboard traps are among the most frustrating accessibility barriers, but in most cases, they’re easy to fix — the hard part is testing your content frequently enough to find them. It’s a good idea to regularly audit your website for keyboard accessibility issues and perform occasional self-checks by tabbing through your content.
Techniques for fixing keyboard traps might include:
-
Disable plugins, apps, or widgets that create keyboard traps. If the element cannot be disabled, make sure you’re using the latest version.
-
For JavaScript keyboard traps, use appropriate techniques to allow users to regain control. Accessibility specialist Hidde de Vries has an excellent blog with techniques for using JavaScript “traps" that are still accessible.
-
If an element requires complex keyboard behavior (for example, a desktop-like web app), make sure to provide users with clear instructions for controlling the element.
5. Invisible Focus Indicators
The visual focus indicator identifies the element that the user is reading or controlling. If you press the Tab key to scroll through this blog, you’ll see a red dotted line surrounding each focusable element (you may see another visual indicator, depending on your browser settings).
Without visual focus indicators, sighted keyboard users may not be able to navigate through your content.
To fix this issue, make sure that your CSS does not contain the outline:none property. Alternatively, you can use the :focus selector to create an easy-to-see focus indicator — but in general, it’s best to avoid overriding the web browser’s default focus indicator unless you have a clear reason to do so.
Related: What You Need to Know About Visual Focus and Accessibility
Every web accessibility issue deserves attention — and remediation
Following WCAG can help you create content for a wide, diverse audience. As we’ve discussed, the best practices of accessibility also benefit SEO — and may help you grow your brand by showcasing your social values and reducing the long-term costs of web development.
Some barriers aren’t necessarily “easy" to address, but every WCAG conformance issue deserves your attention. Remember, accessibility has a strong return on investment, and every barrier you fix will impact real-world users.
To learn more, download our free eBook: The Ultimate Guide to Web Accessibility.
