10 Accessibility Mistakes on Government Websites (And How to Fix Them)

Government websites must be accessible to all residents, including those with disabilities. Yet many municipal sites have accessibility problems that exclude users and create legal liability. Through our audits of municipal websites across Illinois, we consistently find the same issues. This guide covers the top ten accessibility mistakes and how to fix them.

Understanding Accessibility Impact

Before diving into specific issues, understand who's affected. Accessibility problems impact:

• Blind and low-vision users who rely on screen readers
• Deaf and hard-of-hearing users who need captions
• Motor-impaired users who navigate with keyboards or switches
• Cognitive disability users who need clear content organization
• Older adults with age-related impairments
• Temporary impairments (broken arm, eye surgery)
• Situational limitations (bright sunlight, noisy environment)

According to the CDC, 26% of American adults have some type of disability. That's a significant portion of your residents.

Mistake #1: Inaccessible PDF Documents

PDF documents are the single biggest accessibility problem on municipal websites. Most government sites have hundreds or thousands of PDFs: meeting minutes, forms, reports, and policies.

The Problem

Scanned PDFs are images of text that screen readers can't read at all. Users hear nothing or meaningless characters.

Untagged PDFs lack the structural information screen readers need to convey document organization—headings, lists, tables, reading order.

How to Fix It

For new documents:

1. Create documents in Word or other source applications using proper styles (Heading 1, Heading 2, etc.)
2. Add alt text to images
3. Use "Export to PDF" or "Save as PDF" rather than print-to-PDF
4. Check accessibility in Adobe Acrobat before posting

For existing documents:

1. Prioritize most-accessed and legally-required documents
2. Use Adobe Acrobat's accessibility tools to add tags
3. Consider providing HTML alternatives for critical documents
4. Plan remediation budget for document backlog

Quick Test

Open a PDF, press Ctrl+A (Command+A on Mac). If all text is selected, it's real text. If nothing selects or selection is irregular, it's likely a scanned image.

Mistake #2: Missing Alternative Text on Images

Images without alternative text (alt text) are invisible to screen reader users. They hear "image" or "graphic" with no description.

The Problem

Common offenders:

• Department head photos
• Infographics and charts
• Maps
• Icons used for navigation
• Promotional banners

Some sites have alt text, but it's useless: "image1.jpg" or "photo" conveys nothing.

How to Fix It

Write descriptive alt text:

• Describe the image's content and function
• Keep it concise but informative (usually under 125 characters)
• For complex images, provide detailed descriptions nearby
• For decorative images, use empty alt (alt="")

Examples:

• Bad: "photo"
• Good: "Mayor Johnson speaking at the new library groundbreaking ceremony"
• Bad: "chart"
• Good: "Bar chart showing tax revenue increased 15% from 2023 to 2024"

For linked images, describe where the link goes, not the image appearance.

Mistake #3: Poor Color Contrast

Text that doesn't have sufficient contrast against its background is difficult or impossible for users with low vision to read.

The Problem

Common contrast failures:

• Light gray text on white backgrounds
• Colored text on colored backgrounds
• Text over images without sufficient overlay
• Placeholder text in forms

The Standard

WCAG 2.1 requires:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18pt+ or 14pt bold): 3:1 minimum
• UI components and graphics: 3:1 minimum

How to Fix It

1. Use a contrast checker tool (WebAIM Contrast Checker, Colour Contrast Analyser)
2. Test all text/background combinations in your design
3. Adjust colors until ratios meet standards
4. Don't forget hover states, focus states, and error messages

Mistake #4: Keyboard Navigation Failures

Many users can't use a mouse—they navigate with keyboards, switches, or other alternative devices. If your site requires a mouse, it excludes these users.

The Problem

Common keyboard failures:

• Dropdown menus that only open on mouse hover
• Custom buttons and controls that aren't keyboard focusable
• Focus traps that prevent users from navigating away
• Missing or invisible focus indicators
• Illogical focus order that jumps around the page

How to Fix It

Test with keyboard only:

1. Put away your mouse
2. Use Tab to move forward, Shift+Tab to move backward
3. Use Enter or Space to activate buttons and links
4. Use arrow keys for menus and controls

Requirements:

• All interactive elements must be reachable by keyboard
• Focus indicators must be visible (never use outline: none without alternative)
• Focus order should be logical (typically left-to-right, top-to-bottom)
• No keyboard traps

Mistake #5: Forms Without Proper Labels

Forms are how residents interact with government services online. Inaccessible forms exclude users from essential services.

The Problem

• Form fields without associated labels
• Labels that disappear when user starts typing (placeholder-only labels)
• Error messages that don't indicate which field has the error
• Required fields not announced to screen readers

How to Fix It

Proper label association:

<!-- Good: Label associated with input -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">

<!-- Bad: No association -->
<span>Email Address</span>
<input type="email" name="email">

Additional requirements:

