10 Common Accessibility Mistakes & How to Fix Them | A11yCore

10 Common Accessibility Mistakes (And How to Fix Them)

WebAIM's 2024 analysis of the top one million homepages revealed a sobering statistic: 94.8% contain detectable WCAG violations. Even more concerning, many of these violations fall into just a handful of recurring categories—issues that appear on websites year after year despite clear guidelines on how to fix them.

The good news? Most accessibility barriers aren't the result of malicious intent or technical complexity. They're simple oversights that stem from designers and developers not understanding how people with disabilities actually use the web. Once you know what to look for, these issues are remarkably straightforward to fix.

In this comprehensive guide, we'll explore the 10 most common accessibility mistakes found on business websites, explain why they matter for real users with disabilities, and provide specific, actionable fixes you can implement today. Whether you're managing a WordPress blog, Shopify store, or custom web application, these solutions will help you create a more inclusive digital experience—and protect your business from legal risk.

Why These Mistakes Matter

Before diving into specific issues, it's important to understand the stakes:

Legal Risk: ADA website lawsuits exceeded 4,000 federal filings in 2024, with most targeting predictable, fixable accessibility violations. Typical settlements range from $5,000 to $50,000 plus attorney fees and remediation costs.

Lost Revenue: 26% of American adults have some form of disability, representing $490 billion in disposable income. Inaccessible websites literally turn away paying customers.

SEO Impact: Google's algorithms favor accessible websites because semantic HTML, proper heading structure, and descriptive text improve content understanding for search engines just as they do for assistive technologies.

User Frustration: Imagine trying to complete a purchase but being unable to submit the form because the "Buy Now" button isn't keyboard accessible. Or visiting a restaurant website where none of the menu images have descriptions. These aren't minor inconveniences—they're complete barriers to access.

Now let's examine the specific mistakes you need to fix.

Mistake #1: Missing or Inadequate Alt Text for Images

Prevalence: 55.3% of homepages have missing or inadequate alt text (WebAIM 2024)

Who It Affects: Blind users and those with severe visual impairments who rely on screen readers

The Problem

When images lack alternative text, screen readers simply announce "image" or skip the image entirely, leaving blind users with no understanding of visual content. This is particularly problematic for:

• Product images on e-commerce sites
• Informational graphics, charts, and diagrams
• Logos and branding elements
• Buttons implemented as images
• Social media icons
• Infographics containing data

Common Mistakes

1. Missing alt text entirely

<!-- Wrong -->
<img src="product-photo.jpg">

2. Generic, unhelpful alt text

<!-- Wrong -->
<img src="chart.png" alt="chart">

3. Redundant alt text

<!-- Wrong -->
<img src="photo.jpg" alt="Image of a photo showing...">

4. Keyword-stuffed alt text (for SEO)

<!-- Wrong -->
<img src="widget.jpg" alt="blue widget affordable widget best widget buy widget">

5. Alt text on decorative images

<!-- Wrong -->
<img src="decorative-line.svg" alt="decorative line">

The Fix

For informative images, write descriptive alt text:

<!-- Correct -->
<img src="product-blue-widget.jpg" 
     alt="Stainless steel water bottle, 32oz capacity, midnight blue finish with carrying handle">

For decorative images, use empty alt:

<!-- Correct for purely decorative images -->
<img src="decorative-flourish.svg" alt="" role="presentation">

For complex images, provide detailed description:

<!-- Correct -->
<img src="sales-chart.png" 
     alt="Bar chart showing quarterly sales growth from Q1-Q4 2025. Q1: $10k, Q2: $15k, Q3: $22k, Q4: $30k. Represents 200% annual growth."
     longdesc="detailed-sales-data.html">

For functional images (buttons, links), describe function:

<!-- Correct -->
<a href="/cart">
  <img src="shopping-cart-icon.svg" alt="View shopping cart">
</a>

Best Practices

• Be concise: Aim for 125 characters or less (screen readers may cut off longer text)
• Be specific: "Golden retriever puppy playing with red ball" not "dog"
• Provide context: Consider the surrounding content—what does the image add?
• Skip "image of" or "picture of": Screen readers already announce it's an image
• Test with a screen reader: Listen to how your alt text sounds in context

How A11yCore Helps

A11yCore's AI-powered image recognition automatically generates contextually appropriate alt text for all images missing descriptions. Our advanced AI analyzes image content, surrounding text, and page context to create meaningful descriptions—not generic placeholders.

Try A11yCore free for 7 daysand see instant alt text generation.

Mistake #2: Insufficient Color Contrast

Prevalence: 79.1% of homepages have low contrast text (WebAIM 2024)

Who It Affects: Users with low vision, color blindness, older adults, anyone viewing screens in bright sunlight

The Problem

When text doesn't contrast sufficiently with its background, it becomes difficult or impossible to read. This affects far more people than you might expect:

• 8% of men and 0.5% of women have some form of color blindness
• 2.2 billion people worldwide have vision impairment
• Elderly users experience reduced contrast sensitivity
• Everyone struggles with low contrast in challenging viewing conditions

Common Mistakes

1. Light gray text on white backgrounds

/* Wrong - only 2.85:1 contrast ratio */
.text {
  color: #999999;
  background: #FFFFFF;
}

2. Text overlaid on images without contrast protection

