How to Fix WCAG Violations: The Complete Guide for Non-Developers
96% of websites have detectable WCAG violations.
Most of them are fixable without touching a line of code. This guide shows you exactly how — as a content editor, marketer, designer, or business owner.
Scan your site free to find your violationsWhy This Guide Exists
Most accessibility guides are written for developers. They assume you understand HTML, ARIA attributes, and the DOM. But the reality is that a huge portion of WCAG violations are not code problems — they are content problems. Missing descriptions, vague link text, unclear form instructions. Things that anyone who can edit a webpage can fix.
This guide covers the five violations that appear most frequently in real-world scans, explains exactly why they matter to disabled users, and gives you concrete steps to fix them — with or without developer help.
WCAG in 60 Seconds
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Version 2.1 Level AA is what most laws — including the ADA in the US — point to when determining compliance.
The entire standard is built on four principles. Your site must be:
- Perceivable — Content must be available to at least one sense — vision, hearing, or touch.
- Operable — Every feature must work without a mouse — keyboard, switch, or voice.
- Understandable — Text and behavior must be clear and predictable.
- Robust — Content must work with current and future assistive technologies.
Violations are scored by impact: critical, serious, moderate, and minor. Critical violations block access entirely. Serious violations create significant barriers. Fix critical and serious issues first.
The 5 Most Common WCAG Violations — and How to Fix Them
Missing Alt Text on Images
WCAG 1.1.1 · Affects: Screen reader users
Why it matters
When an image has no alt text, a screen reader announces the file name — something like "IMG_3847.jpg" — which tells the user nothing. For blind or low-vision visitors, this breaks the entire context of your page.
How to fix it
Add a short description that explains what the image shows or does. Focus on purpose, not appearance.
Examples
✗ Fails
alt="" (decorative image used as a CTA)
✓ Passes
alt="Get your free accessibility report"
✗ Fails
alt="image1.png"
✓ Passes
alt="Bar chart showing ADA lawsuits by state in 2024"
Insufficient Color Contrast
WCAG 1.4.3 · Affects: Low vision, color blind users
Why it matters
Light gray text on a white background or yellow text on a white button may look sleek but fails users with low vision or color blindness. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
How to fix it
Darken your text or deepen your background until the contrast ratio passes. Free tools like the WebAIM Contrast Checker let you test any two colors instantly.
Examples
✗ Fails
#999999 text on #ffffff background (ratio: 2.85:1 — fails)
✓ Passes
#595959 text on #ffffff background (ratio: 7:1 — passes)
✗ Fails
Light blue button label on white button
✓ Passes
Deep navy label on white button
Missing or Unclear Form Labels
WCAG 1.3.1 / 3.3.2 · Affects: Screen reader users, keyboard users
Why it matters
Placeholder text inside a field disappears the moment a user starts typing. If there is no persistent label, screen reader users have no way to know what a field is asking for — especially after they have started filling it in.
How to fix it
Every input field needs a visible label that stays visible while the user types. Labels should be placed above the field, not inside it.
Examples
✗ Fails
Input with placeholder "Enter your email" and no label
✓ Passes
Label "Email address" above the input field
✗ Fails
Search box with only a magnifying glass icon
✓ Passes
Search box with visible "Search" label or aria-label="Search"
Vague Link Text
WCAG 2.4.4 · Affects: Screen reader users, keyboard users
Why it matters
Screen reader users can pull up a list of all links on a page to navigate quickly. If every link says "Click here" or "Read more", the list is meaningless. They have no idea where each link leads without reading the surrounding paragraph.
How to fix it
Make every link descriptive enough to make sense on its own, out of context.
Examples
✗ Fails
"Click here to download our compliance checklist"
✓ Passes
"Download the ADA compliance checklist"
✗ Fails
"Read more" under a blog post about WCAG 2.2
✓ Passes
"Read: What changed in WCAG 2.2"
Keyboard Navigation Failures
WCAG 2.1.1 / 2.4.7 · Affects: Keyboard-only users, motor impaired users
Why it matters
Many users cannot use a mouse. They navigate entirely via keyboard — Tab to move forward, Shift+Tab to go back, Enter to activate. If your menus, modals, or buttons are not reachable by keyboard, these users are completely locked out.
How to fix it
Test your site using only the keyboard. Press Tab repeatedly and verify every interactive element gets a visible focus ring and can be activated with Enter or Space.
Examples
✗ Fails
Dropdown menu only opens on mouse hover
✓ Passes
Dropdown opens on keyboard focus and closes on Escape
✗ Fails
Focus ring removed with outline: none in CSS
✓ Passes
Visible focus ring with sufficient contrast
Not sure which violations your site has?
WCAGsafe scans your site in under 60 seconds and shows you every violation, sorted by impact — with plain-English explanations and fix instructions.
Scan my website free3 More Violations Worth Knowing
Missing "Skip to Content" Link
Keyboard users must Tab through every navigation link on every page before reaching the main content — unless a skip link exists. Add one hidden link at the very top of the page: "Skip to main content". It only appears on keyboard focus and saves users from navigating a 40-item menu on every page load.
Videos Without Captions
Any video with speech requires closed captions. Auto-generated captions from YouTube or Vimeo are a start but often inaccurate. Review and correct them before publishing. This is a content task — no developer required.
Unclear Error Messages on Forms
Generic errors like "Invalid input" or "Something went wrong" force users to guess what they did wrong. Error messages must identify the field that failed and explain how to fix it. "Password must be at least 8 characters" is correct. "Error in field 3" is not.
A Practical Process for Non-Developers
- 1
Run an automated scan
Automated tools catch 30–40% of violations instantly — missing alt text, contrast failures, missing labels. Start here.
- 2
Fix everything you can without a developer
Alt text, link text, form labels, captions, error messages. These are content changes you can make today in your CMS.
- 3
Document what needs developer attention
Keyboard traps, focus management, missing ARIA roles. Write a clear brief with the WCAG criterion, the element, and the expected behavior.
- 4
Test manually
Navigate your site with only the keyboard. Zoom to 200% and verify nothing breaks. Try a free screen reader (NVDA on Windows, VoiceOver on Mac).
- 5
Monitor monthly
New content and code changes introduce new violations. Schedule a monthly automated scan so regressions get caught before they become legal problems.
3 Myths That Stop Businesses From Acting
Myth: "Accessibility is a developer problem"
Reality: Around half of all WCAG violations are content issues — alt text, link text, form labels, captions. Content editors and marketers own these.
Myth: "It is too expensive to fix"
Reality: The content fixes in this guide cost nothing. The developer fixes are typically small — a few hours of work. An ADA lawsuit settlement averages $75,000.
Myth: "We only have disabled users on a small percentage of our traffic"
Reality: 1 in 4 adults in the US has a disability. Temporary impairments (broken arm, bright sunlight) affect everyone. Accessibility improvements help all users.
Final Thoughts
Accessibility does not require a complete site rebuild. The violations that appear most often — and carry the highest legal risk — are also the easiest to fix. Add alt text, improve your contrast, label your forms, describe your links, and make sure keyboard users can navigate your site.
Start by finding out what you actually have. Scan your site, prioritize by impact, fix what you can today, and hand the rest to a developer with a clear brief. Then set up monitoring so you stay compliant as your site evolves.
Quick Fix Checklist
- Add descriptive alt text to every meaningful image
- Check color contrast — aim for 4.5:1 ratio on body text
- Replace all placeholder-only form fields with visible labels
- Rewrite every "Click here" and "Read more" link to be descriptive
- Tab through your site — verify every button and link is reachable
- Add captions to all videos with speech
- Write specific error messages that explain how to correct the problem
- Set up monthly monitoring to catch new violations automatically
Find every violation on your site in 60 seconds
WCAGsafe runs a full WCAG 2.1 AA scan using axe-core — the same engine used by Google Chrome DevTools. Get your score, violation list, and fix instructions free.