Accessibility Audits: How to Make Sure Your Site Doesn’t Send Users Running (or Zooming In)

November 2, 2024|5.3 min|User-Centered Design + Accessibility|

Topics in this article:

Every UX designer dreams of creating a site that’s easy to use, clear to navigate, and accessible to everyone—without the surprise factor of users finding buttons that are too small to click or text that’s as legible as a fortune cookie in low light. An accessibility audit is your map to avoiding those pitfalls, ensuring that your design is universally accessible and user-friendly.

In this post, we’re diving into everything you need to know about conducting accessibility audits, step by step, so you can design a site that’s not only functional but also inclusive.

Why Accessibility Audits Matter in UX Design

Accessibility audits aren’t just a best practice—they’re an essential step in crafting inclusive user experiences. Audits uncover potential barriers that can make a site difficult or impossible to use for people with disabilities. This covers areas like:

  • Visual accessibility (e.g., color contrast, text size)
  • Keyboard navigation (for users who can’t use a mouse)
  • Screen reader compatibility (for visually impaired users)

Simply put, an accessibility audit is like testing the structural integrity of a bridge: you want everyone to cross with ease, not be left at the riverbank.

Step 1: Prepare for Your Audit

Before diving in, gather a few essential elements:

  1. Audit Tools: Download accessibility testing tools like WAVE, Axe, or Lighthouse to catch common issues.
  2. WCAG Guidelines: Familiarize yourself with the Web Content Accessibility Guidelines (WCAG)—they’re the gold standard for web accessibility.
  3. A User-Focused Mindset: Think about how people with different abilities navigate your site. Each user brings unique needs, and a strong UX includes them all.

Step 2: Check Keyboard Navigation and Focus States

Keyboard navigation is critical for users who rely on keyboards instead of mice. Testing this can be illuminating (and sometimes a little humbling):

  • Tab through every clickable element: Can you access all buttons, links, and forms?
  • Focus states: Each element should have a visible focus state (a border or highlight around the item currently selected). If it’s missing, users won’t know where they are on the page.

Pro Tip: Start the audit by using only the keyboard. Try navigating your site from top to bottom, and fix any sections where you get “stuck.” A good audit tool like Axe will also flag these issues.

Step 3: Test Color Contrast and Text Legibility

Color contrast issues are one of the most common accessibility barriers. To ensure readability for users with visual impairments, you’ll want to check the contrast between text and background colors:

  • Contrast Ratio: The minimum contrast ratio should be 4.5:1 for regular text and 3:1 for large text.
  • Contrast Checkers: Use tools like Contrast Checker or Color Safe to test your color choices.

Pro Tip: Avoid using color alone to convey information (like red for “error” messages) because it may be lost on colorblind users. Include symbols or text alongside the color.

Step 4: Evaluate Image and Media Accessibility

Images and multimedia are an integral part of a website, but they also need to be accessible:

  • Alt Text for Images: Every image should have descriptive alt text so that screen readers can convey the information to users.
  • Video and Audio: Ensure videos have captions, and audio files have transcripts.
  • Avoid Autoplay: Nothing says “welcome” like a video that blasts into action on its own. Autoplay is a big accessibility no-no and can disrupt users, especially those using screen readers.

Pro Tip: Alt text isn’t just for functional images. Even decorative images need alt attributes—just leave the attribute empty (alt="") if it’s not conveying necessary information.

Step 5: Conduct Screen Reader Testing

Screen readers are an invaluable tool for users who are blind or have low vision, but testing with them can also reveal potential structural issues in your content hierarchy:

  • Logical Heading Structure: Make sure headings are in sequential order (i.e., H1 > H2 > H3) so screen readers convey content in a logical flow.
  • ARIA Labels: Use ARIA (Accessible Rich Internet Applications) labels for interactive elements that don’t have visible text labels, like icons or custom buttons.

Pro Tip: Start testing with a screen reader (like VoiceOver on Mac or NVDA on Windows) to see how your site’s hierarchy and labels hold up. Even basic issues can disrupt accessibility.

Step 6: Audit Forms for Accessible Input Fields

Forms are a notorious tripping point in accessibility. Every field and error message must be accessible for users with disabilities:

  • Label Every Field: Each form field needs a label, either visible or accessible via ARIA, to describe its purpose.
  • Error Messages: Make sure error messages are clear and tied to the specific field in error, and avoid color-only indicators.

Pro Tip: For an inclusive touch, add descriptive helper text, especially for fields with specific formatting requirements. Remember, nobody enjoys guessing if the date format is MM/DD/YYYY or DD/MM/YYYY.

Step 7: Mobile Accessibility

With over half of web traffic coming from mobile devices, mobile accessibility is no longer optional. Test your design for:

  • Responsive Design: Elements should resize and realign for different screen sizes, including large buttons and touch targets.
  • Zoom Compatibility: Users should be able to zoom up to 200% without breaking the layout.

Pro Tip: Run your accessibility tools in mobile view to catch any mobile-specific issues and ensure all interactions are functional without a mouse or keyboard.

Step 8: Summarize Your Findings and Create an Action Plan

Now that you’ve conducted a thorough audit, it’s time to compile your findings into an actionable report:

  1. List Accessibility Issues: Group them by severity so your team can prioritize.
  2. Assign Tasks and Deadlines: Make sure each issue has a clear fix and a deadline.
  3. Review Regularly: Accessibility is not a one-and-done process. Schedule periodic checks to maintain compliance as you update content.

Pro Tip: Make the report as user-friendly as possible for your team members. Use clear language, examples, and screenshots to clarify what needs to be fixed.

Accessibility Audits Are More Than Just Good PR

An accessibility audit might sound daunting at first, but it’s a crucial component of user-centered design. By making your site inclusive, you’re not only reaching a broader audience but also building trust and a better brand reputation.

So the next time someone suggests skipping the audit, remind them: If users can’t access it, does it even exist?

Share this article

Never miss an update

Get the latest UX insights, research, and industry news delivered to your inbox.