Introduction

Accessibility is about letting more people actually use what you build. It cuts friction instead of piling on features. The small fixes are usually the ones that matter, the kind you can do today and not after a long roadmap. This handbook stays practical and straight to the point. No theory for the sake of theory. You do not need to be an expert.

What is Accessibility?

Accessibility means designing digital experiences that hold up for people with different abilities and in different situations. It means supporting permanent limits, temporary setbacks, and the small moment to moment challenges that everyone deals with. It reduces confusion and unnecessary mental load. It makes information available in ways people can actually use. 
It builds systems that survive real conditions, not ideal ones.

WCAG Levels

  • WCAG gives teams a shared baseline so everyone speaks the same language about barriers and expectations.
  • Level A: removes the worst blockers that stop people from using the product at all.
  • Level AA: fixes the common barriers people run into during everyday tasks.
  • Level AAA: adds deeper enhancements meant for highly demanding situations, not general use.

Principles

  • Perceivable means users must be able to sense the content in at least one reliable way.
  • Operable means controls and navigation behave in predictable ways across different inputs.
  • Understandable means content and errors are clear enough that users always know what to do next.
  • Robust means structure and code hold up across devices, browsers and assistive technology.

Content

  • Use plain language that says exactly what it means without forcing users to interpret.
  • Break ideas into chunks so people can scan and absorb information faster.
  • Give context before asking users to choose or commit to anything.
  • Keep terminology consistent across pages so users do not need to relearn patterns.
  • Use headings that clearly show the structure and flow of the content.
  • Write errors that explain what is wrong and what the user needs to do next.

Design

  • Maintain strong contrast so text stays readable without effort.
  • Never use colour alone to communicate meaning because it won’t reach everyone.
  • Keep line lengths readable and use spacing that supports smooth scanning.
  • Follow a clear heading hierarchy so structure is obvious at a glance.
  • Group related content in a way that visually shows what belongs together.
  • Keep layouts predictable and highlight key information without adding noise.
  • Provide captions or transcripts so media stays understandable in any context.
  • Keep animations short and pause looping motion when it’s not in view.
  • Ensure layouts adapt cleanly and stay usable when users zoom or magnify.
  • Show feedback exactly where the action happened and make errors easy to resolve.

Development

  • The product must work cleanly without a mouse so keyboard users can move through every flow.
  • Use visible focus indicators like box-shadow so focus never disappears or becomes hard to track.
  • Label every form field clearly so users always understand what the input expects.
  • Use correct input types like email and password so devices provide the right tools.
  • Walk the product with only the keyboard and do quick screen reader passes to catch obvious issues early.
  • Use the standard img element and give icon-only buttons clear labels so assistive tech can describe them.
  • Keep hover tooltips simple and free of interactive elements to avoid traps or accidental closures.
  • Apply ARIA attributes when native HTML is not enough and make sure they match the component’s behavior.
  • Treat mobile contexts as primary because many users interact on small screens and depend on zoom.

Notes

  • Mobile contexts are primary for many users, so every flow should hold up on small screens and touch input.
  • Small fixes often help more people than slow attempts at perfection, so ship improvements as you go.
  • Test early during real design so issues surface before patterns get locked in.
  • Consider temporary limitations like glare, noise or shaky hands because they affect everyone at some point.
  • Make errors teach the next step so users understand how to recover instead of hitting a wall.
  • Never rely solely on colour or motion to communicate meaning because those cues fail in real conditions.
  • Consistency lowers cognitive load and lets people rely on familiar patterns instead of relearning.
  • Keep patterns and documentation updated so solutions last and bad habits do not return.
  • Accessibility works when design, engineering and content teams collaborate instead of treating it as a handoff.

Carefully curated by
Carlos Fraccalvieri

Coming Soon

Carefully curated
by
Carlos Fraccalvieri