The web as an interaction platform

The web is the platform nobody designed for you. A page is written once, then runs on an old phone, a projector and a browser that does not exist yet, and a screen reader reads it. Most platforms hand over a known screen and input. The web hands over a contract instead, and the contract is the design.

That contract has two halves. A document must carry its meaning, so style and script can be layered over it. Rendering happens at run time, on a device the author never sees. Progressive enhancement follows: document first, style second, behaviour last, so each layer can fail without taking the others down.

Element choice carries meaning, and the meaning is machine-readable

That contract starts with the document, so semantic HTML means choosing the element that says what the content is, not what it looks like. The browser turns that structure into a second tree, the accessibility tree, which assistive technology reads (Mozilla Foundation, n.d.). Three things decide what a screen reader announces: the element, its role and its name (W3C Web Accessibility Initiative, n.d.-a). Headings make the same argument: the level comes from the element, not from the font size (WHATWG, n.d.).

A div with a click handler looks identical to a button, and it fails in four ways: no Tab stop, no keyboard activation, no accessible name, no disabled state. A role and a tab index restore part of that, and every restored part needs maintaining (W3C Web Accessibility Initiative, n.d.-a). The rule is not absolute: some widgets have no native equivalent, and the pattern library exists for those.

ARIA is the escape hatch, and the first rule of its use is not to need it (Mozilla Foundation, n.d.). The Authoring Practices Guide's combobox pattern states the keyboard contract a custom control must meet: Down Arrow opens the popup, Escape dismisses it without changing the value, Enter accepts a highlighted suggestion (W3C Web Accessibility Initiative, n.d.-a). A native control ships with that contract, while a div must reproduce it.

The 2026 WebAIM Million audit found missing alternative text on 53.1 per cent of home pages (WebAIM, 2026). Empty links appeared on 46.3 per cent, empty buttons on 30.6 per cent, and missing document language on 13.5 per cent. One mechanism covers the first three: an element whose accessible name is empty, as an icon set drawn in CSS produces. The fourth asks for a language declaration, so a screen reader can pronounce it (W3C, 2023).

The cascade is a negotiation between competing rules

The second layer of that contract is contested: every visual decision is a contest between browser defaults, author stylesheets and user settings. The cascade settles it in a fixed order: origin, importance, layer, specificity, then order of appearance (Mozilla Foundation, n.d.). Specificity is a score in three columns, ID, class and type, so .card p weighs 0-1-1 and p weighs 0-0-1.

A component sets margin: 0 on its paragraphs. A vendor stylesheet loaded later sets p { margin: 2rem 0 }. Both selectors weigh the same, so the later rule wins. Wrap the vendor sheet in @layer vendor and the outcome flips: declarations outside a layer beat those inside one.

Layout follows the content and the input device, not the device name

That layer also sets layout: flexbox distributes space along one axis, for content that decides its own size. Grid sets rows and columns together, and it suits a layout that does (Mozilla Foundation, n.d.).

The unit of layout is the content, not the device (Mozilla Foundation, n.d.). Flexible images, relative units and intrinsic sizing do most of the work. A component can now measure its own slot. Give a wrapper container-type, and an @container rule styles the children from its width. Container queries reached every browser in February 2023, so one card works in a sidebar and a wide column (Mozilla Foundation, n.d.). Media queries still handle the breaks you find by narrowing the window. Content cannot tell whether the reader holds a mouse or a thumb, so the platform publishes that separately, as queries for the pointing device and hover (Mozilla Foundation, n.d.).

The worked case is a constructed dashboard on three surfaces. Panels stack on a phone and sit in a two-column grid on a laptop, while the reading order stays the same on a projector. Reflow requires content at a width equivalent to 320 CSS pixels without scrolling in two dimensions (W3C, 2023). That is a 1280 CSS pixel viewport at 400 per cent zoom, so a layout that fails it is broken for anyone who zooms. Ageing eyes are one ordinary reason to zoom. Maps, diagrams, video and data tables are the exceptions.

The standard also constrains the pointer itself. A target must reach 24 by 24 CSS pixels, or be spaced so that a circle that size centred on it does not touch its neighbour. A link inside a sentence is exempt.

Contrast is measurable, and the measure of a line is not

Contrast has an enforced threshold, not a settled one. Text must reach 4.5 to 1 against its background, and large text or icons 3 to 1 (W3C, 2023). The ratio is a formula over relative luminance, so it is checkable. Its limit is what it measures. One ratio cannot separate a bold heading from a light caption. Low contrast is the most frequently detected failure, on 83.9 per cent of the million home pages audited in 2026 (WebAIM, 2026). Meet the ratio and do not mistake it for a measurement of comfort.

Measure has no comparable threshold, and that is the contested part. Dyson and Haselgrove (2001) tested reading at normal and fast speeds at several line lengths, measuring comprehension, reading rate and scrolling. Reading fast reduced comprehension, and a medium line of 55 characters appeared to support the best balance of comprehension and speed. That is one study and a range, not a number: the abstract gives neither sample size nor effect size. Treat 55 characters as a starting point and test it with your own content.

The standard adds two constraints. Text must resize without loss of content and survive extra spacing between letters, words and lines, ruling out fixed heights and clipped boxes. And text must be text: a picture of text cannot be resized, reflowed or read aloud (W3C, 2023).