<!-- Wrong - text may disappear depending on image -->
<div style="background-image: url('photo.jpg')">
  <h1 style="color: white">Headline Text</h1>
</div>

3. Trendy but unreadable color schemes

/* Wrong - 1.8:1 contrast ratio */
.button {
  background: #FF6B6B;
  color: #FFAAAA;
}

4. Low contrast on interactive elements

/* Wrong - button borders not visible */
.button {
  background: #F5F5F5;
  border: 1px solid #E8E8E8;
  color: #888888;
}

The Fix

Meet WCAG contrast requirements:

• Normal text: 4.5:1 minimum (WCAG AA)
• Large text(18pt+ or 14pt bold+): 3:1 minimum (WCAG AA)
• UI components: 3:1 minimum (WCAG AA)
• For AAA compliance: 7:1 for normal text, 4.5:1 for large text

Correct examples:

/* Correct - 7.09:1 contrast ratio */
.text {
  color: #595959;
  background: #FFFFFF;
}

/* Correct - 4.56:1 contrast ratio */
.button {
  background: #2E5C8A;
  color: #FFFFFF;
}

For text on images, add contrast protection:

/* Add semi-transparent overlay */
.hero-text {
  background: rgba(0, 0, 0, 0.6); /* Dark overlay */
  color: #FFFFFF;
  padding: 20px;
}

/* Or use text shadow */
.hero-text {
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

Testing Tools

Free Contrast Checkers:

• WebAIM Contrast Checker
• Colour Contrast Analyser
• Chrome DevTools (Lighthouse audit includes contrast checking)
• A11yCore's built-in contrast checker(free with trial)

Best Practices

• Test early: Check contrast during design phase, not after launch
• Don't rely on color alone: Use text labels, icons, or patterns in addition to color
• Consider context: Buttons on white backgrounds need different contrast than footer text
• Test with grayscale: Convert your design to grayscale to see if information is still clear
• Account for transparency: Semi-transparent overlays reduce effective contrast

How A11yCore Helps

A11yCore automatically detects contrast violations and intelligently adjusts colors to meet WCAG AA standards while preserving your brand identity. Users can also enable high-contrast modes for personal preference.

Mistake #3: Broken or Incomplete Keyboard Navigation

Prevalence: Found on majority of complex websites

Who It Affects: Users with motor disabilities, blind users, keyboard power users

The Problem

Many users navigate websites exclusively with keyboards due to:

• Motor impairments preventing mouse use
• Blindness (screen reader users navigate via keyboard)
• Repetitive strain injuries (RSI)
• Preference for keyboard efficiency

If your website requires a mouse, you're blocking these users completely.

Common Mistakes

1. Elements not reachable via keyboard

<!-- Wrong - div is not focusable -->
<div onclick="openMenu()">Menu</div>

2. Custom dropdowns that don't support keyboard

// Wrong - only responds to click events
$('.dropdown').click(function() {
  $(this).find('.menu').toggle();
});

3. Modal dialogs that trap focus

<!-- Wrong - can't escape modal with keyboard -->
<div class="modal">
  <div class="content">
    <button onclick="closeModal()">Close</button>
  </div>
</div>

4. Illogical tab order

<!-- Wrong - tab order doesn't match visual layout -->
<input type="text" tabindex="3">
<input type="text" tabindex="1">
<input type="text" tabindex="2">

The Fix

Make all interactive elements keyboard accessible:

<!-- Correct - button is naturally focusable -->
<button onclick="openMenu()">Menu</button>

<!-- If you must use div, add keyboard support -->
<div 
  role="button" 
  tabindex="0" 
  onclick="openMenu()"
  onkeypress="if(event.key === 'Enter' || event.key === ' ') openMenu()">
  Menu
</div>

Support keyboard events:

// Correct - responds to both click and keyboard
$('.dropdown').on('click keypress', function(e) {
  if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
    $(this).find('.menu').toggle();
  }
});

Implement proper focus management for modals:

// Correct - trap focus within modal
const modal = document.querySelector('.modal');
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

// Focus first element when modal opens
firstElement.focus();

// Trap focus within modal
modal.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
  
  // Close on Escape
  if (e.key === 'Escape') {
    closeModal();
  }
});

Maintain logical tab order:

<!-- Correct - natural DOM order is logical -->
<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email">
  
  <button type="submit">Submit</button>
</form>

<!-- Avoid using tabindex > 0 -->

Keyboard Navigation Testing Checklist

Test your site with keyboard only (no mouse):

• [ ] PressTabto move forward through interactive elements
• [ ] PressShift+Tabto move backward
• [ ] PressEnterto activate buttons and links
• [ ] PressSpaceto toggle checkboxes and activate buttons
• [ ] PressArrow keysto navigate menus, radio buttons, and tabs
• [ ] PressEscapeto close dialogs and menus
• [ ] Verify focus indicator is always visible
• [ ] Check that tab order is logical (left to right, top to bottom)
• [ ] Ensure no focus traps (can always navigate away from any element)
• [ ] Test all interactive components (forms, dropdowns, modals, carousels)

How A11yCore Helps

A11yCore automatically ensures keyboard accessibility across your site, adds visible focus indicators, and provides keyboard navigation highlighting so users always know where they are on the page.

Mistake #4: Missing or Invisible Focus Indicators

