Accessibility considerations

Basic Concepts of Accessibility

Accessibility refers to the ability of websites or applications to be equally accessible and usable by all people, including those with disabilities. The WCAG standards established by W3C divide accessibility into four principles: perceivable, operable, understandable, and robust. HTML, as the foundation of web structure, relies on semantic markup as the primary condition for achieving accessibility.

<!-- Bad example -->
<div onclick="submitForm()">Submit</div>

<!-- Good example -->
<button type="submit" aria-label="Submit order">Submit</button>

Semantic HTML Structure

Using proper HTML5 semantic tags helps assistive technologies understand content structure. Tags like <header>, <nav>, and <main> automatically create landmark regions, allowing screen reader users to navigate quickly via shortcuts.

<article aria-labelledby="article-heading">
  <h2 id="article-heading">How to Create Accessible Web Pages</h2>
  <section>
    <h3>Semantic Markup</h3>
    <p>Using the correct HTML elements...</p>
  </section>
</article>

ARIA Attribute Applications

When native HTML falls short, ARIA (Accessible Rich Internet Applications) attributes can supplement semantic information. Note the three rules of ARIA: don't use ARIA to override native semantics, interactive elements must be operable, and all custom controls require full ARIA support.

<div class="tabs" role="tablist">
  <button 
    role="tab"
    aria-selected="true"
    aria-controls="panel1"
    id="tab1">Option 1</button>
  <div 
    role="tabpanel"
    aria-labelledby="tab1"
    id="panel1">Content area...</div>
</div>

Keyboard Navigation Support

All interactive elements must support keyboard operation, and focus order should follow the visual flow. Use tabindex to control focus behavior: 0 means focusable, -1 means programmatically focusable, and positive values disrupt natural focus order and should be avoided.

// Implementing keyboard navigation for custom dropdown menus
menuButton.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    firstMenuItem.focus();
  }
});

Color and Contrast

Text and background contrast should meet at least 4.5:1 (AA level), with large text relaxed to 3:1. Avoid conveying information solely through color; use text or icons as well.

/* Insufficient contrast */
.warning { color: #FFCC00; }

/* Sufficient contrast */
.warning { 
  color: #C33;
  background: #FFF; 
}

Multimedia Accessibility

Videos require captions and transcripts, while audio requires text transcripts. Dynamic content should consider users with vestibular disorders, avoiding autoplay and content that flashes at frequencies between 3-50Hz.

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track 
    kind="captions" 
    src="captions.vtt" 
    srclang="en" 
    label="English captions">
  <p>Your browser doesn't support video. <a href="transcript.txt">View transcript</a></p>
</video>

Form Accessibility

Each form control must have an explicit <label>, and error messages should use both text and ARIA states. Complex forms should be grouped with fieldset and legend.

<div class="form-group">
  <label for="email">Email</label>
  <input 
    type="email" 
    id="email" 
    aria-describedby="email-help"
    aria-invalid="false">
  <p id="email-help" class="hint">Please enter a valid email address</p>
</div>

Dynamic Content Updates

Use aria-live regions to announce dynamic content changes. polite notifies when idle, while assertive interrupts current reading immediately.

<div aria-live="polite" id="notifications">
  <!-- Dynamically inserted notification content -->
</div>

<script>
function showNotification(message) {
  const el = document.createElement('p');
  el.textContent = message;
  document.getElementById('notifications').appendChild(el);
}
</script>

Mobile Device Adaptation

Touch targets should be at least 48×48px to ensure sufficient click area. Avoid using hover states as the sole interaction method.

/* Too small touch area */
.icon-button { width: 24px; height: 24px; }

/* Proper touch area */
.icon-button {
  width: 48px;
  height: 48px;
  padding: 12px;
}

Testing and Validation Tools

Combine automated tools with manual testing:

• WAVE browser extension
• axe DevTools
• Screen readers (NVDA, VoiceOver)
• Keyboard navigation testing
• High-contrast mode testing

// Automated testing with axe-core
const axe = require('axe-core');
axe.run(document, {}, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Performance and Accessibility

Slow loading affects all users, especially those relying on assistive technologies. Lazy-loaded non-critical content should provide loading state indicators.

<img 
  src="placeholder.jpg" 
  data-src="large-image.jpg" 
  alt="Product showcase"
  aria-busy="true"
  loading="lazy">

Internationalization Considerations

The lang attribute should be set accurately, and mixed-language content should use span for local declarations. RTL (right-to-left) languages require layout adaptation.

<html lang="en">
<body>
  <p>This word <span lang="zh">可访问性</span> is important</p>
</body>
</html>

Progressive Enhancement Strategy

Core functionality should be available in basic HTML, with JavaScript and CSS enhancing the experience. Avoid creating interactions that rely solely on specific input methods.

<!-- Basic HTML version -->
<select id="theme-selector">
  <option value="light">Light mode</option>
  <option value="dark">Dark mode</option>
</select>

<!-- Enhanced UI -->
<div class="custom-select" role="listbox" aria-labelledby="theme-label">
  <span id="theme-label">Theme selection</span>
  <ul>
    <li role="option" tabindex="0" data-value="light">Light mode</li>
    <li role="option" tabindex="-1" data-value="dark">Dark mode</li>
  </ul>
</div>