A11Y Basics — accessibility micro-learning for designers and developers

01 · Foundations

Why accessibility matters

Roughly 1 in 6 people live with some form of disability — visual, auditory, motor, or cognitive. But accessibility isn't only about permanent disabilities. It covers temporary situations (a broken arm, an eye infection) and situational ones (bright sunlight, a noisy train, holding a baby in one arm).

When you design and build accessibly, you serve all of these people at once. Captions help deaf users and commuters. High contrast helps low-vision users and anyone outdoors. Large touch targets help users with tremors and anyone on a moving bus.

Most standards come from the WCAG (Web Content Accessibility Guidelines). Levels run from A (minimum) to AAA (strictest). Most products target AA — the level most laws reference.

02 · Foundations

The POUR principles

WCAG organizes everything under four principles. If you remember one framework, make it this one:

• Perceivable — people can see or hear your content. Contrast, text alternatives, captions.
• Operable — people can use your interface. Keyboard access, target sizes, enough time.
• Understandable — people can comprehend it. Clear language, predictable behavior, helpful errors.
• Robust — it works with assistive technology, today and in the future.

When reviewing work, walk through each letter: Can everyone perceive this? Operate it? Understand it? Will it hold up with a screen reader?

03 · Visual

Color & contrast

Contrast is a ratio between two colors, from 1:1 (white on white) to 21:1 (black on white). The AA thresholds:

• 4.5:1 for normal text
• 3:1 for large text (18pt / 24px, or 14pt / 18.66px bold)
• 3:1 for UI components and meaningful graphics — icons, input borders, chart elements

Second rule: never use color alone to carry meaning. Around 8% of men have some form of color vision deficiency. Pair color with an icon, label, or pattern — an error state should be red and say "error".

04 · Visual

Typography

• Body text: 16px minimum. Smaller sizes are for captions and metadata only.
• Line height around 1.5 for body copy. Tight leading hurts readers with dyslexia.
• Line length of 45–75 characters. Longer lines make it hard to find the next line.
• Avoid all-caps for long text — word shapes disappear and reading slows.
• Left-align paragraphs. Justified text creates uneven gaps that trip up dyslexic readers.

Two structural requirements people forget: content must survive 200% text zoom, and it must reflow to a 320px-wide viewport without needing horizontal scrolling. Both mean: avoid fixed-height boxes around text.

05 · Interaction

Interaction

• 44×44pt is Apple's minimum touch target; Android uses 48×48dp; WCAG requires at least 24×24px with spacing.
• The visual element can be smaller than the tappable area. A 20px icon can sit inside a 44px hit zone.
• Every interactive element needs a visible focus state. Design it, build it, never delete it.
• Focus order follows visual order — usually top-to-bottom, left-to-right.
• Modals trap focus while open and return it when closed.
• Nothing should require hover to be discovered — hover has no keyboard or touch equivalent.
• Any drag interaction needs a single-tap alternative.

06 · Code

Code & semantics

Screen readers understand your interface through markup, not pixels. Semantic HTML gives you accessibility for free:

• A native <button> is focusable, keyboard-operable, and announced as a button. A clickable <div> is none of these.
• Landmarks (header, nav, main, footer) let people jump around the page.
• Headings are navigation. One h1 per page, no skipped levels.
• Labels belong to inputs — programmatically associated, not just visually nearby. Placeholders are not labels; they vanish on input.
• Set the page language so screen readers pick the right pronunciation.

07 · Content

Content & alt text

• Alt text describes function, not appearance. A magnifying-glass icon's alt is "Search", not "magnifying glass".
• Decorative images get empty alt text so screen readers skip them.
• Links and buttons must make sense out of context. "Read more" ×5 tells a screen reader user nothing; "Read the pricing guide" does.
• Error messages name the problem and the fix. "Something went wrong" helps no one.
• Don't mark required fields with an asterisk alone — say "required".

08 · Motion

Motion

• Respect the system-level "reduce motion" setting. Offer a calm alternative: fades instead of slides, zooms, and parallax.
• Never flash content more than 3 times per second — a hard seizure-safety rule.
• Auto-playing content longer than 5 seconds needs a pause control.
• Keep motion small, brief, and purposeful. Decoration is the first thing to cut.

09 · Practice

How to test

Automated tools catch roughly 30–40% of accessibility issues. They're a floor, not a finish line.

• Keyboard pass: put the mouse away and Tab through. Everything reachable? Focus always visible? Order logical?
• Screen reader pass: VoiceOver (macOS/iOS), NVDA (Windows), TalkBack (Android). Ten minutes teaches more than ten articles.
• Zoom to 200% and narrow the window to 320px.
• Run axe or Lighthouse to catch the mechanical failures.
• Turn on reduce-motion and confirm nothing breaks.

10 · Practice

Starter checklist

• Text contrast ≥ 4.5:1 (3:1 for large text and UI elements)
• Meaning never carried by color alone
• Body text ≥ 16px, line height ≈ 1.5
• Survives 200% zoom and 320px width
• Touch targets ≥ 44px with breathing room
• Visible focus state on every interactive element
• Semantic elements: real buttons, real labels, logical headings
• Alt text for meaningful images; empty for decorative ones
• Errors explain the problem and the fix
• Motion has a reduced alternative; nothing flashes rapidly
• Final gate: full keyboard pass + 10 minutes with a screen reader