Prevalence: Extremely common, especially on custom-styled sites

Who It Affects: Keyboard users, low vision users, anyone navigating without a mouse

The Problem

Focus indicators show users where they are on a page when navigating via keyboard. Without visible focus, keyboard users are navigating blind—they have no idea which element will activate when they press Enter.

Many developers intentionally hide focus indicators because they think they look "ugly," not realizing this makes their site completely unusable for keyboard navigation.

Common Mistakes

1. Removing default focus outline:

/* Wrong - never do this without replacement */
*:focus {
  outline: none;
}

button:focus {
  outline: none;
}

2. Focus indicator with insufficient contrast:

/* Wrong - barely visible */
a:focus {
  outline: 1px solid #E0E0E0; /* Light gray on white */
}

3. Focus indicator that disappears on some elements:

/* Wrong - inconsistent */
.button:focus {
  outline: 2px solid blue;
}
/* But .link:focus has no styling */

The Fix

Always provide visible focus indicators:

/* Correct - high contrast, visible outline */
*:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* Custom focus indicator that matches your brand */
button:focus {
  outline: 3px solid #FF6B00;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.2);
}

/* Different style for links */
a:focus {
  outline: 2px dashed #0066CC;
  outline-offset: 4px;
  background-color: rgba(0, 102, 204, 0.1);
}

Modern CSS approach with :focus-visible:

/* Correct - shows focus only for keyboard, not mouse clicks */
*:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

Ensure contrast requirements:

Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.1 Success Criterion 2.4.11).

/* Correct - 3:1 contrast against both white background and blue button */
.blue-button:focus {
  outline: 3px solid #FFFF00; /* Yellow outline */
  outline-offset: 2px;
}

Best Practices

• Never useoutline: nonewithout replacement
• Make focus indicators consistentacross your site
• Use high contrast(3:1 minimum against all adjacent colors)
• Consider animationto draw attention (subtle pulsing or glow)
• Test with keyboardto ensure indicators are visible at all times
• Style focus statesalongside hover states during design
• Use :focus-visiblefor better UX (shows focus for keyboard, not mouse)

How A11yCore Helps

A11yCore automatically adds visible, high-contrast focus indicators to all interactive elements and provides keyboard navigation highlighting that shows users exactly where they are on the page.

Mistake #5: Improperly Labeled Form Fields

Prevalence: 39.6% of homepages have unlabeled form elements (WebAIM 2024)

Who It Affects: Screen reader users, voice control users, users with cognitive disabilities

The Problem

Forms are critical for conversions—sign-ups, purchases, contact forms, searches. When form fields lack proper labels, screen readers can't announce their purpose, leaving blind users guessing what information to enter.

Voice control users also rely on visible labels to interact with forms (e.g., "Click email field").

Common Mistakes

1. Using placeholder text instead of labels:

<!-- Wrong - placeholder disappears when typing -->
<input type="email" placeholder="Email address">

2. Labels not programmatically associated with inputs:

<!-- Wrong - label and input not connected -->
<label>Email:</label>
<input type="email">

3. Missing labels entirely:

<!-- Wrong - no label at all -->
<input type="text" name="search">
<button>Search</button>

4. Vague or missing button labels:

<!-- Wrong - what does this submit? -->
<button type="submit"></button>

<!-- Wrong - icon-only button without accessible label -->
<button><img src="search-icon.svg"></button>

The Fix

Properly label all form fields:

<!-- Correct - label explicitly associated with input -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

For visually hidden labels (when design requires):

<!-- Correct - label present for screen readers but hidden visually -->
<label for="search" class="visually-hidden">Search</label>
<input type="text" id="search" placeholder="Search...">

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

Group related fields with fieldset:

<!-- Correct - radio buttons grouped and labeled -->
<fieldset>
  <legend>Shipping Method</legend>
  
  <input type="radio" id="standard" name="shipping" value="standard">
  <label for="standard">Standard (5-7 days)</label>
  
  <input type="radio" id="express" name="shipping" value="express">
  <label for="express">Express (2-3 days)</label>
</fieldset>

Indicate required fields accessibly:

<!-- Correct - required indicated with text, not just asterisk -->
<label for="name">
  Name <span aria-label="required">*</span>
</label>
<input type="text" id="name" required aria-required="true">

Provide accessible error messages:

<!-- Correct - error associated with field -->
<label for="email">Email Address</label>
<input 
  type="email" 
  id="email" 
  aria-describedby="email-error"
  aria-invalid="true">
<span id="email-error" role="alert">
  Please enter a valid email address
</span>

Best Practices

• Always use<label>elementsconnected to inputs withforandid
• Don't rely on placeholder text alone(it disappears and has low contrast)
• Indicate required fields with text, not just asterisks or color
• Group related fieldswith<fieldset>and<legend>
• Provide clear error messagesassociated with fields viaaria-describedby
• Usearia-required="true"on required fields
• Test with a screen readerto verify all fields are properly announced

How A11yCore Helps

A11yCore automatically ensures all form fields have proper labels, associates error messages with fields, and provides clear indication of required fields that works for all users.

Start your free trialand see instant form accessibility improvements.

Mistake #6: Poor Heading Structure

Prevalence: Found on majority of websites

Who It Affects: Screen reader users, users with cognitive disabilities, SEO

The Problem

