You’ve got plenty of reasons to prioritize accessibility when developing your website — but if you haven’t taken the first steps yet, don’t worry. While building for accessibility is always preferable to remediation, it’s never too late to start considering the experiences of people with disabilities.
The Web Content Accessibility Guidelines (WCAG) is the international standard for digital accessibility, and WCAG contains detailed guidance for developing content that works for everyone. In this article, we’ll explain a few quick ways to use WCAG to improve your site’s accessibility.
For more guidance, download our free Definitive Checklist for Web Accessibility.
1. Consider whether your website would work if all images were disabled
One of the four fundamental principles of accessibility is perceivability. Your website is perceivable when users can identify content and interface elements, regardless of which tools they use to browse.
Many users navigate websites visually, and if you’ve never thought about accessibility, you’ve probably designed your site for these users. However, many people use screen readers — software that converts text to audio or braille. Other people might have a limited ability to perceive certain types of visual content.
To make sure your website works for these users, consider how the experience would change if images didn’t load (to make this easier, you can disable images on your web browser). Review your site and ask yourself questions:
- Can I still navigate the website easily?
- Can I read image alternative text (alt text) and understand the purpose and function of each image?
- Does any content rely on color alone to convey meaning?
- Can I still understand important information from pages with infographics, graphs, videos, and other visual content?
By adding appropriate alt text and taking other steps to reduce your reliance on visual content, you’ll improve the on-page experience for users with vision-related disabilities. You’ll also improve the experience for other users — if someone accesses your site on a slow internet connection and images fail to load, they can still perceive your content.
Related: 5 Steps for Writing Alt Text for Accessibility
2. Use appropriate color contrast
WCAG Success Criteria (SC) 1.4.3 sets requirements for color contrast ratios. Your site’s color contrast ratio is a numerical value that describes the difference in light between foreground elements (such as text) and the background.
Color contrast is an important consideration when designing a website. If a user has low vision, color vision deficiency (commonly known as color blindness), or if they simply access your website in bright natural light, they might not be able to read content that fails to meet WCAG thresholds.
WCAG states that normal text (including images of text) must meet a contrast ratio of at least 4.5:1; large text (18 point or larger, or 14 point or larger and bold) should have a contrast ratio of at least 3:1.
The Bureau of Internet Accessibility offers a free Color Contrast Accessibility Validator for testing websites or specific color-pairs. If your site has color contrast issues, you might be able to resolve them in a few minutes by changing your use of color — and you’ll immediately improve the experience for people with a range of vision-related conditions.
Related: The Basics and Importance of Color Contrast for Web Accessibility
3. Use subheadings to break up longer content
Here’s an accessibility practice that benefits every single user, regardless of their abilities: If you write long-form content, make sure you’re using subheadings.
Subheadings help readers “scan" your content to find the information they need. When used properly, subheadings are a powerful tool for search engine optimization (SEO), and they make your content look less intimidating — improving reader retention and enhancing comprehension.
These quick tips will help you use subheadings more effectively:
- Make sure readers can understand the contents of each section by reading the subheading alone. In this article, we’re using H2 subheadings for each tip.
- Incorporate relevant keywords, but don’t write for search engines — write subheadings for your readers.
- Use subheadings in sequential order. For instance, an H3 tag should never immediately follow an H1 tag.
Subheadings make your site more useful for people who use screen readers, people with neurocognitive differences, and people with memory-related conditions.
Related: How Headings Help People with Disabilities Navigate a Website
4. Test your website by navigating with a keyboard
Many people with disabilities use a keyboard or keyboard emulator to browse the web. Unfortunately, most websites are designed for mouse users, and some web design decisions can create frustrating barriers for keyboard-only users.
Open your website and use the Tab and Shift-Tab keys to move around each page. Once again, ask yourself questions:
- How does your experience change?
- Can you fill out forms, click links, and close pop-up notifications?
- Can you easily determine which element you’re focusing on?
This quick test can be enormously helpful for web developers, and it’s a great way to develop insights about real-life user behaviors. For a more detailed guide, read: Give Yourself an Accessibility Test: Don't Use a Mouse.
However, it’s important to remember that no individual test can make your website accessible. WCAG 2.1 contains 78 success criteria, and to build a truly accessible website, you’ll need to test your content for WCAG conformance regularly.
To develop your testing strategy, contact our accessibility experts or get started with a free WCAG 2.1 AA website analysis.
