7 WCAG Rules You’re Breaking

---

As we navigate the digital accessibility landscape in 2025, many websites continue to violate critical Web Content Accessibility Guidelines (WCAG) requirements, exposing organizations to legal risks while excluding millions of potential users. With WCAG 2.2 now established and WCAG 3.0 in development, staying current with accessibility standards has never been more important. This article identifies the seven most common WCAG violations and provides practical solutions to fix them, helping you meet legal requirements while creating more accessible digital experiences for everyone.

Understanding the Latest WCAG Requirements

---

Before diving into specific violations, let’s examine the current state of WCAG standards and what they mean for your website in 2025.

WCAG 2.2 to WCAG 3.0 Transition | What’s Changed

---

WCAG has evolved significantly since its inception.

The most notable additions in WCAG 2.2 include criteria addressing:

• Enhanced mobile accessibility requirements
• Improved standards for users with cognitive disabilities
• Better support for those using speech recognition software
• More precise guidance for motion-activated functions

WCAG 2.2, officially published in late 2023, added nine new success criteria to the previous version, with particular focus on improving accessibility for users with cognitive disabilities and enhancing navigation for those using assistive technologies. Meanwhile, WCAG 3.0 remains under development but will introduce several fundamental changes to how accessibility is measured and implemented. Unlike the minor updates in WCAG 2.2, version 3.0 will feature:

• A shift from the A/AA/AAA conformance model to Bronze/Silver/Gold levels
• A new scoring system replacing the binary pass/fail approach
• Expanded scope beyond websites to include mobile apps and emerging technologies
• Greater emphasis on cognitive and learning disabilities
• A more flexible framework for assessing accessibility

This transition represents a significant evolution in how we approach digital accessibility, moving toward more nuanced evaluations that better reflect real user experiences.

Legal Implications of Non-Compliance in 2025

---

2025 marks a critical year for accessibility compliance with several major deadlines approaching:

• European Accessibility Act (EAA): Full compliance required by June 28, 2025, affecting any business serving European customers
• Colorado’s HB21-1110: State and local government websites must comply with WCAG 2.1 by July 1, 2025
• U.S. Department of Justice: Expected to finalize regulations clarifying web accessibility standards under the ADA, likely aligning with WCAG 2.1 AA guidelines

The legal landscape continues to evolve, with courts increasingly interpreting the Americans with Disabilities Act (ADA) to require digital accessibility. Organizations that fail to address accessibility issues face mounting legal risks, including:

• Increasing litigation from both legitimate plaintiffs and “drive-by” lawsuits
• Potential financial penalties up to $4,000 per violation in some jurisdictions
• Brand reputation damage
• Loss of government contracts that require accessibility compliance

Given these risks, proactively addressing WCAG violations is not just good practice—it’s essential for risk management and business sustainability.

Critical WCAG Violations to Address Immediately

---

Let’s examine the seven most common WCAG violations and how to fix them to improve your compliance position.

Violation #1 | Insufficient Color Contrast

---

Insufficient color contrast remains one of the most frequent accessibility issues, affecting users with low vision, color blindness, and those using devices in bright sunlight. This violation occurs when text and background colors lack adequate differentiation, making content difficult or impossible to read.

Technical Requirements for Contrast Ratios

WCAG success criterion 1.4.3 (Level AA) requires:

• Text and images of text must have a contrast ratio of at least 4.5:1
• Large text (18pt or 14pt bold and larger) requires a minimum ratio of 3:1
• User interface components and graphical objects must maintain at least 3:1 contrast against adjacent colors

