Web Accessibility Design Guide

What is Web Accessibility?

Web accessibility ensures people with disabilities can use websites. About 15% of the global population has some form of disability.

Semantic HTML

<header>Header</header>
<nav aria-label="Main navigation">...</nav>
<main>
  <article><h1>Title</h1>...</article>
</main>
<label for="email">Email</label>
<input type="email" id="email" aria-required="true">

Keyboard Navigation

• Tab to move between elements
• Enter/Space to activate buttons
• Escape to close modals

Color Contrast

WCAG requires minimum 4.5:1 contrast ratio for normal text, 3:1 for large text.