Web Accessibility Guide 📖

Screen Reader Optimization #

Screen readers help visually impaired users navigate websites. Semantic HTML and ARIA attributes improve compatibility.

ARIA Roles and Labels

Use ARIA roles to describe elements: <nav role="navigation">
Add aria-label to buttons and links for better descriptions: <button aria-label="Submit Form">Submit</button>

Contrast & Colors #

Ensure text is readable with sufficient contrast ratios. Use WCAG standards for guidance.

Tools for Testing Contrast

Contrast Checker

Text color

Background color

Contrast Ratio: 21.00

WCAG AA: ✓ Pass

WCAG AAA: ✓ Pass

Keyboard Navigation #

Keyboard accessibility is essential for users who cannot use a mouse. Ensure proper focus management.

Focus Traps

Prevent users from navigating outside modals or overlays.

Live Playground

Edit HTML:

Dynamic Content #

Use ARIA live regions to announce dynamic changes to screen readers.

Welcome to our site!

Live Playground

Edit HTML:

Form Validation #

Use accessible error messages for invalid inputs. ARIA attributes help convey errors to screen readers.

Live Playground

Edit HTML:

<form onsubmit="validateForm(event)">
  <h3>Accessible Form Demo</h3>
  <div>
    <label for="pg-name">Name (required):</label>
    <input type="text" id="pg-name" aria-describedby="pg-name-error" required>
    <div id="pg-name-error" aria-live="polite"></div>
  </div>
  <div>
    <label for="pg-email">Email:</label>
    <input type="email" id="pg-email" aria-describedby="pg-email-error">
    <div id="pg-email-error" aria-live="polite"></div>
  </div>
  <button type="submit">Submit</button>
</form>
<style>
label { display: block; margin: 10px 0 5px 0; font-weight: bold; }
input { 
  width: 100%; 
  padding: 8px; 
  border: 2px solid #ddd; 
  border-radius: 4px; 
  margin-bottom: 5px; 
}
input:focus { 
  outline: none; 
  border-color: #007bff; 
}
input:invalid { 
  border-color: #dc3545; 
}
button { 
  padding: 10px 20px; 
  background: #007bff; 
  color: white; 
  border: none; 
  border-radius: 4px; 
  margin-top: 10px; 
}
button:focus { 
  outline: 3px solid #ffcc00; 
  outline-offset: 2px; 
}
.error { 
  color: #dc3545; 
  font-size: 14px; 
  margin-top: 5px; 
}
</style>
<script>
function validateForm(event) {
  event.preventDefault();
  const name = document.getElementById('pg-name');
  const email = document.getElementById('pg-email');
  const nameError = document.getElementById('pg-name-error');
  const emailError = document.getElementById('pg-email-error');
  
  nameError.textContent = '';
  emailError.textContent = '';
  
  if (!name.value.trim()) {
    nameError.textContent = 'Name is required';
    name.focus();
    return;
  }
  
  if (email.value && !email.value.includes('@')) {
    emailError.textContent = 'Please enter a valid email address';
    email.focus();
    return;
  }
  
  alert('Form submitted successfully!');
}
</script>

Accessible Animations #

Animations can enhance user experience but should be designed carefully to ensure they do not cause discomfort or confusion, especially for users sensitive to motion.

Example: Motion Reduction

Use media queries to detect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Multilingual Support #

Providing multilingual support ensures inclusivity for users who speak different languages.

Best Practices for Multilingual Websites

Use the lang attribute to specify the language of the content:

<html lang="en">

Provide a language switcher for easy navigation between languages.
Ensure translations are accurate and culturally appropriate.

Language Detection Example

Detect the user's preferred language and set the page language accordingly.

navigator.language || navigator.userLanguage;

Display "Hello World" in Multiple Languages

Choose a language:

Hello World

Dark Mode #

Dark mode helps reduce eye strain and provides better readability in low-light environments.

Enable Dark Mode

Code Example

Below is an example of how to implement dark mode using JavaScript and CSS:

CSS:

/* General Dark Mode Styles */
.dark-mode {
  background-color: #121212;
  color: #f4f4f4;
}

.dark-mode header {
  background-color: #1f1f1f;
}

JavaScript:

function toggleTheme() {
  const body = document.body;
  const isDarkMode = body.classList.toggle("dark-mode");
  localStorage.setItem("dark-mode", isDarkMode ? "enabled" : "disabled");
}

// Load user preference on page load
document.addEventListener("DOMContentLoaded", () => {
  if (localStorage.getItem("dark-mode") === "enabled") {
    document.body.classList.add("dark-mode");
  }
});

Interactive Widgets #

Accessible sliders, date pickers, and other custom UI components.

Adjust Volume: 50

Select a Date:

Accessible Notifications #

Notifications should be accessible to all users, including those using screen readers. Use ARIA live regions to ensure important updates are announced.

Implementing Screen-Reader Friendly Notifications

Use role="alert" or aria-live="polite" for inline notifications to announce updates.
Ensure notifications have clear and concise messages.

Example:

<div role="alert" aria-live="assertive" class="toast-notification">
  Your changes have been saved successfully!
</div>

What is Accessibility? #

Why is Accessibility Important?

Screen Reader Optimization #

ARIA Roles and Labels

Contrast & Colors #

Tools for Testing Contrast

Contrast Checker

Keyboard Navigation #

Focus Traps

Dynamic Content #

Form Validation #

Accessible Animations #

Example: Motion Reduction

Multilingual Support #

Best Practices for Multilingual Websites

Language Detection Example

Display "Hello World" in Multiple Languages

Dark Mode #

Enable Dark Mode

Code Example

CSS:

JavaScript:

Interactive Widgets #

Accessible Notifications #

Implementing Screen-Reader Friendly Notifications