Screen reader users navigate pages by jumping between headings (H1, H2, H3, etc.) to understand structure and find content. When headings are used incorrectly—for styling rather than structure—it's like removing the table of contents from a book.

Search engines also use heading hierarchy to understand page content, so poor structure hurts SEO.

Common Mistakes

1. Multiple H1 headings on one page:

<!-- Wrong - only one H1 per page -->
<h1>Welcome</h1>
<h1>About Us</h1>
<h1>Contact</h1>

2. Skipping heading levels:

<!-- Wrong - jumps from H1 to H4 -->
<h1>Page Title</h1>
<h4>Subsection</h4>

3. Using headings for styling:

<!-- Wrong - using H2 to make text bigger -->
<h2>This isn't actually a heading, just big text</h2>
<p>More content...</p>

4. Incorrect nesting:

<!-- Wrong - H3 should be inside H2's section -->
<h2>Section</h2>
<p>Content...</p>
<h3>Unrelated heading</h3>
<h2>Another section</h2>

The Fix

Follow logical heading hierarchy:

<!-- Correct structure -->
<h1>Main Page Title</h1>

<h2>First Major Section</h2>
<p>Content about first section...</p>

  <h3>Subsection of First Section</h3>
  <p>More detailed content...</p>
  
  <h3>Another Subsection</h3>
  <p>More content...</p>

<h2>Second Major Section</h2>
<p>Content about second section...</p>

  <h3>Subsection of Second Section</h3>
  <p>Detailed content...</p>

If you need styled text that isn't a heading:

<!-- Correct - use CSS for styling, not heading tags -->
<p class="large-text">This looks big but isn't a heading</p>

<style>
.large-text {
  font-size: 1.5em;
  font-weight: bold;
  margin: 1em 0;
}
</style>

Heading Structure Rules

1. One H1 per page: The H1 should be your page title
2. Don't skip levels: Go from H1 → H2 → H3, not H1 → H3
3. Headings reflect structure: Use headings to organize content logically
4. Don't use headings for styling: If it's not actually a heading, don't use heading tags

Testing Your Heading Structure

Browser extensions:

• HeadingsMap (Firefox/Chrome)
• Web Developer Toolbar

Screen reader testing:

• NVDA: Press H to jump between headings
• JAWS: Insert + F6 to see headings list
• VoiceOver: VO + U to open rotor, select headings

Expected screen reader experience:

"Heading level 1: Welcome to Our Website"
"Heading level 2: Our Services"
"Heading level 3: Web Design"
"Heading level 3: SEO Optimization"
"Heading level 2: Contact Us"

How A11yCore Helps

A11yCore analyzes your heading structure and ensures logical hierarchy, helping both screen reader users and search engines understand your content organization.

Mistake #7: Inaccessible Links and Buttons

Prevalence: Extremely common

Who It Affects: Screen reader users, keyboard users, voice control users

The Problem

Links and buttons with vague or missing text leave users confused about where they'll go or what action they'll trigger. Screen reader users often navigate by jumping from link to link, so "Click here" repeated 10 times on a page is useless.

Common Mistakes

1. Vague link text:

<!-- Wrong - provides no context -->
<a href="/report.pdf">Click here</a> to download the report.
<a href="/services">Read more</a> about our services.
<a href="/contact">Learn more</a> about contacting us.

2. URLs as link text:

<!-- Wrong - screen readers read entire URL -->
<a href="https://www.example.com/our-services/web-design-and-development">
  https://www.example.com/our-services/web-design-and-development
</a>

3. Images as links without alt text:

<!-- Wrong - screen reader announces "link, image" with no description -->
<a href="/home">
  <img src="logo.png">
</a>

4. Icon-only buttons:

<!-- Wrong - no accessible label -->
<button class="icon-button">
  <svg>...</svg>
</button>

The Fix

Use descriptive link text:

<!-- Correct - link text describes destination -->
<a href="/report.pdf">Download the 2025 Annual Report (PDF, 2MB)</a>

<a href="/services">Read more about our web development services</a>

<a href="/contact">Learn how to contact our support team</a>

For image links, provide alt text:

<!-- Correct - alt text describes destination -->
<a href="/home">
  <img src="logo.png" alt="Return to homepage">
</a>

For icon buttons, add accessible labels:

<!-- Correct - aria-label provides text alternative -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">
    <path d="..."/>
  </svg>
</button>

<!-- Alternative: visually hidden text -->
<button>
  <svg aria-hidden="true">
    <path d="..."/>
  </svg>
  <span class="visually-hidden">Close dialog</span>
</button>

For "Read more" links, add context:

<!-- Correct - context provided -->
<article>
  <h2>New Accessibility Features</h2>
  <p>We've launched new tools to help...</p>
  <a href="/blog/accessibility-features">
    Read more<span class="visually-hidden"> about new accessibility features</span>
  </a>
</article>

Link Text Best Practices

• Be specific: "Download tax form" not "Click here"
• Make sense out of context: Links should be clear even when read alone
• Indicate file types and sizes: "(PDF, 2MB)" helps users decide whether to download
• Avoid "click here" and "read more"unless you add hidden context
• Don't repeat identical link textfor different destinations
• Keep link text concisebut descriptive

How A11yCore Helps

A11yCore identifies vague link text and helps ensure all links and buttons have clear, descriptive labels that make sense to screen reader users.

