Web Accessibility Standards

Images Without Alt Text

Problem: Screen readers cannot interpret images without text alternatives.

Solution: Always provide descriptive alt text for images that convey information.

<img src="chart-2025-profits.png">


<img src="chart-2025-profits.png" alt="Bar chart showing quarterly profits for 2025, with Q3 showing the highest growth at 27%">


<img src="decorative-divider.png" alt="">

Note: Decorative images should have empty alt text (alt="") so screen readers will skip them, rather than no alt attribute at all.

Poor Color Contrast

Problem: Text with insufficient contrast against its background is difficult to read for many users, especially those with low vision or color blindness.

Solution: Ensure sufficient color contrast according to WCAG guidelines:

• 4.5:1 contrast ratio for normal text (Level AA)
• 3:1 for large text (at least 18pt or 14pt bold) (Level AA)
• 7:1 for normal text (Level AAA)
• 4.5:1 for large text (Level AAA)

/* Poor contrast example */
.low-contrast {
  color: #999; /* Light gray */
  background-color: #fff; /* White */
}

/* Better contrast example */
.good-contrast {
  color: #595959; /* Darker gray */
  background-color: #fff; /* White */
}

Relying Solely on Color to Convey Information

Problem: Users with color blindness may miss information if color alone is used to convey it.

Solution: Always use multiple cues beyond color, such as patterns, text, or icons.

<div>
  Required fields are shown in red
</div>
<label style="color: red">Name</label>


<div>
  Required fields are marked with an asterisk (*)
</div>
<label>Name <span class="required">*</span></label>

.required {
  color: red;
  font-weight: bold;
}

Non-resizable Text

Problem: Fixed-size text cannot be enlarged by users who need larger text.

Solution: Use relative units for font sizes and ensure the layout accommodates text resizing.

/* Problematic fixed font size */
.fixed-size {
  font-size: 12px; /* Does not resize well */
}

/* Better relative font size */
.relative-size {
  font-size: 1rem; /* Relative to root font size */
}

/* Another good approach with a minimum size */
.minimum-size {
  font-size: max(16px, 1rem);
}

Videos Without Captions

Problem: Deaf or hard of hearing users cannot access audio content in videos.

Solution: Provide accurate captions for all video content with audio.

<video controls>
  <source src="product-demo.mp4" type="video/mp4">
  <track kind="captions" src="product-demo-captions.vtt" label="English" default>
  Your browser does not support the video tag.
</video>

Audio-only Content

Problem: Podcasts, audio messages, or sound effects without text alternatives.

Solution: Provide transcripts for audio content and text alternatives for meaningful sound effects.

<audio controls>
  <source src="podcast-episode.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<a href="podcast-episode-transcript.html">Read the transcript</a>

Keyboard Inaccessibility

Problem: Elements that can't be accessed or activated with a keyboard alone.

Solution: Ensure all interactive elements are keyboard accessible.

<div onclick="submitForm()">Submit</div>


<button onclick="submitForm()">Submit</button>


<div role="button" tabindex="0" 
    onclick="submitForm()" 
    onkeydown="if(event.key==='Enter'||event.key===' ')submitForm()">
  Submit
</div>

Missing Focus Indicators

Problem: Without visible focus indicators, keyboard users can't tell where they are on the page.

Solution: Ensure all interactive elements have visible focus states and never use outline: none without providing an alternative focus indicator.

/* Bad practice: removing focus outline without replacement */
button:focus {
  outline: none; /* Don't do this */
}

/* Better approach: enhanced focus styles */
button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

Small Click/Tap Targets

Problem: Small interactive elements are difficult to activate for users with motor control limitations.

Solution: Provide adequately sized click/tap targets (at least 44x44 pixels) with sufficient spacing.

/* Too small for comfortable use */
.small-button {
  padding: 2px 5px;
}

/* Better - provides a larger clickable area */
.accessible-button {
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
}

Complex Language

Problem: Unnecessarily complex or technical language can be a barrier.

Solution: Use clear, simple language and explain technical terms when they must be used.

<p>Prior to form submission, authentication credentials must be validated.</p>


<p>Before you submit the form, we need to check your username and password.</p>

Inconsistent Navigation

Problem: Unpredictable or inconsistent navigation confuses users.

Solution: Maintain consistent navigation patterns across the site.

Time Limits

Problem: Automatic time-outs or content that requires quick responses.

Solution: Allow users to extend time limits or disable them altogether when possible.

// Bad example - automatic timeout without warning or extension
setTimeout(function() {
  logoutUser();
}, 900000); // 15 minutes

// Better example - warn user and allow extension
let timeoutWarning = setTimeout(function() {
  showTimeoutDialog();
}, 840000); // 14 minutes

function showTimeoutDialog() {
  // Show dialog with options to extend session
  document.getElementById('timeout-dialog').style.display = 'block';
  
  // Set actual timeout
  timeoutFinal = setTimeout(function() {
    logoutUser();
  }, 60000); // Additional minute
}

function extendSession() {
  // Clear both timeouts
  clearTimeout(timeoutWarning);
  clearTimeout(timeoutFinal);
  
  // Hide dialog
  document.getElementById('timeout-dialog').style.display = 'none';
  
  // Reset the timeout process
  timeoutWarning = setTimeout(function() {
    showTimeoutDialog();
  }, 840000);
}

Distracting Elements

Problem: Animations, auto-playing media, or flashing content can distract or overwhelm some users.

Solution: Provide controls to pause, stop, or hide non-essential moving content, and never use content that flashes more than three times per second.

// Provide controls for carousels, animations, etc.
const carousel = document.querySelector('.carousel');
const pauseButton = document.querySelector('.carousel-pause');

pauseButton.addEventListener('click', function() {
  if (carousel.classList.contains('paused')) {
    carousel.classList.remove('paused');
    carousel.style.animationPlayState = 'running';
    pauseButton.textContent = 'Pause';
  } else {
    carousel.classList.add('paused');
    carousel.style.animationPlayState = 'paused';
    pauseButton.textContent = 'Play';
  }
});