Making My Website Accessible: A Practical Guide to Web Accessibility

When I decided to audit my website’s accessibility, I discovered something sobering: my site scored only 41% on accessibility compliance and had 28 critical issues. Here’s how I transformed it into a WCAG 2.2 compliant website by systematically addressing each problem.

Why Web Accessibility Matters

Web accessibility isn’t just about compliance—it’s about creating inclusive experiences. Consider these statistics:

1 billion people worldwide live with disabilities
15% of the global population has some form of disability
Many users navigate websites using keyboard-only navigation
Screen readers help 285 million people with visual impairments access the web

Making your website accessible benefits everyone, not just users with disabilities. Good accessibility practices improve SEO, enhance mobile usability, and create better user experiences overall.

Getting Started: Running Your First Accessibility Audit

The first step is understanding where you stand. Several free tools can audit your website:

Free Accessibility Scanning Tools

AccessibilityChecker.org - Comprehensive WCAG 2.2 compliance scan
WAVE (Web Accessibility Evaluation Tool) - Visual feedback on accessibility issues
axe DevTools - Browser extension for developers
Lighthouse - Built into Chrome DevTools

I used AccessibilityChecker.org, which revealed my website had 28 failing elements across 7 categories.

The Major Issues I Found (And How to Fix Them)

1. Color Contrast Problems

The Issue: 49 elements failed WCAG contrast requirements (4.5:1 ratio for normal text).

Why It Matters: Users with low vision, color blindness, or those using devices in bright sunlight need sufficient contrast to read text clearly.

Understanding the 4.5:1 Ratio: This means the lighter color should be 4.5 times brighter than the darker color. For example:

White (#ffffff) against medium gray (#767676) = exactly 4.5:1
Black (#000000) against light gray (#959595) = exactly 4.5:1
rgba(0, 0, 0, 0.6) on white = only 2.5:1 contrast (fails)
rgba(0, 0, 0, 0.9) on white = 10:1 contrast (passes)

How to Check Contrast: Use tools like:

WebAIM Contrast Checker
Chrome DevTools (inspect element → styles → contrast ratio)
Colour Contrast Analyser

Before:

:root {
    --text-color: rgba(0, 0, 0, 0.8);        /* 2.6:1 ratio - fails */
    --text-color-secondary: rgba(0, 0, 0, 0.6); /* 2.5:1 ratio - fails */
    --link-color: #00ab6b;                   /* 3.1:1 ratio - fails */
}

After:

:root {
    --text-color: rgba(0, 0, 0, 0.9);        /* 10:1 ratio - passes */
    --text-color-secondary: rgba(0, 0, 0, 0.75); /* 5.7:1 ratio - passes */
    --link-color: #007549;                   /* 4.6:1 ratio - passes */
}

Pro Tip: For large text (18px+ or 14px+ bold), you only need 3:1 contrast. But aiming for 4.5:1 everywhere ensures consistency and better readability.

2. Missing Form Labels

The Issue: Form elements lacked proper labels for screen readers.

Why It Matters: Screen reader users need to understand what each form field is for. Without labels, forms become impossible to use.

Before:

<input type="email" placeholder="Enter your email" required>
<input type="checkbox" id="darkModeToggle" />

After:

<input type="email" placeholder="Enter your email"
       aria-label="Email address for newsletter subscription" required>
<input type="checkbox" id="darkModeToggle"
       aria-label="Toggle dark mode" />

3. External Links Without Context

The Issue: Links opening in new tabs didn’t inform users about this behavior.

Why It Matters: Screen reader users and keyboard navigators need to know when a link will open a new tab, as it can be disorienting.

Before:

<a href="https://x.com/prateekkish" target="_blank">
    Twitter
</a>

After:

<a href="https://x.com/prateekkish" target="_blank"
   aria-label="Follow me on Twitter (opens in new tab)">
    Twitter
</a>

4. Missing Skip Links

The Issue: No way for keyboard users to skip repetitive navigation.

Why It Matters: Keyboard users would have to tab through every navigation item on every page to reach the main content.

Note: Skip links could be visually hidden (if it messes with your site design) by default but become the first focusable elements when users press Tab. This is the standard, WCAG-compliant approach.

Solution:

<body>
    <!-- Skip Links for Accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <a href="#navbarMediumish" class="skip-link">Skip to navigation</a>

    <!-- Navigation here -->

    <div class="main-content" id="main-content">
        <!-- Main content here -->
    </div>
</body>

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--link-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px; /* Appears when focused - visible to keyboard users only */
}

5. Poor Focus Indicators

The Issue: Interactive elements lacked visible focus states for keyboard navigation.

Why It Matters: Keyboard users need to see which element currently has focus to navigate effectively.

Solution:

a:focus,
button:focus,
input:focus,
.nav-link:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 117, 73, 0.2);
}