Mistake #8: Videos Without Captions or Transcripts

Prevalence: Majority of web videos lack proper captions

Who It Affects: Deaf and hard-of-hearing users, users in sound-sensitive environments, non-native speakers

The Problem

Videos without captions exclude 48 million Americans who are deaf or hard of hearing. But captions benefit many others:

• People watching in noisy environments (coffee shops, airports)
• People in quiet environments where sound is inappropriate (libraries, offices)
• Non-native speakers who understand written text better than spoken
• Everyone—studies show 80% of users who use captions don't have hearing disabilities

Common Mistakes

1. No captions at all:

<!-- Wrong - video with no caption option -->
<video src="product-demo.mp4" controls></video>

2. Auto-generated captions never reviewed:YouTube's auto-captions are notoriously inaccurate (60-70% accuracy). They misunderstand names, technical terms, accents, and multiple speakers.

3. Captions that aren't synchronized:Captions appearing seconds before or after the spoken words are confusing and unhelpful.

4. No transcript provided:Captions help during viewing, but transcripts allow searching, reading at one's own pace, and translation.

5. Missing audio descriptions:Videos that convey information visually (charts appearing, demonstrations, facial expressions) need audio descriptions for blind users.

The Fix

Provide properly synchronized captions:

<!-- Correct - video with caption track -->
<video controls>
  <source src="product-demo.mp4" type="video/mp4">
  <track 
    kind="captions" 
    src="product-demo-en.vtt" 
    srclang="en" 
    label="English"
    default>
  <track 
    kind="captions" 
    src="product-demo-es.vtt" 
    srclang="es" 
    label="Español">
</video>

Caption file format (WebVTT):

WEBVTT

00:00:00.000 --> 00:00:03.500
Welcome to our product demonstration.

00:00:03.500 --> 00:00:07.000
Today, we'll show you how to set up
your new widget in under 5 minutes.

00:00:07.500 --> 00:00:10.000
[upbeat music playing]

00:00:10.500 --> 00:00:14.000
First, unbox your widget carefully.

Provide transcript alongside video:

<video controls>
  <source src="webinar.mp4" type="video/mp4">
  <track kind="captions" src="webinar-captions.vtt" srclang="en" default>
</video>

<details>
  <summary>View full transcript</summary>
  <div class="transcript">
    <h3>Webinar Transcript</h3>
    <p><strong>Speaker 1 (00:00):</strong> Welcome everyone to today's webinar...</p>
    <p><strong>Speaker 2 (01:15):</strong> Thanks for having me...</p>
  </div>
</details>

Add audio descriptions for visual content:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="tutorial-captions.vtt" srclang="en" default>
  <track kind="descriptions" src="tutorial-audio-desc.vtt" srclang="en">
</video>

Captioning Services

Professional captioning:

• Rev.com - Human captioning ($1.50/minute)
• 3Play Media - Captioning and transcription
• Vitac - Broadcast-quality captioning

AI-powered (review required):

• YouTube auto-captions (free, requires editing)
• Otter.ai - Real-time transcription
• Descript - Video editing with automatic transcripts

Best Practices

• Always review auto-generated captionsfor accuracy
• Include speaker identificationfor multiple speakers
• Caption sound effectswhen relevant: [door closes], [applause], [music playing]
• Synchronize perfectly: Captions should appear exactly when words are spoken
• Break at logical points: Don't split mid-sentence across caption frames
• Use proper punctuation: Helps understanding and pacing
• Provide transcripts: Allow reading at own pace and text searching
• Test on actual devices: Ensure captions appear correctly on mobile, tablets

How A11yCore Helps

While A11yCore doesn't automatically generate captions (this requires specialized services), our platform identifies videos lacking captions and provides guidance on implementation. Enterprise customers receive support integrating with professional captioning services.

Mistake #9: Inaccessible PDF Documents

Prevalence: Over 90% of PDFs are inaccessible

Who It Affects: Screen reader users, keyboard users, mobile device users

The Problem

Many businesses publish important information in PDF format—forms, reports, menus, manuals. But most PDFs are simply scanned images or exports from design software without accessibility features, making them completely unusable for screen reader users.

An inaccessible PDF is like distributing a book with all the pages in random order and no page numbers.

Common Mistakes

1. Scanned image PDFs (no selectable text):When you scan a paper document to PDF without OCR (Optical Character Recognition), it's just a picture. Screen readers can't read pictures.

2. PDFs without document structure:No headings, no reading order, no tagged content—screen readers can't navigate or understand the content.

3. Form fields without labels:PDF forms with empty boxes but no programmatic labels telling screen readers what information goes where.

4. Images without alt text:Just like web pages, images in PDFs need alternative text descriptions.

5. Poor reading order:Content read in wrong order (sidebars before main content, columns jumbled together).

The Fix

Create accessible PDFs from the start:

In Microsoft Word:

1. Use built-in heading styles (Heading 1, Heading 2, etc.)
2. Use bulleted and numbered list features
3. Add alt text to images (right-click image → Edit Alt Text)
4. Use built-in table tools
5. Export as PDF: File → Save As → PDF → Options → check "Document structure tags for accessibility"

In Adobe InDesign:

1. Set up proper reading order
2. Tag headings and structure
3. Add alt text to images
4. Export with "Create Tagged PDF" enabled
5. Use Articles panel to define reading order

