THE WEB IS
A MATERIAL.

THE ACCESSIBLE WEB / AN ENTIRE TRACK

Make space
for everyone.

Accessibility isn't a finishing touch, a separate audience, or a button that makes everything okay. It's the practice of making documents and interactions understandable and usable across different bodies, devices, input methods and environments.

Our baseline: Aim for WCAG 2.2 Level AA, favor native HTML semantics, test with people and assistive technologies, and treat automation as one layer of evidence—not proof that a site is accessible.

01 / START WITH MEANING

Semantics

A heading is not just large text. A button isn't merely a clickable rectangle. Semantic HTML gives browsers, screen readers and other tools predictable relationships and behavior.

  • Use landmarks, headings, lists and descriptive links.
  • Choose <button> for actions and <a href> for destinations.
  • Prefer native form labels and validation to recreating them.
  • Use ARIA only when native semantics cannot express what you need.
Understand the document ↗

02 / NO MOUSE REQUIRED

Keyboard & focus

Try navigating this page using Tab, Shift+Tab, Enter and Space. Notice where focus goes, whether it remains visible and whether anything requires a hover gesture.

  • Every interactive control needs a keyboard path.
  • Focus indicators must be visible, not removed for style.
  • Menus and dialogs need deliberate focus behavior.
  • Source order should remain sensible even if CSS rearranges the layout.
Experiment with native UI ↗

03 / PERCEPTION & CLARITY

Color, type & zoom

Text needs contrast and room to grow. Color cannot be the sole way a message is communicated. Contrast changes when a backdrop, transparency or blend mode changes.

  • As a common AA rule, normal text needs 4.5:1 contrast; large text 3:1.
  • Relevant interface graphics and boundaries commonly need 3:1.
  • Check 200% text resize, 400% page zoom and narrow reflow.
  • Honor system high-contrast and forced-colors modes.
Play with color ↗

04 / MOTION IS A CHOICE

Animation & depth

Movement can delight, orient or distract. It can also cause discomfort or obscure the purpose of an interface. A useful animation has a job; a decorative animation must never block learning.

  • Honor prefers-reduced-motion.
  • Provide pause/stop mechanisms for moving content when required.
  • Avoid flashing hazards and disorienting parallax.
  • Keep controls usable without animation or depth perception.
Explore movement and depth ↗

05 / MORE THAN IMAGES

Media alternatives

Images, video, diagrams and 3D effects carry different kinds of information. A thoughtful alternative preserves the essential meaning rather than describing every decorative detail.

  • Write alt text for meaningful images; use empty alt for redundant decoration.
  • Caption meaningful video and provide transcripts where appropriate.
  • Include controls and avoid surprise sound or autoplay.
  • Provide an equivalent text representation for essential canvas or 3D material.
Choose the right medium ↗

06 / TEST YOUR ASSUMPTIONS

Testing in context

An automated tool catches some mechanical issues. It cannot tell you whether the wording is clear, the order feels sensible, or a task can be finished by someone using assistive technology.

  • Use axe or similar tools for automated checks.
  • Test with keyboard-only navigation and VoiceOver/NVDA.
  • Check zoom, narrow screens, reduced motion and forced colors.
  • Review labels, instructions, error recovery and task completion.
Try the guided audit ↓

PRACTICE / A FIVE-MINUTE FIRST PASS

Audit this very page.

Work through these checks. They're a starting point, not a certification. Test again in more than one browser and with different assistive technologies.

  1. Press Tab from the top. Can you find the skip link, every navigation link and the motion preference control?
  2. Zoom your browser to 200%, then 400%. Does any essential text or control get lost behind another element?
  3. Enable your operating system's reduced-motion preference. Do transitions still force unnecessary movement?
  4. Use a screen reader's headings or landmarks list. Can you understand the outline without seeing the page?
  5. Check contrast in the native browser inspector, especially for small text and controls.
  6. Open the interaction lesson, test the native disclosure, popover and modal dialog, and verify Escape and focus behavior.
Remember the human

Accessible design also means writing understandable instructions, supporting different levels of experience and not punishing people for making mistakes. This site's plain-language explanations and progressive exercises are part of that work.

TRUSTWORTHY FURTHER READING

Read the originals.