6. Improper Heading Hierarchy

The Issue: Pages missing h1 headings, and improper heading structure.

Why It Matters: Screen readers use heading structure to help users navigate page content efficiently.

Before:

<section class="recent-posts">
    <div class="section-title">
        <h2><span>All Posts</span></h2>  <!-- Should be h1 on main page -->
    </div>
</section>

After:

<section class="recent-posts">
    <div class="section-title">
        <h1><span>All Posts</span></h1>  <!-- Proper h1 for main page -->
    </div>
</section>

7. Missing ARIA Roles and Labels

The Issue: Interactive elements and landmarks lacked proper ARIA attributes.

Why It Matters: ARIA attributes provide additional context for assistive technologies.

Search Form Fix:

<!-- Before -->
<form class="bd-search">
    <input type="text" placeholder="Search a post..."/>
</form>

<!-- After -->
<form class="bd-search" role="search">
    <input type="text" placeholder="Search a post..."
           aria-label="Search posts"/>
    <button type="submit" style="display: none;">Search</button>
</form>

Navigation Fix:

<!-- Before -->
<nav class="navbar">

<!-- After -->
<nav class="navbar" aria-label="Main navigation">

Button Role Fix:

<!-- Before -->
<div class="slider">
    <i class="fas fa-sun"></i>
    <i class="fas fa-moon"></i>
</div>

<!-- After -->
<div class="slider" role="button">
    <i class="fas fa-sun"></i>
    <i class="fas fa-moon"></i>
</div>

Testing Your Improvements

After implementing fixes, test with multiple methods:

Automated tools - Re-run accessibility scanners
Keyboard navigation - Navigate using only Tab, Enter, and arrow keys
Screen reader testing - Use NVDA (free) or VoiceOver (Mac)
Color contrast tools - Verify all text meets 4.5:1 ratio

The Results

After implementing these fixes:

Accessibility score improved from 41% to WCAG compliant
Critical issues reduced from 28 to 1
Visual design maintained while improving accessibility
Enhanced user experience for all users

Key Takeaways

Start with automated scanning - Use free tools to identify issues
Focus on critical problems first - Form labels, color contrast, and navigation
Test with real users - Nothing beats actual user feedback
Accessibility is iterative - Regular audits catch new issues
Good accessibility helps everyone - Benefits extend beyond disabled users

Common Accessibility Pitfalls to Avoid

Using placeholder text as labels
Insufficient color contrast
Missing alt text for images
Keyboard traps in custom components
Unclear link purposes (“click here”, “read more”)
Missing focus indicators
Automatic media playback
Time-limited content without controls

Beyond Compliance: Creating Inclusive Experiences

WCAG compliance is the baseline, not the finish line. Consider:

User testing with people who use assistive technologies
Progressive enhancement that works without JavaScript
Responsive design that adapts to zoom levels up to 200%
Clear, simple language that’s easy to understand
Consistent navigation patterns across your site

Resources for Continued Learning

WebAIM - Comprehensive accessibility resources
A11y Project - Community-driven accessibility knowledge
MDN Accessibility Guide - Technical implementation details
WCAG Guidelines - Official specification

Making your website accessible is about creating digital experiences that work for everyone. The web is most powerful when it’s accessible to all users, regardless of their abilities or circumstances.

Start with a free accessibility scan today. You might be surprised by what you discover, and your users will thank you for the improvements.

08 Jul 2025

Prateek Choudhary

Technology Leader

Making My Website Accessible: A Practical Guide to Web Accessibility

Why Web Accessibility Matters

Getting Started: Running Your First Accessibility Audit

Free Accessibility Scanning Tools

The Major Issues I Found (And How to Fix Them)

1. Color Contrast Problems

2. Missing Form Labels

3. External Links Without Context

4. Missing Skip Links

5. Poor Focus Indicators

6. Improper Heading Hierarchy

7. Missing ARIA Roles and Labels

Testing Your Improvements

The Results

Key Takeaways

Common Accessibility Pitfalls to Avoid

Beyond Compliance: Creating Inclusive Experiences

Resources for Continued Learning

Stay up to date with our blogs.