Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
6 to work through
-
beginner Multiple choice
A dashboard lays out six cards in a CSS grid and uses the order property so the most important card appears first on narrow screens while staying later in the HTML. Keyboard users tab through the cards in an order that does not match what they see. The page has about 40 focusable elements. Which change fixes this at the right level?
2 min answer -
intermediate Multiple choice
A single-page application replaces the page content when the route changes. Sighted users see a new page. A screen-reader user hears nothing, and their keyboard focus is now at the top of the document. Which change fixes this at the right level?
3 min answer -
intermediate
An accessibility audit finds that a custom dropdown is unusable with a screen reader. It passed automated checks. Why, and what is the systemic fix?
2 min answer -
intermediate
The European Accessibility Act became enforceable on 28 June 2025 and applies to consumer services including online shops and banking, with EN 301 549 as the harmonised standard referencing WCAG level AA. A team with 11 applications proposes moving accessibility into its design system rather than fixing each application. What does that buy, what does it pay, and where does it stop working?
3 min answer -
advanced
Six weeks before launch, an accessibility audit returns 200 issues. The team's automated checks were green. Why, and what do you do?
2 min answer -
advanced
Where should accessibility live architecturally so it is not a remediation project every year?
1 min answer
3 terms in this topic
Accessibility Architecture
Placing conformance in the components routing and release pipeline that every team already uses - so accessibility is maintained by construction rath…
practiceAccessibility Regression Gate
An automated check plus a named manual pass in the release pipeline that blocks a change which breaks accessibility, so conformance is maintained by …
practiceFocus Management
Deliberately controlling where keyboard focus sits after an interface change, which is what makes a dynamic application usable without a mouse.
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.
Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.