Designing for Accessibility: A Guide for Beginners

Understanding Accessibility: Key Principles

Accessibility ensures that digital products are usable by people of all abilities and disabilities. The Web Content Accessibility Guidelines (WCAG) outline four main principles:

Common Disabilities to Consider

Text Alternatives for Non-Text Content

• Images: Use the alt attribute for img tags.
  html
<img src="profile.jpg" alt="Portrait of Jane Doe">
• Icons: Label with aria-label or hidden text.
  html
<button aria-label="Close">
<svg ...></svg>
</button>
• Complex Graphics: Provide a longer description nearby or via aria-describedby.

Color Contrast and Color Blindness

• Ensure text has sufficient contrast against its background.
• Use tools like WebAIM Contrast Checker.

Avoid Using Color Alone:
– Use text labels or patterns in addition to color for graphs and alerts.

Keyboard Navigation

• All interactive elements must be accessible via keyboard (Tab, Shift+Tab, Enter, Space).
• Use semantic HTML elements: <button>, <a>, <input>, etc.
• Avoid tabindex values >0; use tabindex="0" for custom controls.
• Hide non-interactive elements from tab order with tabindex="-1".

Example: Custom Button

<div role="button" tabindex="0" 
     aria-pressed="false"
     onkeydown="if(event.key==='Enter'||event.key===' '){toggle()}">
  Subscribe
</div>

Forms and Error Handling

• Label every form field with <label for="id">.
  html
<label for="email">Email Address</label>
<input id="email" name="email" type="email">
• Use fieldset and legend for related fields (e.g., radio groups).
• Error messages: Place them near the field and associate them with aria-describedby.

Example: Accessible Error

<label for="username">Username</label>
<input id="username" aria-describedby="username-error">
<span id="username-error" role="alert">Username is required.</span>

Semantic HTML Structure

• Use headings (<h1>, <h2>, etc.) in logical order.
• Use lists (<ul>, <ol>) for grouped items.
• Use landmarks: <nav>, <main>, <aside>, <footer>, <header>.
• Avoid using <div> or <span> for interactive elements.

Accessible Multimedia

• Videos: Provide captions and transcripts.
• Audio: Provide transcripts.
• Autoplay: Avoid or provide controls to pause/stop.

Example: Video with Captions

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>

ARIA (Accessible Rich Internet Applications) Basics

• When to use ARIA:
• Only when native HTML elements can’t achieve the desired accessibility.
• Common ARIA roles and attributes:
  | Element/Role | Purpose |
  |————–|———————————-|
  | role="button" | Identifies an element as a button |
  | aria-label | Provides an accessible label |
  | aria-live | Announces dynamic content changes |
  | aria-hidden="true" | Hides element from assistive tech |

Testing for Accessibility

• Manual Testing:
• Navigate using keyboard only (Tab, Shift+Tab, Enter, Space, Esc).
• Use screen readers (NVDA, VoiceOver).
• Automated Testing:
• Tools: axe, Lighthouse, WAVE
• Browser Extensions: Check contrast, landmarks, alt text.

Quick Accessibility Checklist

Further Resources

• Web Content Accessibility Guidelines (WCAG)
• Accessible Rich Internet Applications (WAI-ARIA)
• A11y Project Checklist