Hello! Over the past few lessons, we've built a strong foundation for web accessibility by implementing semantic HTML, ensuring full keyboard navigability, and enriching custom components with ARIA. Now, it's time to learn how to verify our work and catch any issues we might have missed.
This lesson addresses the final outcome for this module: Audit the site for color contrast ratios and other WCAG compliance issues. We'll explore a systematic approach to accessibility auditing, combining the power of automated tools with the irreplaceable insights of manual testing. This process is essential for ensuring your accounting website is not just technically compliant but genuinely usable for everyone, meeting the professional standards your project requires.
We will cover:
- The Multi-Layered Audit: Combining automated tools and manual checks.
- Manual Testing: How to test for keyboard navigation, screen reader compatibility, and logical structure.
- Automated Tools: Using browser features and extensions to quickly find issues like poor color contrast.
- Integrating Audits into Your Workflow: Using an Astro-specific tool to catch issues early.
1. The Accessibility Audit: A Hybrid Approach
A thorough accessibility audit isn't a single action but a process. No single tool can catch every issue. For example, an automated tool can tell you if an image is missing an alt attribute, but it can't tell you if the alt text is meaningful. This is why we use a hybrid approach:
- Automated Tools: These are your first line of defense. They excel at running a large number of checks based on a set of rules, quickly identifying quantifiable issues like insufficient color contrast, missing form labels, or incorrect ARIA attribute usage.
- Manual Checks: This is where you step into your users' shoes. By navigating your site using only a keyboard or with a screen reader, you test the actual user experience and uncover issues related to logic, usability, and context that tools can't detect.
The W3C, the main international standards organization for the World Wide Web, provides a guide for this type of first-pass review. It's a great reference to understand the fundamentals.
Easy Checks – A First Review of Web Accessibility
The W3C's "Easy Checks" guide provides a foundational framework for a first review of web accessibility. We won't go through it all, but it's good to know this resource exists. We'll focus on the sections that formalize the concepts we're about to practice.
Skim the 'Introduction' to understand the purpose of these checks. You don't need to read every detail, but notice how it emphasizes that this is a 'first review' and not a replacement for a comprehensive evaluation.
2. Manual Checks: Experiencing Your Site as Your Users Do
This is the most critical part of an audit. Let's walk through the manual process that a professional would use to quickly assess a site.
Keyboard Navigation Audit
We've covered the basics of keyboard testing, but a real audit is more rigorous. You need to check for focus traps and ensure focus doesn't get sent to hidden off-screen elements.
How I do an accessibility check -- A11ycasts #11
This video from the Chrome for Developers channel provides an excellent demonstration of a real-world accessibility check. We'll start with the keyboard navigation portion.
Watch from 00:35 to 03:29. Pay close attention to the check for 'offscreen content' that is accidentally focusable. This is a common issue with mobile-first designs that use hidden sidebars.
Your manual keyboard audit checklist should include:
- Can you reach every interactive element using
TabandShift+Tab? - Is the
:focusindicator always visible and clear? - Does the tab order follow a logical reading flow?
- Can you operate all components (dropdowns, accordions) with the keyboard (
Enter,Space, arrow keys)? - Are there any "keyboard traps" where you can't
Tabout of a component?
Basic Screen Reader and Structure Audit
Next, you need to verify that the semantic information we've added (headings, landmarks, ARIA attributes) is being correctly interpreted by assistive technology.
How I do an accessibility check -- A11ycasts #11
Let's continue with the same video to see how to perform a quick screen reader check and validate the page's structure.
Watch from 03:29 to 08:30. Notice how the developer checks that: Interactive elements announce their role and state (e.g., 'size, collapsed, popup button'). Images have proper alt text read aloud. The heading structure forms a logical outline of the page, which can be viewed using the screen reader's 'rotor' (a navigation tool). Landmark elements (<nav>, <main>) are present.
3. Automated Audits: Finding Issues at Scale
Manual testing is essential, but automated tools are much faster for catching widespread issues, especially color contrast.
Checking Color Contrast
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that text must meet to be legible for people with moderately low vision.
- AA Level (Minimum): A contrast ratio of at least 4.5:1 for normal text.
- AAA Level (Enhanced): A ratio of at least 7:1.
For your professional accounting website, meeting the AA standard is a minimum requirement.
Easy Checks – A First Review of Web Accessibility
Let's refer back to the W3C's 'Easy Checks' to see the official definition and methods for checking contrast.
Read the section titled 'Contrast ratio ("color contrast")'. Focus on understanding the 'What to check for' part and the three ways to check contrast: table, eye-dropper, and turning off color.
The easiest way to check and fix contrast is using your browser's built-in developer tools.
The Only Accessibility Video You Will Ever Need
This video from Web Dev Simplified gives one of the best tutorials on using Chrome DevTools for accessibility, including a fantastic demonstration of the color contrast checker.
Watch from 08:03 to 13:13. The key takeaways are: How to use the color picker to see the contrast ratio and the AA/AAA compliance lines. How to find a compliant color by dragging the selector. How to use the 'Emulate vision deficiencies' feature to see your site through the eyes of users with different types of color blindness. The advice against using pure black backgrounds with pure white text.
Using Audit Tools like Axe and Lighthouse
Beyond the color picker, browsers and extensions offer powerful auditing tools that run a whole suite of tests.
- Lighthouse: Built into Chrome DevTools, it provides reports on Performance, SEO, and Accessibility.
- Axe DevTools: A browser extension that provides more detailed accessibility-specific analysis, often with better remediation advice.
The Only Accessibility Video You Will Ever Need
Let's watch two quick demos of these tools in action to see what kind of issues they can find for you automatically.
First, watch from 33:16 to 36:02 in the Web Dev Simplified video to see a walkthrough of a Lighthouse report. Notice how it flags contrast issues, small touch targets, and incorrect heading order.
How I do an accessibility check -- A11ycasts #11
Now, let's see the Axe extension, which is what many professional developers use daily.
Watch from 08:30 to 10:59. This part of the 'How I do an accessibility check' video shows how to run the Axe extension and analyze its results. It's a great example of a tool flagging low-contrast text in a footer.
Test your understanding!
You run Lighthouse on your accounting website's homepage. It flags the main call-to-action button, which has light gray text on a dark blue background, for "insufficient color contrast." Describe the steps you would take in Chrome DevTools to diagnose and fix this specific issue.
Show answer
- Inspect the Element: Right-click the button and select "Inspect" to open DevTools with the button element highlighted.
- Find the Color Style: In the "Styles" pane, locate the
colorproperty that defines the button's text color. - Open the Color Picker: Click the small color swatch next to the hex code for the light gray color.
- Analyze the Contrast Ratio: In the color picker pop-up, look for the "Contrast ratio" section. It will show the current ratio (e.g., 3.2:1) and confirm that it fails the WCAG AA standard.
- Find a Compliant Color: Use the two curves in the color picker as a guide. Drag the color selector above the top curve (for AAA) or the bottom curve (for AA) until the ratio is compliant. The text on the webpage will update in real-time, allowing you to see the change.
- Update Your Code: Once you've found a new, accessible color (e.g., a lighter gray or white), copy its hex code and update it in your project's CSS file.
4. Integrating Audits into your Astro Project
Running audits manually is good, but automating them as part of your development process is even better. This prevents accessibility regressions from making it into production. For your Astro project, there are dedicated tools for this.
yakbrother/yak-a11y: A package to test accessibility rules ...
The yak-a11y package is a comprehensive accessibility checker with specific integration for Astro. It's built on top of Axe-core (the engine behind the Axe extension) and can be run during your build process.
Read the following sections of the GitHub README: Yak A11y (Introduction): Understand its purpose. Usage > Astro Integration: See how easily it hooks into your astro.config.mjs file. Standards and Guidelines: Note that it explicitly checks for WCAG 2.1 Level A & AA compliance. What Gets Checked: Review the list of checks, which includes color contrast, keyboard navigation, and ARIA attributes.
By adding a tool like this to your project, you can make accessibility a non-negotiable part of your continuous integration (CI/CD) pipeline, a hallmark of professional development practices.
Conclusion
You now have a complete framework for ensuring your website is accessible. By combining automated scans with manual, experience-based testing, you can confidently identify and fix issues, delivering a product that is usable by the widest possible audience.
Key Takeaways:
- A robust accessibility audit uses both automated tools for speed and scale and manual checks for nuance and user experience.
- Color contrast is a critical, measurable part of WCAG compliance. Use browser DevTools to check and fix contrast ratios to at least the 4.5:1 (AA) standard.
- Manual keyboard and screen reader checks are non-negotiable for verifying logical flow, focus management, and the proper announcement of roles and states for your custom components.
- Tools like Lighthouse and Axe provide excellent, actionable reports.
- Integrating accessibility checks into your build process with tools like
yak-a11yhelps maintain a high standard of quality automatically.
Up Next:
This lesson concludes our deep dive into accessibility. In the next module, "Performance and Optimization," we will shift our focus to another critical aspect of user experience: speed. Our first lesson will introduce you to Core Web Vitals, the key metrics Google uses to measure a site's performance and how they impact both user satisfaction and SEO.