Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Accessibility is the practice of building so that disabled people can use what you build. On the web the reference standard is the Web Content Accessibility Guidelines, organised around four principles: content must be perceivable, operable, understandable, and robust.
Most of it is not exotic. Correct Semantic HTML delivers a large fraction for free: real buttons are focusable, keyboard-activatable, and announced correctly, while a styled generic element is none of those unless every behaviour is reimplemented. The remainder is mostly Keyboard Navigation, Focus Management, Color Contrast, text alternatives, and respecting stated preferences such as Reduced Motion.
The thing worth internalising is what automated checking can and cannot do. Tools like axe reliably catch missing labels, insufficient contrast, invalid ARIA, and duplicated landmarks. They cannot tell whether alternative text describes the image, whether a focus order makes sense, or whether an interaction is comprehensible. An automated pass is a floor.
Automated checks also produce characteristic false signals: a burst of violations across an entire suite usually means the pages failed to load and the tool is scanning an error overlay; a contrast violation on a mid-transition element means the check ran too early. Diagnosing those before treating them as regressions saves a great deal of time.
See also5
Hand-picked in the note itself — the neighbours worth reading next.
ARIA
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
Design & Interface10 connections
Semantic HTML
Using elements for their meaning, so the document conveys structure without extra description.
Design & Interface12 connections
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface14 connections
Plain Language
Writing so that the intended reader can find, understand, and use the information the first time.
Meaning & Society14 connections
Document Object Model
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
Web Platform12 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from19
Notes elsewhere in the wiki that reach for this one.
- ARIADesign & Interface
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Component StoryTesting & Verification
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
- contenteditableWeb Platform
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
- Document Object ModelWeb Platform
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Focus ManagementDesign & Interface
Deliberately controlling which element receives keyboard focus as an interface changes.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- Headless ComponentDesign & Interface
A component supplying behaviour and accessibility with no styling of its own.
- Keyboard NavigationDesign & Interface
Making every interactive affordance reachable and operable without a pointer.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- Plain LanguageMeaning & Society
Writing so that the intended reader can find, understand, and use the information the first time.
- Progressive EnhancementWeb Platform
Building so the core experience works without scripts, with richer behaviour layered on top.
- Reduced MotionDesign & Interface
An operating-system preference signalling that animation should be minimised, for real medical reasons.
- Seed DataData & Content
Initial content created programmatically to make an empty system usable or demonstrable.
- Semantic HTMLDesign & Interface
Using elements for their meaning, so the document conveys structure without extra description.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- SubtitlingMeaning & Society
Timed text accompanying video, with conventions that differ deliberately from written prose.
- UI PrimitiveDesign & Interface
The small set of typed components through which all interface markup is expressed.