Technical Remediation Checklist - The 50-Point WCAG Compliance Audit

Overview: Prioritizing Your Remediation Effort

This checklist follows a triage approach, addressing violations most likely to trigger lawsuits first. Each item includes detection methods, implementation examples, and testing protocols. Complete Critical items within 24 hours, High priority within 7 days, and Medium priority within 30 days.

Section 1: Critical Violations (Fix Within 24 Hours)

Images & Non-Text Content (WCAG 1.1.1)

1. Product Images

• All product images have descriptive alt text
• Detection: document.querySelectorAll('img:not([alt])')
• Fix: Add alt text describing the product, not the file name
• Example: alt="Navy blue cotton t-shirt with crew neck"

2. Decorative Images

• Purely decorative images marked with empty alt and role="presentation"
• Detection: Check for spacer.gif, border images, visual flourishes
• Fix: <img src="decoration.png" alt="" role="presentation">

3. Complex Graphics

• Charts, graphs, and infographics have long descriptions
• Detection: Look for canvas elements, SVGs, data visualizations
• Fix: Add aria-describedby linking to detailed text description

4. Background Images with Content

• CSS background images containing text have accessible alternatives
• Detection: Inspect CSS for background-image with meaningful content
• Fix: Add screen reader-only text or use real text over images

Keyboard Navigation (WCAG 2.1.1)

5. Tab Order

• All interactive elements reachable via keyboard
• Test: Tab through entire site without mouse
• Fix: Add tabindex="0" to custom interactive elements

6. Focus Indicators

• Visible focus outline on all interactive elements
• Detection: Look for outline: none or outline: 0 in CSS
• Fix: ```css button:focus { outline: 2px solid #0066cc; outline-offset: 2px; }

7. Keyboard Traps

• No elements trap keyboard focus
• Test: Tab into all modals, dropdowns, carousels - can you escape?
• Fix: Implement escape key handlers and proper focus management

8. Skip Links

• "Skip to main content" link as first focusable element
• Detection: Tab once on page load - does skip link appear?
• Fix: <a href="#main" class="skip-link">Skip to main content</a>

Links & Buttons (WCAG 2.4.4)

9. Empty Links

• No links with only icons or images lacking text
• Detection: document.querySelectorAll('a:empty')
• Fix: Add aria-label or screen reader-only text

10. Ambiguous Link Text

• No "click here" or "read more" without context
• Detection: Search for common problematic phrases
• Fix: Make link text descriptive or add aria-label

11. Button vs Link Usage

• Buttons for actions, links for navigation
• Detection: Check <a> tags with onclick handlers
• Fix: Convert action triggers to <button> elements

Section 2: High Priority Violations (Fix Within 7 Days)

Forms & Input (WCAG 3.3.2)

12. Form Labels

• Every input has an associated label
• Detection: document.querySelectorAll('input:not([aria-label]):not([id])')
• Fix: ```html <label for="email">Email Address</label> <input type="email" id="email" name="email">

13. Required Fields

• Required fields marked with more than just color
• Detection: Check for red asterisks without text explanation
• Fix: Add `required` attribute and `aria-required="true"`

14. Error Messages

• Form errors announced to screen readers
• Test: Submit invalid form with screen reader running
• Fix: Use `role="alert"` or `aria-live="polite"` regions

15. Placeholder Abuse

• Placeholders not used as sole label
• Detection: Inputs with placeholder but no label
• Fix: Always include proper labels, use placeholder for hints only

16. Fieldset Groups

• Related inputs grouped with fieldset/legend
• Detection: Radio buttons and checkboxes without grouping
• Fix:

<fieldset>
  <legend>Shipping Method</legend>
  [radio buttons here]
</fieldset>

Color & Contrast (WCAG 1.4.3)

17. Text Contrast

• Normal text: 4.5:1 minimum ratio
• Tool: Use Chrome DevTools color picker
• Common failure: #777 on white = 4.48:1 (barely fails)

18. Large Text Contrast

• Text 18pt+ or 14pt+ bold: 3:1 minimum
• Detection: Check headings and call-to-action buttons
• Fix: Darken text or lighten backgrounds

19. Link Distinction

• Links distinguishable by more than color alone
• Detection: Remove CSS - can you identify links?
• Fix: Add underlines, bold, or icons to links

20. Focus Contrast

• Focus indicators meet 3:1 contrast ratio
• Test: Check focus outline against all backgrounds
• Fix: Use thick outlines with contrasting colors

21. Error State Contrast