Remediate existing PDFs with Adobe Acrobat Pro:

1. Run accessibility checker:

   • Tools → Accessibility → Full Check
   • Review and fix reported issues

2. Add tags:

   • Tools → Accessibility → Autotag Document
   • Manually adjust tag tree if needed

3. Set reading order:

   • Tools → Accessibility → Reading Order
   • Ensure logical flow of content

4. Add alt text to images:

   • Right-click image in Tags panel
   • Properties → Edit Alternate Text

5. Fix form fields:

   • Tools → Prepare Form
   • Ensure all fields have labels and descriptions

For scanned documents, use OCR:

Adobe Acrobat Pro:
Tools → Enhance Scans → Recognize Text → In This File
Settings: Searchable Image or Editable Text

PDF Accessibility Checklist

• [ ] Document has proper title
• [ ] Language is set correctly
• [ ] Reading order is logical
• [ ] Headings are tagged with proper hierarchy
• [ ] Lists use list tags
• [ ] Tables have header rows identified
• [ ] Images have alt text (or marked as decorative)
• [ ] Form fields have labels and tooltips
• [ ] Color contrast meets requirements
• [ ] Document passes Adobe Acrobat accessibility checker
• [ ] Tested with actual screen reader

Alternative to PDFs: HTML

Consider whether you actually need PDF format:

Use PDF when:

• Document needs to be printed exactly as designed
• Legal documents requiring signatures
• Forms that must be completed offline
• Content that shouldn't change

Use HTML when:

• Content is primarily text and images
• Users need to access on mobile devices
• Content needs to be searchable
• Accessibility is priority (HTML is inherently more accessible)

If you must use PDF, always provide HTML alternative:

<p>
  <a href="/annual-report.pdf">Download Annual Report (PDF, 5MB)</a>
  <br>
  <a href="/annual-report-html">View accessible HTML version</a>
</p>

How A11yCore Helps

A11yCore identifies inaccessible PDFs on your site and provides detailed guidance on remediation. Enterprise customers receive support creating accessible PDFs and HTML alternatives.

Mistake #10: Automatic Media and Animations

Prevalence: Common on homepage hero sections, promotional banners

Who It Affects: Users with vestibular disorders, ADHD, autism, photosensitive epilepsy, screen reader users

The Problem

Content that moves, blinks, scrolls, or auto-updates creates multiple accessibility barriers:

Vestibular disorders: Animations can trigger dizziness, nausea, and migrainesSeizure disorders: Flashing content can trigger photosensitive epilepsyCognitive disabilities: Moving content is distracting and difficult to readScreen readers: Auto-updating content interrupts reading and causes confusionMotor disabilities: Trying to click moving targets is difficult

Common Mistakes

1. Auto-playing videos with sound:

<!-- Wrong - videos shouldn't autoplay with sound -->
<video autoplay>
  <source src="promo.mp4" type="video/mp4">
</video>

2. Carousels that auto-advance:

// Wrong - carousel changes without user control
setInterval(function() {
  nextSlide();
}, 3000); // Advances every 3 seconds

3. Flashing or strobing effects:

/* Wrong - rapid flashing can trigger seizures */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.banner {
  animation: flash 0.5s infinite;
}

4. Parallax scrolling effects:

// Wrong - can cause motion sickness
$(window).scroll(function() {
  var scrolled = $(window).scrollTop();
  $('.parallax-layer').css('transform', 'translateY(' + (scrolled * 0.5) + 'px)');
});

5. No way to pause or stop animations:Content that moves for more than 5 seconds must have a pause mechanism (WCAG 2.2.2).

The Fix

Provide user control over media:

<!-- Correct - video muted by default with controls -->
<video controls muted>
  <source src="promo.mp4" type="video/mp4">
</video>

<!-- If autoplay needed, mute and provide controls -->
<video autoplay muted controls loop>
  <source src="background.mp4" type="video/mp4">
</video>

Add pause/play controls to carousels:

<div class="carousel">
  <div class="slides">
    <!-- Slide content -->
  </div>
  
  <button id="carousel-pause" aria-label="Pause carousel">
    <span aria-hidden="true">⏸</span> Pause
  </button>
  
  <button id="carousel-prev" aria-label="Previous slide">
    <span aria-hidden="true">◀</span>
  </button>
  
  <button id="carousel-next" aria-label="Next slide">
    <span aria-hidden="true">▶</span>
  </button>
</div>

<script>
let autoplay = true;
let interval;

function startCarousel() {
  if (autoplay) {
    interval = setInterval(nextSlide, 5000);
  }
}

document.getElementById('carousel-pause').addEventListener('click', function() {
  autoplay = !autoplay;
  if (autoplay) {
    this.innerHTML = '<span aria-hidden="true">⏸</span> Pause';
    this.setAttribute('aria-label', 'Pause carousel');
    startCarousel();
  } else {
    this.innerHTML = '<span aria-hidden="true">▶</span> Play';
    this.setAttribute('aria-label', 'Play carousel');
    clearInterval(interval);
  }
});

// Pause on hover or focus
document.querySelector('.carousel').addEventListener('mouseenter', () => {
  clearInterval(interval);
});

document.querySelector('.carousel').addEventListener('mouseleave', () => {
  if (autoplay) startCarousel();
});
</script>