• Mark required fields programmatically (aria-required="true")
• Provide clear error messages that identify the problem and solution
• Associate errors with their fields (aria-describedby)
• Don't rely solely on color to indicate errors

Mistake #6: Videos Without Captions

Video content is increasingly common on municipal websites: meeting recordings, promotional videos, tutorials. Without captions, deaf and hard-of-hearing users are excluded.

The Problem

• Videos with no captions at all
• Auto-generated captions with uncorrected errors
• Captions that miss significant audio (music, sound effects, speaker changes)

How to Fix It

Caption requirements:

• All spoken content must be captioned
• Identify speakers when multiple people talk
• Include relevant sound descriptions [applause], [phone ringing]
• Sync captions with audio timing

Caption process:

1. Use auto-captioning as starting point (YouTube, Rev.com, etc.)
2. Review and correct all errors
3. Verify timing alignment
4. Test captions with video

For meeting recordings, consider professional transcription services. The investment is worthwhile for legal compliance and usability.

Mistake #7: Missing Page Titles and Heading Structure

Screen reader users can't scan a page visually. They rely on page titles and heading structure to understand content organization.

The Problem

• Pages with generic or missing titles ("Home" for every page)
• Headings skipped (H1 to H3 with no H2)
• Headings chosen for visual appearance rather than structure
• Important content not marked with headings

How to Fix It

Page titles:

• Every page needs a unique, descriptive title
• Format: "Page Name | Site Name"
• Titles should make sense out of context

Heading structure:

• One H1 per page (usually the page title)
• Headings in logical order (H1 → H2 → H3)
• Don't skip levels
• Use headings for structure, not just visual styling

Mistake #8: Links That Don't Make Sense Out of Context

Screen reader users often navigate by links, hearing a list of all links on the page. Links like "click here" or "read more" are meaningless out of context.

The Problem

• "Click here" links everywhere
• "Read more" repeated multiple times
• Links that say only "link" or just an icon
• URLs used as link text

How to Fix It

Good link text:

• Describes destination or action
• Makes sense out of context
• Is unique (no multiple "Read more" links)

Examples:

• Bad: "To register for the town meeting, click here"
• Good: "Register for the November 15 Town Meeting"
• Bad: "Read more" (repeated 10 times)
• Good: "Read more about the new parking ordinance"

Mistake #9: Inaccessible Third-Party Widgets

Municipal websites often embed third-party content: payment portals, calendar widgets, social media feeds, mapping tools. These can introduce accessibility barriers you don't control.

The Problem

• Payment processors with inaccessible forms
• Calendar widgets that don't work with keyboards
• Social media embeds without alternatives
• Maps without text alternatives

How to Fix It

Before implementing:

• Evaluate accessibility of third-party components
• Request accessibility documentation (VPAT/ACR)
• Test critical functionality with keyboard and screen reader

If inaccessible:

• Request fixes from vendor
• Consider alternative products
• Provide accessible alternatives (phone payment option, text-based event listings)

Ongoing:

• Monitor for accessibility regressions after vendor updates
• Include accessibility requirements in vendor contracts

Mistake #10: Time Limits Without Control

Some website functions impose time limits that can exclude users who need more time to complete tasks.

The Problem

• Session timeouts that log users out without warning
• Forms that must be completed in a fixed time
• Auto-advancing content (carousels, slideshows) without pause controls

How to Fix It

For session timeouts:

• Warn users before timeout (at least 20 seconds)
• Allow users to extend time
• Provide option to disable timeout (for non-security situations)

For auto-advancing content:

• Provide pause, stop, and hide controls
• Consider not auto-advancing at all
• Ensure users can access all content regardless of timing

Testing Your Website for Accessibility

Don't wait for complaints. Proactively test your site.

Automated Testing

Tools that scan for common issues:

• WAVE (wave.webaim.org)
• axe DevTools
• Lighthouse (in Chrome)
• Pa11y

Limitation: Automated tools catch only about 30% of accessibility issues. They can't judge whether alt text is meaningful or navigation is logical.

Manual Testing

Essential manual checks:

1. Keyboard navigation: Can you do everything without a mouse?
2. Screen reader: Use NVDA (free) or VoiceOver (Mac) to experience your site
3. Zoom: Does content work at 200% zoom?
4. Color: Does information make sense without color?

Professional Audits

Comprehensive audits by accessibility specialists identify issues that automated and basic manual testing miss. Consider annual audits with remediation plans.

At CivicSitePro, our free website audit includes accessibility evaluation. For deeper analysis, our ADA accessibility services provide comprehensive auditing and remediation.

Creating an Accessibility Culture

Fixing current issues isn't enough. Build accessibility into your ongoing practices:

• Train all content editors on accessibility basics
• Include accessibility checks in content publishing workflow
• Require accessibility in vendor contracts
• Conduct regular accessibility audits
• Respond promptly to accessibility complaints

Ready to make your municipal website accessible to all residents? Request a free audit or schedule a consultation to discuss your accessibility needs.