• Error messages meet contrast requirements
• Common failure: Light red (#ff6b6b) on white
• Fix: Use darker reds or add borders/icons

Page Structure (WCAG 1.3.1)

22. Heading Hierarchy

• Only one H1 per page
• No skipped heading levels (H1→H3 is wrong)
• Detection: Check document outline in WAVE tool
• Fix: Restructure headings sequentially

23. Landmark Regions

• Main, nav, footer regions properly marked
• Fix: <nav role="navigation"> <main role="main"> <footer role="contentinfo">

24. Lists Structure

• Navigation menus use list markup
• Detection: Divs with multiple links not in lists
• Fix: Convert to <ul> with <li> elements

25. Table Headers

• Data tables have proper headers
• Fix: Use <th> elements with scope attributes

Section 3: Medium Priority (Fix Within 30 Days)

Dynamic Content & ARIA

26. Live Regions

• Dynamic updates announced to screen readers
• Implementation: aria-live="polite" for non-critical updates

27. ARIA Labels

• Custom controls have appropriate ARIA labels
• Fix: Add aria-label to icon buttons, sliders, etc.

28. Modal Accessibility

• Focus trapped within modals
• Focus returns to trigger on close
• Escape key closes modal

29. Loading States

• Loading indicators accessible
• Fix: aria-busy="true" and status announcements

30. Carousel Controls

• Previous/next buttons properly labeled
• Pause mechanism available
• Current slide announced

Media & Documents

31. Video Captions

• All videos have synchronized captions
• Tool: YouTube auto-captions as starting point

32. Audio Transcripts

• Podcasts and audio content have transcripts
• Implementation: Link to transcript near player

33. PDF Accessibility

• PDFs are tagged and accessible
• Tool: Adobe Acrobat accessibility checker

34. Downloads Identified

• File type and size indicated for downloads
• Example: "Download PDF (2.4 MB)"

Mobile & Responsive

35. Touch Target Size

• Minimum 44x44px touch targets
• Detection: Check buttons on mobile viewport

36. Zoom Prevention

• No maximum-scale=1.0 in viewport meta
• Fix: Allow users to zoom to 200%

37. Orientation Support

• Site works in both portrait and landscape

38. Responsive Tables

• Tables readable on mobile devices
• Solution: Horizontal scroll or responsive redesign

Section 4: Ongoing Compliance

Language & Content

39. Page Language

• HTML lang attribute set correctly
• Fix: <html lang="en">

40. Language Changes

• Foreign phrases marked with lang attribute
• Example: <span lang="es">Hola</span>

41. Abbreviations

• First instance of abbreviations explained
• Fix: <abbr title="Americans with Disabilities Act">ADA</abbr>

Navigation & Consistency

42. Consistent Navigation

• Menu structure same across pages
• Detection: Compare navigation HTML across pages

43. Multiple Ways

• Site search or sitemap available
• Implementation: At least two ways to find content

44. Page Titles

• Unique, descriptive page titles
• Format: "Page Topic - Site Name"

45. Focus Order

• Logical tab sequence matching visual flow
• Test: Does tab order make sense with CSS disabled?

Testing & Validation

46. Automated Testing

• TestParty.ai Scanning Tools
• axe DevTools shows zero violations
• WAVE tool shows zero errors
• Lighthouse accessibility score >90

47. Screen Reader Testing

• Tested with NVDA (free) or JAWS
• Complete user journey achievable

48. Keyboard Testing

• Full site navigable without mouse
• All functions keyboard accessible

49. Browser Testing

• Works in Chrome, Firefox, Safari, Edge
• Assistive technology compatibility verified

50. User Testing

• Feedback mechanism in place
• Regular testing with disabled users
• Accessibility statement published

Implementation Priority Matrix

Lawsuit Risk by Violation Type:

1. Missing alt text: 95% of lawsuits cite this
2. Empty links/buttons: 89% citation rate
3. Missing form labels: 86% citation rate
4. Keyboard traps: 78% citation rate
5. Poor color contrast: 69% citation rate

Validation Tools & Commands

Quick Console Checks:

// Find images without alt text
document.querySelectorAll('img:not([alt])').length

// Find links without text
document.querySelectorAll('a').forEach(a => {
  if (!a.textContent.trim() && !a.getAttribute('aria-label')) {
    console.log(a);
  }
});

// Check for focus outlines removed
Array.from(document.styleSheets).forEach(sheet => {
  Array.from(sheet.cssRules || []).forEach(rule => {
    if (rule.style && rule.style.outline === 'none') {
      console.warn('Outline removed:', rule.selectorText);
    }
  });
});

Remediation Verification

After completing fixes:

1. Run automated scan showing zero critical violations
2. Complete keyboard navigation test
3. Test with screen reader (NVDA is free)
4. Generate accessibility report for legal documentation
5. Schedule monthly re-scans to prevent regression

Remember: This checklist addresses the violations most commonly cited in lawsuits. Perfect WCAG compliance requires ongoing attention, but completing these 50 points removes you from the easy target list that serial litigants seek.