Skip to main content
My Blog
Insights & Stories

Explore my latest thoughts on design, development, branding, and the creative process.

Back to Blog
Accessibility12 min read
AODA Compliance Isn't Optional: A Plain-Language Guide for Municipal Websites

AODA web accessibility requirements explained in plain language, plus the 10 most common mistakes on municipal sites and how to fix them.

E
Excelle Escalada
Digital Experience ArchitectNov 17, 2025

The Legal Reality

If you manage a public-sector website in Ontario, AODA compliance isn't a nice-to-have: it's the law. The Accessibility for Ontarians with Disabilities Act requires all public sector organizations to meet WCAG 2.0 Level AA standards. By 2025, this extends to WCAG 2.1.

Yet many municipal websites still fall short. Not because of negligence, but because accessibility requirements can feel overwhelming, technical, and abstract. This guide breaks it down in plain language.

What AODA Actually Requires for Websites

Under the Integrated Accessibility Standards Regulation (IASR), your website must be:

  • Perceivable: Users can perceive all content (even if they can't see, hear, or touch it)
  • Operable: Users can navigate and interact with all functionality
  • Understandable: Content and operation are clear and predictable
  • Robust: Content works with current and future assistive technologies
  • In practice, this means meeting 50+ specific success criteria in WCAG 2.1 Level AA. Let's focus on the 10 most common failures I encounter on municipal sites.

    The 10 Most Common Accessibility Mistakes

    1. Missing or Unhelpful Alt Text

    The Problem: Images either have no alt text at all, or use meaningless descriptions like "image1.jpg" or "photo."

    Why It Matters: Screen reader users hear "image" with no context, missing critical information that sighted users take for granted.

    The Fix:

  • Describe the content and purpose of the image
  • For decorative images, use empty alt text (alt="")
  • For complex images (charts, infographics), provide detailed descriptions nearby
  • Example:

    <!-- Bad -->
    <img src="mayor-signing.jpg">
    <img src="mayor-signing.jpg" alt="photo">
    
    <!-- Good -->
    <img src="mayor-signing.jpg" alt="Mayor Johnson signing the new transit agreement with regional partners">

    2. Insufficient Color Contrast

    The Problem: Text blends into backgrounds, especially light gray text on white or low-contrast brand colors.

    Why It Matters: Users with low vision, colour blindness, or even those viewing screens in bright sunlight cannot read low-contrast text.

    The Fix:

  • Normal text needs a contrast ratio of at least 4.5:1
  • Large text (18pt+ or 14pt bold) needs at least 3:1
  • Use tools like WebAIM's Contrast Checker to verify
  • Common Offenders:

  • Light gray placeholder text in forms
  • Branded accent colours used for body text
  • White text on pastel backgrounds
  • 3. Broken Heading Hierarchy

    The Problem: Headings are chosen based on visual size rather than document structure. Pages skip from H1 to H4, or use multiple H1s.

    Why It Matters: Screen reader users navigate by headings. A broken hierarchy is like a book with chapters in random order.

    The Fix:

  • Every page gets exactly one H1 (the main title)
  • Use headings in order: H1 → H2 → H3 (never skip levels)
  • Don't use headings just to make text bigger (use CSS instead)
  • 4. Keyboard Navigation Failures

    The Problem: Dropdown menus, modal windows, and interactive elements only work with a mouse.

    Why It Matters: Users who cannot use a mouse (motor disabilities, screen reader users) are completely locked out of functionality.

    The Fix:

  • All interactive elements must be reachable via Tab key
  • Focus states must be visible (don't remove the outline)
  • Modal dialogs must trap focus and be dismissable with Escape
  • Dropdown menus must work with arrow keys
  • Quick Test: Unplug your mouse and try to complete a task on your site using only the keyboard.

    5. Missing Form Labels

    The Problem: Form fields use placeholders instead of labels, or have labels that aren't programmatically connected.

    Why It Matters: Screen readers announce form fields by their labels. Without proper association, users don't know what information to enter.

    The Fix:

  • Every form field needs a <label> element
  • Use the for attribute to connect labels to inputs
  • Placeholders are hints, not replacements for labels
  • Example:

    <!-- Bad -->
    <input type="text" placeholder="Email address">
    
    <!-- Good -->
    <label for="email">Email address</label>
    <input type="email" id="email" placeholder="[email protected]">

    6. Inaccessible PDFs

    The Problem: Scanned documents, image-based PDFs, and untagged PDFs are uploaded without remediation.

    Why It Matters: Screen readers cannot read image-based or poorly structured PDFs. This is one of the most common AODA complaints.

    The Fix:

  • Use proper document structure in the source file (Word, InDesign)
  • Export with accessibility settings enabled
  • For scanned documents, run OCR and add proper tagging
  • Consider HTML alternatives for frequently accessed documents
  • 7. Auto-Playing Media

    The Problem: Videos or audio start playing automatically when a page loads.

    Why It Matters: This can interfere with screen readers, startle users, and cause issues for those with cognitive disabilities.

    The Fix:

  • Never auto-play media with sound
  • If motion is essential, provide pause/stop controls immediately visible
  • Include user preference settings when possible
  • 8. Missing Skip Links

    The Problem: Every page requires tabbing through the entire navigation before reaching main content.

    Why It Matters: Keyboard users must press Tab dozens of times on every page just to get to the content they came for.

    The Fix:

  • Add a "Skip to main content" link as the first focusable element
  • Make it visible on focus (it can be hidden until triggered)
  • Link to the main content area using an ID
  • 9. Non-Descriptive Link Text

    The Problem: Links say "click here," "read more," or "learn more" without context.

    Why It Matters: Screen reader users often navigate by links alone. Hearing "click here" repeated 15 times provides no useful information.

    The Fix:

  • Link text should describe the destination or action
  • Front-load important words (screen reader users often scan just the first few words)
  • Avoid generic phrases
  • Example:

    <!-- Bad -->
    To register, <a href="/register">click here</a>.
    
    <!-- Good -->
    <a href="/register">Register for the community cleanup event</a>.

    10. Time Limits Without Controls

    The Problem: Session timeouts or form submissions have time limits with no warning or extension option.

    Why It Matters: Users who need more time to read or input information (cognitive disabilities, screen reader users) may lose their work.

    The Fix:

  • Warn users before time expires
  • Allow users to extend or disable time limits
  • Save form progress where possible
  • Free Accessibility Testing Tools

    You don't need expensive software to start testing. These free tools will catch most common issues:

    WAVE (Web Accessibility Evaluation Tool)

    wave.webaim.org

    Browser extension that overlays accessibility issues directly on your page. Great for quick visual checks.

    axe DevTools

    deque.com/axe/devtools

    Browser extension with detailed WCAG violation reports. Industry standard for developers.

    Colour Contrast Analyzer

    tpgi.com/color-contrast-checker

    Desktop application for checking contrast ratios between any two colours.

    NVDA Screen Reader

    nvaccess.org

    Free screen reader for Windows. Essential for understanding how blind users experience your site.

    Case Study: Before and After

    The Challenge

    A mid-sized Ontario municipality approached me after receiving multiple AODA complaints about their website. An accessibility audit revealed:

  • 47% of images missing alt text
  • 12 pages with broken heading hierarchy
  • 200+ PDF documents without proper tagging
  • No skip navigation link
  • Contrast failures on the primary navigation
  • The Approach

    Rather than a complete redesign, we implemented targeted fixes:

  • Content Audit: Catalogued all accessibility issues by severity and page traffic
  • Quick Wins: Fixed contrast, added skip links, corrected heading structure (completed in 2 weeks)
  • Image Remediation: Trained content editors on writing effective alt text (ongoing)
  • PDF Strategy: Converted high-traffic PDFs to HTML, created remediation workflow for archives
  • The Results

    After 3 months:

  • WAVE errors reduced by 89%
  • Zero new AODA complaints
  • Average session duration increased by 23% (content was actually usable)
  • Staff time spent on accessibility-related support requests dropped 60%
  • Start Your Accessibility Journey

    Achieving AODA compliance can feel daunting, but perfect is the enemy of good. Start with these three steps:

  • Run a WAVE scan on your 10 highest-traffic pages
  • Fix the critical errors first (missing alt text, contrast, form labels)
  • Train your content team on accessibility basics
  • Every fix makes your site more usable for everyone: not just users with disabilities, but also mobile users, older adults, and anyone in a challenging environment.


    Need help achieving AODA compliance on your municipal website? [Get in touch](/contact) for a comprehensive accessibility audit and remediation roadmap.

    Share this article

    More Articles