Contrast is measured as a ratio between the luminance of the foreground color and the background color. For example, pure black text (#000000) on a white background (#FFFFFF) achieves the maximum contrast ratio of 21:1, while light gray text on a white background might fall below the required threshold.

Implementation Steps for Designers and Developers

To fix contrast issues:

1. Conduct a contrast audit: Use tools like the WebAIM Contrast Checker or browser developer tools to identify low-contrast elements
2. Adjust color pairs: Darken text colors or lighten backgrounds to achieve proper ratios
3. Create a compliant color palette: Develop a set of pre-approved, WCAG-compliant color combinations for your design system
4. Check all states: Ensure hover, focus, and active states also maintain sufficient contrast
5. Consider users with color blindness: Test your designs with color blindness simulators to ensure content remains distinguishable

Remember that transparency and opacity settings can affect contrast ratios, so test your final rendered colors rather than just the initial values.

Violation #2: Missing Alternative Text

---

Missing or inadequate alternative text (alt text) for images prevents screen reader users from understanding visual content, creating significant barriers for blind and visually impaired users.

When and How to Use Alt Text Effectively

---

Alt text serves as a textual replacement for images and should:

• Describe the content and function of the image
• Be concise yet descriptive (typically 125 characters or less)
• Include any text that appears within the image
• Convey the same information a sighted user would gain
• Be context-appropriate for where the image appears

For example, instead of generic alt text like “product image,” use specific descriptions like “Red Nike running shoes with white soles, side view.”

Handling Decorative vs. Informative Images

Not all images require descriptive alt text:

• Decorative images that don’t add information should have empty alt attributes (alt=””) so screen readers skip them
• Functional images like buttons need alt text describing their action (e.g., “Search” for a magnifying glass icon)
• Complex images such as charts or diagrams may require longer descriptions through additional methods
• Images containing text should include that text in the alt attribute

This differentiation ensures screen reader users receive necessary information without being burdened by excessive descriptions of purely decorative elements.

Violation #3 | Inaccessible Form Controls

---

Forms present particular accessibility challenges, with common violations including unlabeled inputs, missing error indications, and lack of instructions.

Properly Labeling Form Elements

---

Every form control needs a proper, programmatically associated label:

1. Use explicit HTML <label> elements connected to inputs via the “for” attribute
2. Ensure the visible label text matches the programmatic name (for speech recognition users)
3. Group related controls with <fieldset> and <legend> elements
4. Include required field indicators in a way that doesn’t rely solely on color
5. Provide clear, specific instructions for complex inputs

For example, instead of a standalone date field, use:

<label for=”appointment-date”>Appointment Date (MM/DD/YYYY)</label>
<input type=”date” id=”appointment-date” name=”appointment-date” required>

Error Identification and Recovery Techniques

When users make mistakes in forms:

1. Clearly identify errors at the top of the form and at individual fields
2. Use multiple cues beyond just color (icons, bold text, borders)
3. Provide specific guidance on how to fix each error
4. Maintain user-entered data to minimize frustration
5. Allow users to resubmit the form without losing information

These techniques help all users—not just those with disabilities—complete forms successfully with minimal frustration.

Violation #4 | Non-Responsive Designs

---

Non-responsive designs create barriers for users with low vision who need to zoom, as well as those using mobile devices or screen magnification software.

Testing Across Device Sizes

---

To identify responsiveness issues:

1. Test your website at multiple viewport widths (320px, 768px, 1024px, and larger)
2. Verify content at 200% zoom without horizontal scrolling
3. Ensure all functionality works on touch-only devices
4. Check that text remains readable at all sizes
5. Test navigation patterns across different screens

Document your findings systematically, noting where layouts break or become unusable.

Responsive Design Best Practices

To create truly accessible responsive designs:

1. Use relative units (%, em, rem) rather than fixed pixels
2. Implement flexible layouts with CSS Grid or Flexbox
3. Ensure touch targets are at least 44×44 pixels
4. Provide alternative navigation for small screens
5. Test with actual devices, not just browser resizing
6. Ensure text remains readable when resized up to 200%

Responsive design benefits everyone but is particularly crucial for users with disabilities who may need to customize their viewing experience.

Violation #5 | Keyboard Inaccessibility

---

Keyboard accessibility failure is one of the most significant barriers for users with motor disabilities, preventing them from navigating your website without a mouse.

Ensuring All Interactive Elements Work with Keyboard

---

All interactive elements must be accessible using only the keyboard:

1. Verify every link, button, form control, and menu can be reached using Tab
2. Ensure custom components (dropdowns, sliders, modals) work with standard keyboard controls
3. Avoid keyboard traps where focus gets stuck within an element
4. Test all functions using only keyboard (no mouse or touchpad)
5. Fix elements that only respond to mouse events like hover or click

Keyboard testing should be part of your regular QA process, not just a one-time check.

Focus Management Best Practices

Proper focus management helps keyboard users understand where they are on the page:

1. Provide visible focus indicators that meet 3:1 contrast requirements
2. Maintain logical focus order matching the visual layout
3. Manage focus during interactions (returning focus after modal dialogs close)
4. Avoid auto-focus except where beneficial for form completion
5. Ensure custom components follow expected keyboard patterns

Focus management particularly benefits screen reader users who rely on keyboard navigation to understand page content and structure.

Violation #6 | Missing Document Structure

---

Poor document structure creates confusion for screen reader users who rely on semantic markup to navigate and understand content.

Proper Heading Hierarchy Implementation

---

Headings create an outline of your content that screen reader users rely on:

1. Use a single H1 for the main page title
2. Structure headings in order (H1, followed by H2, then H3, etc.)
3. Never skip heading levels for styling purposes
4. Ensure headings accurately reflect content hierarchy
5. Use headings for actual section titles, not for styling regular text

Proper heading hierarchy helps all users scan content quickly while providing essential navigation aids for assistive technology users.

Using ARIA Landmarks Appropriately

ARIA landmarks define regions of the page:

1. Include essential landmarks (banner, navigation, main, contentinfo)
2. Use landmarks sparingly and consistently
3. Don’t nest landmarks of the same type
4. Ensure all content falls within appropriate landmarks
5. Test with screen readers to verify proper announcement

For example:

<header role=”banner”>…</header>
<nav role=”navigation”>…</nav>
<main role=”main”>…</main>
<footer role=”contentinfo”>…</footer>

These landmarks create a map of your page for screen reader users, helping them quickly jump to important sections.

Violation #7 | Multimedia Without Accessibility Features

---

Uncaptioned videos and audio content without transcripts exclude deaf and hard-of-hearing users, violating WCAG success criteria 1.2.2 and 1.2.3.

Adding Captions and Transcripts

---

For accessible multimedia:

1. Provide synchronized captions for all video content
2. Include speaker identification in captions when multiple people speak
3. Caption all speech and relevant non-speech sounds
4. Create transcripts for audio-only content
5. Ensure caption controls are keyboard accessible

Quality captions should be accurate, synchronized, complete, and properly positioned on screen without obscuring important visual content.

Audio Description Requirements

For users who are blind or have low vision:

1. Provide audio descriptions of important visual content not covered in the main audio track
2. Include descriptions of actions, settings, facial expressions, and text on screen
3. Consider extended audio descriptions for content with minimal pauses
4. Ensure audio description controls are accessible
5. Test with users who rely on audio descriptions

For example, a video showing a demonstration with minimal narration would need audio descriptions explaining what’s being demonstrated visually.

Implementing a Sustainable WCAG Compliance Strategy

---

Fixing these seven common violations will significantly improve your website’s accessibility, but maintaining compliance requires ongoing attention.

Integrating Accessibility Testing into Development

---

Build accessibility into your development process:

1. Start with accessible design patterns and components
2. Use automated testing tools like Axe, WAVE, or Lighthouse during development
3. Implement accessibility checks in your CI/CD pipeline
4. Conduct regular manual testing with keyboard and screen readers
5. Test with actual assistive technologies, not just simulations

Automated tools can identify about 30-40% of accessibility issues, making them valuable but insufficient on their own. Manual testing remains essential for identifying more complex issues.

Training Team Members on Accessibility Standards

Create an accessibility-aware culture:

1. Provide role-specific training for designers, developers, content creators, and QA
2. Include accessibility in job descriptions and performance reviews
3. Designate accessibility champions within each team
4. Create clear internal standards and documentation
5. Stay updated on evolving requirements through industry resources and communities

Building internal expertise reduces reliance on outside consultants while creating more sustainable accessibility practices.

Preparing for Future WCAG Changes

---

As WCAG continues to evolve toward version 3.0, organizations should:

1. Stay informed about working drafts and timeline updates
2. Participate in public feedback opportunities
3. Begin exploring the new scoring model approach
4. Prepare for expanded requirements addressing cognitive accessibility
5. Document current compliance efforts to facilitate future transitions

While WCAG 3.0 represents a significant shift, organizations that address current violations will be better positioned to adapt to future requirements.

Using Automated Tools for Quick Insights (Accessibility-Test.org Scanner)

Automated testing tools provide a fast way to identify many common accessibility issues. They can quickly scan your website and point out problems that might be difficult for people with disabilities to overcome.

Visit Our Tools Comparison Page!

---

Run a FREE scan to check compliance and get recommendations to reduce risks of lawsuits

---

To Conclude Our 2025 Compliance Guide

---

The seven WCAG violations outlined above represent the most common accessibility barriers found on websites today. Addressing these issues not only reduces legal risk in a changing regulatory landscape but also expands your potential audience by creating more inclusive digital experiences.

As we move through 2025, with major deadlines approaching and new standards emerging, organizations that prioritize accessibility will gain competitive advantages while avoiding costly remediation efforts and potential litigation. By implementing the practical solutions outlined in this article, you can make significant progress toward WCAG compliance while building a foundation for meeting future requirements.

Remember that accessibility is an ongoing journey rather than a one-time project. By implementing sustainable processes, training your team, and staying current with evolving standards, you can create digital experiences that work better for everyone.