It’s never too late to invest in website accessibility, and the reasons to do so are clear. Accessible web design removes barriers for all sorts of users, including the 61 million U.S. adults who have disabilities. An inclusive website broadens your audience, builds goodwill for your brand, and helps you avoid complaints — and even lawsuits.
But where should you start? As this blog illustrates, the literature on web accessibility is vast. At first glance, Web Content Accessibility Guidelines (WCAG) can be overwhelming. You don’t have to make major changes all at once, though. Think of accessible design as a lifetime learning process, not a quick project you can complete before moving on. Begin with one improvement and more will come. Here are seven things you can do right now to start making your website more accessible.
1. Learn the four WCAG principles.
Web Content Accessibility Guidelines are quite detailed. There are nearly 90 success criteria in WCAG 2.2, the latest edition of the guidelines at publication time. But to start identifying accessibility issues on your site, take a broad view. Begin by familiarizing yourself with the four pillars of WCAG standards. According to WCAG, websites must be:
- Perceivable. To work for everyone, content and user interfaces must not depend on a single sense. Instead, include ways to both see and hear the material — and make sure content is distinguishable and adaptable based on user need or preference.
- Operable. Users must be able to operate your site, including navigation and interaction. For example, the site should function through keyboard inputs, without a mouse. Time limits should be extendable or absent entirely, and content should avoid seizure triggers like flashing lights.
- Understandable. Written text must be clear, legible, and readable, including for people who use assistive devices like screen readers. Sites should be built to help users avoid errors and correct them when they occur.
- Robust. Design site code to be compatible with as many users and assistive technologies as possible. That requires the inclusion of start and end tags for elements in markup languages; full name, role, and value information for all components; and status message generation for user actions.
These POUR principles will be your guide as you examine your site for accessibility flaws, a key first step toward improvement.
Read: Web Design and Accessibility: Basics Every New Designer Should Know
2. Test your site’s keyboard navigation.
You can’t fix what you don’t recognize. Here’s a simple accessibility self-test you can run on your own: Try navigating your site with a keyboard alone. This will reveal how your site performs for people who don’t use a mouse. Open your site and follow these steps:
- Use tab, shift-tab, and arrow keys to explore.
- See if the focus indication is clear at all times.
- Try to operate site controls with the enter key and space bar. Are any inputs unavailable?
- Look for specific information and note whether it’s hard or easy to find.
- Fill out and submit a form, and jot down any difficulties along the way.
- Is the keyboard focus getting stuck in any components? If so, that’s a “keyboard trap.”
Create a list of keyboard navigation issues, including keyboard traps, and address them with changes to site code.
Read: Give Yourself an Accessibility Test: Don’t Use a Mouse
3. Check mobile performance.
People access your website from all sorts of devices, from desktop computers to smartphones. Sometimes mobile layouts create new barriers for people with disabilities. These issues are easy to spot: Simply open your site on a smartphone or mobile device and try to complete a few common user tasks. Look for these problems:
- Missing text, elements, or user interface components
- Text that’s hard to read due without zooming.
- Low color contrast.
- Insufficient space between links and form fields.
- Overlapping or poorly spaced lettering.
View your page in both vertical and horizontal orientations. Make sure it auto-rotates, and that the site is navigable in both positions. Finally, try your phone’s built-in screen reader (On iPhones, that’s VoiceOver. On an Android device, it’s called TalkBack.) Does the screen reader describe menu options and links accurately? Are you missing alt text? If so, these are things to address.
Read: Give Yourself an Accessibility Test: Use Your Site on a Phone
4. Try your site zoomed to 200%.
People with vision impairments use zoom features to make text legible. How does that work on your site? Find out by setting your browser zoom to 200%, and try to find information or complete a task. Look for text that overlaps or bunches into an unreadable pile. Check the layout of page elements, menus, and navigation bars.
Next, see if you have to scroll around on your site to read all the content. Most importantly, make sure links, forms, and menus all work as intended in this magnified state. Create a list of the issues you uncover, and commit to fixing the problems.
Read: Give Yourself an Accessibility Test: Zoom Your Page to 200%
5. Assess color contrast on your site.
Color contrast is the difference in lightness of a foreground element — especially text — and the background. Many users with low contrast vision, color vision deficiency, or other vision impairments require high color contrast for text to remain legible. According to WCAG guidelines, accessible content maintains a color contrast ratio of at least 4.5:1 for most text.
That’s an abstract figure, and calculating contrast ratios involves some complicated math. Luckily, the a11y Color Contrast Accessibility Validator makes it easy to scan your webpages for issues with contrast ratios. Simply open the tool and enter your URL. You can also test color pairs to ensure sufficient contrast during design.
Read: The Basics and Importance of Color Contrast for Web Accessibility
6. Add alt text to all your images.
Alternative or alt text is an HTML attribute that provides a written description of images. Screen readers use alt text to convey visual information to users. As an added bonus, accurate alt-text can help with SEO; search engine spiders crawl alt text as well as on-page content. There are a few ways to check images for alt text.
You can use the Inspect Element tool in your browser, right clicking on an image and searching the HTML for the tag “alt=”. Or try a screen reader; select the image and listen for a description. Or you can rely on a website crawler like Screaming Frog to scan your site for missing alt text.
Add alt text for all images. Make sure the description is complete and helpful. Include information that’s necessary to understand the image, while keeping text as concise as possible.
Read: 5 Steps for Writing Alt Text for Accessibility
7. Get a free, confidential accessibility scan.
Eventually, you may want a comprehensive accessibility audit for your site, including both automated scans and a team of human assessors. But there’s an intermediate stage between self-tests, like those described above, and a full-on compliance audit. Request a free, graded WCAG compliance report of your website from the Bureau of Internet Accessibility. This summary will test your site against WCAG A and AA success criteria, identifying issues so you can start planning improvements. Get your free WCAG AA Compliance Summary today.