Forms that help rather than blame

Input follows the same rule. Every field needs a real label associated with its input, because the label gives the field its accessible name (W3C Web Accessibility Initiative, n.d.-a). Half the web fails this: in the 2026 audit, 51 per cent of a million home pages had an unlabelled input (WebAIM, 2026). Placeholder text does not repair it: it vanishes when typing starts.

Follow a constructed case. A date of birth field built as a text input with a pattern attribute refuses 3/3/1990 and announces nothing. The native input type="date" sidesteps both: the browser supplies a picker, shows the date in the reader's locale, and hands the script a value normalised to yyyy-mm-dd (Mozilla Foundation, n.d.). Where a text field is unavoidable: keep the typed value, accept common formats, tie the message to the input, and move focus to the field in error (W3C Web Accessibility Initiative, n.d.-a).

Errors must be identified in text, in plain words, and, where a correction is known, suggested (W3C, 2023). Validation runs on leaving a field or on submit, not on every keystroke, which punishes slow typing and slow reading. The browser's own constraint validation supplies messages and focus handling, so let a script extend it rather than replace it (Mozilla Foundation, n.d.). Do not make people re-enter information already given in the same process (W3C, 2023).

Accessibility is not a layer, and two contested questions stay open

That contract must hold for readers who see, hear, move or think differently. Landmarks let a person jump to the main content, headings give the outline, and names give controls something to announce. Focus must be visible (W3C, 2023).

The first contested question is whether meeting the Web Content Accessibility Guidelines (WCAG) is the same as being accessible. Power and colleagues (2012), in a peer-reviewed study, ran task-based evaluations with 32 blind users on 16 websites, logging 1,383 problems. Only 50.4 per cent were covered by WCAG 2.0 success criteria, and where recommended techniques were implemented they still failed in 16.7 per cent of cases. Against that, the standard sets testable criteria and concedes only that it will not address every user need (W3C, 2023). The study is stronger evidence, because it observes real users. But it is one study, on 16 sites, and mapping a problem onto a criterion takes judgement. Conformance is therefore a floor rather than a guarantee. The European Accessibility Act is addressed through EN 301 549, the European standard whose 2026 version uses WCAG 2.2 (W3C Web Accessibility Initiative, n.d.-b). That text is published as ISO/IEC 40500:2025. Test the journeys people cannot avoid, such as signing in, with screen reader and keyboard users.

The second contested question is whether accessibility can be automated. The WebAIM Million's engine found failures on 95.9 per cent of a million home pages, and its authors warn that detecting no errors proves nothing (WebAIM, 2026). Hartman and Gorichanaz (2026) tested three AI-powered overlays, scripts that repair pages at run time. They planted known violations on two constructed sites, then checked the results manually and automatically. The overlays corrected simple failures, including missing alternative text and unlabelled form fields: the strongest evidence on their side. Serious failures remained, and the overlays still reported the pages as "100% compliant". Most errors still need manual testing, the study concludes. That finding is bounded: two constructed sites measure a mechanism, not real failure rates. The Overlay Fact Sheet, signed by more than a thousand people, argues that run time repair cannot handle text alternatives, form errors, focus control or keyboard access (Groves, n.d.). It is a commercial position statement, not a study. While the argument is open, fix the markup, test with people who use assistive technology, and treat vendor claims as unverified.

Performance is a design property, and its numbers are borrowed

Speed is a property of that contract, and the reader feels it, so measure it. The Core Web Vitals are three metrics: Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness, Cumulative Layout Shift for visual stability. The targets are 2.5 seconds, 200 milliseconds and 0.1, judged at the 75th percentile on mobile and desktop separately (Google, 2024). The percentile matters, because an average hides the slow device and the slow connection.

The thresholds are contested: one vendor publishes them and collects most of the field data. The set moves as well: Interaction to Next Paint addressed runtime performance more comprehensively than First Input Delay, and the guidance describes a metric lifecycle of experimental, pending and stable (Google, 2024). Design against the current numbers, then measure your own 75th percentile.

A news page places its headline image with no width or height, so the text renders, the image arrives, and everything below shifts. The guidance names three causes: unknown image dimensions, late fonts, and widgets that resize themselves (Google, 2024). Reserve the space before the image arrives, with width and height attributes or an aspect ratio.

Security begins where the browser parses stored content as code

One cost of that contract is invisible to the reader, so the designer carries it. Cross-site scripting is content the browser treats as code. A comment box that writes typed text back as markup hands the parser a script tag, which runs for every reader in the site's origin. The defence is encoding for the output context, not filtering the input, and writing text as text (OWASP Foundation, n.d.-a).

What this hands to the next question

These rules do not rest on the same evidence or command equal agreement. A contrast ratio is arithmetic and enforced, yet it measures luminance, not readability. The measure of a line rests on one small study, read in opposite ways by practitioners. Whether conformance delivers accessibility is disputed by a peer-reviewed user study, and automated repair by an independent evaluation and by its vendors. The performance thresholds come from one vendor's field data, the security defence from its maintainers rather than from measurement. Where an argument is unresolved, choose the option that fails least badly and name your evidence. The next question concerns the person on the other side of the screen: how do they see, attend, remember, decide and feel?