Respect prefers-reduced-motion:

/* Correct - disable animations for users who request it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Or selectively disable problematic animations */
@media (prefers-reduced-motion: reduce) {
  .parallax {
    transform: none !important;
  }
  
  .carousel {
    /* Don't auto-advance */
  }
  
  .fade-in {
    opacity: 1 !important;
    animation: none !important;
  }
}

Avoid flashing content:

WCAG Success Criterion 2.3.1 states content must not flash more than 3 times per second. General flashes (more than 3 times per second, covering a large area) and red flashes are prohibited.

/* Wrong - flashes 6 times per second */
@keyframes dangerous-flash {
  0%, 100% { background: red; }
  50% { background: white; }
}
.element {
  animation: dangerous-flash 0.33s infinite;
}

/* Correct - slow, non-strobic animation */
@keyframes safe-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.element {
  animation: safe-pulse 2s ease-in-out infinite;
}

Best Practices for Motion

• Never autoplay videos with sound(WCAG 1.4.2)
• Provide pause controlsfor content moving more than 5 seconds (WCAG 2.2.2)
• Respect prefers-reduced-motionmedia query
• Avoid flashingmore than 3 times per second (WCAG 2.3.1)
• Don't rely on motion aloneto convey information
• Pause on hover/focusto allow users to read content
• Provide static alternativesfor animated content
• Test with animations disabledto ensure functionality remains

Testing Motion Accessibility

Enable reduced motion on your device:

macOS:System Preferences → Accessibility → Display → Reduce motion

Windows:Settings → Ease of Access → Display → Show animations in Windows (turn off)

iOS:Settings → Accessibility → Motion → Reduce Motion

Android:Settings → Accessibility → Remove animations

Then test your site with reduced motion enabled. All functionality should work, and animations should be minimal or eliminated.

How A11yCore Helps

A11yCore detects auto-playing media and provides controls for users to pause or disable animations. Our platform also respects user preferences for reduced motion and provides alternatives for animated content.

Bonus: Quick Wins for Immediate Improvement

Beyond these top 10 mistakes, here are quick accessibility improvements you can implement today:

1. Add Skip Navigation Links

Allow keyboard users to skip repetitive navigation:

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <header>
    <!-- Navigation -->
  </header>
  
  <main id="main-content">
    <!-- Main content -->
  </main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
</style>

2. Ensure Adequate Link Spacing

Make links and buttons easier to tap on mobile:

/* Minimum 44x44px touch targets */
a, button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

3. Use Semantic HTML

Choose the right HTML elements:

<!-- Wrong -->
<div class="button" onclick="submit()">Submit</div>

<!-- Correct -->
<button type="submit">Submit</button>

<!-- Wrong -->
<div class="navigation">...</div>

<!-- Correct -->
<nav>...</nav>

4. Provide Text Alternatives for Icon Fonts

Don't rely on icon fonts alone:

<!-- Wrong -->
<span class="icon-phone"></span>

<!-- Correct -->
<span class="icon-phone" aria-hidden="true"></span>
<span class="visually-hidden">Phone:</span>

5. Make Tables Accessible

Add proper table headers:

<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1 2025</th>
      <td>$50,000</td>
      <td>12%</td>
    </tr>
  </tbody>
</table>

How A11yCore Fixes All 10 Mistakes Automatically

While understanding these mistakes helps you create accessible content from the start, A11yCore provides automated solutions for existing websites:

✅ Mistake #1: Missing Alt Text

A11yCore Fix: AI-powered image recognition generates contextually appropriate alt text for all images

✅ Mistake #2: Color Contrast

A11yCore Fix: Automatic contrast adjustment to meet WCAG AA standards while preserving brand

✅ Mistake #3: Keyboard Navigation

A11yCore Fix: Ensures all interactive elements are keyboard accessible with logical tab order

✅ Mistake #4: Focus Indicators

A11yCore Fix: Adds visible, high-contrast focus indicators to all interactive elements

✅ Mistake #5: Form Labels

A11yCore Fix: Properly associates labels with inputs and provides accessible error messages

✅ Mistake #6: Heading Structure

A11yCore Fix: Analyzes and corrects heading hierarchy for logical document structure

✅ Mistake #7: Link Text

A11yCore Fix: Identifies vague links and helps provide descriptive alternatives

✅ Mistake #8: Video Captions

A11yCore Fix: Identifies videos lacking captions and provides implementation guidance

✅ Mistake #9: PDF Accessibility

A11yCore Fix: Detects inaccessible PDFs and provides remediation guidance

✅ Mistake #10: Auto-Play Media

A11yCore Fix: Provides user controls for pausing animations and respects reduced-motion preferences

Install in 5 minutes, fix all 10 mistakes automatically.

Start your free 7-day trialand see immediate improvements.

Testing Your Fixes

After implementing corrections, validate your improvements:

Automated Testing Tools

Free tools:

• WAVE Browser Extension
• axe DevTools
• Google Lighthouse (built into Chrome DevTools)
• A11yCore Free Scan(no signup for quick scan)

Run automated scans on:

• Homepage
• Key landing pages
• Forms and checkout process
• High-traffic content pages

Manual Testing

Keyboard navigation test:

1. Unplug your mouse
2. Navigate entire site using only keyboard
3. Tab through all interactive elements
4. Activate buttons and links with Enter/Space
5. Navigate menus with arrow keys
6. Ensure focus is always visible

Screen reader test:

1. DownloadNVDA(free Windows screen reader)
2. Close your eyes
3. Navigate your website using only NVDA and keyboard
4. Try to complete key tasks (find product, fill form, read article)
5. Note any confusion or difficulty

Color contrast test:

1. UseWebAIM Contrast Checker
2. Test all text/background combinations
3. Ensure 4.5:1 minimum for normal text
4. Ensure 3:1 for large text and UI elements

Mobile accessibility test:

1. Test on actual mobile devices (not just desktop browser simulation)
2. Enable iOS VoiceOver or Android TalkBack
3. Navigate using gestures
4. Verify touch targets are adequately sized
5. Ensure content is readable without zooming

User Testing

The gold standard: testing with actual users with disabilities.

Recruit testers:

• Work with local disability advocacy organizations
• Use platforms likeFablefor professional testing
• Offer compensation for testing time

What to test:

• Can users complete key tasks independently?
• What barriers do they encounter?
• How long do tasks take compared to without disabilities?
• What specific improvements would help most?

The Cost of Inaction vs. The Value of Accessibility

Let's talk numbers:

Costs of Inaccessible Websites

Legal:

• Average ADA lawsuit settlement: $10,000-$50,000
• Attorney fees: $15,000-$100,000+
• Emergency remediation: $50,000-$200,000
• Ongoing legal costs
• Reputational damage

Lost revenue:

• 71% of users with disabilities leave inaccessible sites immediately
• $490 billion in annual disposable income from disability community
• 71% of disability-related website visits result in bounce if inaccessible
• Lower search engine rankings (accessibility affects SEO)

Total potential cost: $75,000-$350,000+ per lawsuit, plus ongoing lost revenue

Investment in Accessibility

A11yCore solution:

• Starter plan: $29/month ($348/year)
• Professional plan: $79/month ($948/year with 20% annual discount)
• Implementation time: 5 minutes
• Ongoing maintenance: Automated

Returns:

• Legal protection and documentation
• Access to 61 million potential customers
• Improved SEO and search rankings
• Better user experience for all users
• Competitive advantage
• Brand reputation enhancement
• Peace of mind

ROI: Pay $948/year to protect against $75,000+ lawsuits while expanding your market. The math is simple.

Your Action Plan: Fix These Mistakes Today

Ready to make your website accessible? Follow this priority order:

Immediate (Today)

1. Sign up for A11yCore-Start free 7-day trial
2. Install the script- Takes 5 minutes
3. Run initial scan- See your current compliance score
4. Review critical issues- Address any blocking problems

This Week

5. Review all form fields- Ensure proper labels
6. Check color contrast- Fix any violations
7. Test keyboard navigation- Navigate site without mouse
8. Fix heading structure- Ensure logical hierarchy
9. Audit link text- Replace vague "click here" links
10. Add alt text to images- Let A11yCore help with AI generation

This Month

11. Review video content- Add captions and transcripts
12. Audit PDF documents- Remediate or provide HTML alternatives
13. Test with screen reader- Download NVDA and test key pages
14. Disable auto-play- Add user controls for media
15. Train content team- Ensure new content remains accessible

Ongoing

16. Monitor compliance dashboard- Review weekly reports
17. Address new issues- Fix problems as detected
18. User testing- Get feedback from people with disabilities
19. Stay updated- Keep learning about accessibility
20. Celebrate improvements- Share wins with team

Conclusion: Accessibility Is Everyone's Responsibility

These 10 common mistakes represent the vast majority of accessibility barriers on the web. They're not complex technical challenges—they're oversights that stem from lack of awareness and testing with actual assistive technologies.

The good news: they're all fixable. With proper knowledge, the right tools, and ongoing commitment, any website can become accessible.

Remember:

• 26% of adults have disabilities—that's 61 million potential customers
• Accessibility benefits everyone, not just people with disabilities
• Legal requirements are increasing, not decreasing
• Accessible websites rank better in search engines
• It's simply the right thing to do

Web accessibility isn't a project with an end date—it's an ongoing commitment to ensuring everyone can access your digital content. Tools like A11yCore make this commitment manageable and affordable, but the most important ingredient is your dedication to digital inclusion.

Every website visitor deserves equal access to information and services, regardless of their abilities. By fixing these 10 common mistakes, you're not just checking a compliance box—you're opening your digital doors to everyone.

Start fixing these mistakes today.

Start Your Free Trial|Schedule Demo|View Pricing

Additional Resources

Learn More

• Complete A11yCore Setup Guide
• Web Accessibility Made Easy
• WCAG 2.1 Compliance Guide
• ADA Website Requirements
• Documentation & Best Practices

Tools & Testing

• WebAIM Contrast Checker
• WAVE Browser Extension
• NVDA Screen Reader(free)
• Colour Contrast Analyser
• HeadingsMap Extension

Standards & Guidelines

• W3C WCAG 2.1 Guidelines
• W3C WCAG 2.2 Guidelines
• Section 508 Standards
• ADA.gov Resources

Community & Support

• WebAIM Community
• The A11Y Project
• A11yCore Community
• Email Support

Making the web accessible to everyone, one fix at a time.

Article last updated: January 14, 2026