ARIA tabs pattern

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

The tabs pattern combines a tablist of tab controls with corresponding tabpanels. Choose between manual and automatic activation; both are spec-compliant but have different keyboard semantics.

CSS color-mix() and relative colour syntax

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

color-mix() interpolates between two colours in a chosen colour space, replacing pre-processor colour utilities. Combined with the relative colour syntax it removes most need for a JavaScript colour library.

CSS scroll-driven animations

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

animation-timeline: scroll() and view() drive a CSS animation by scroll position rather than by time. Replaces a long history of IntersectionObserver + JavaScript animation code for parallax, progress bars, and reveal effects.

CSS @supports — feature queries

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

@supports tests for CSS feature support at parse time, letting authors ship modern CSS to capable engines and a tested fallback to older ones. Replaces the @media (-webkit-...) hacks of 2010-era CSS.

The HTML

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

, srcset, and responsive images

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

with and srcset selects the best image for the viewport, pixel density, and supported format. The replacement for the JavaScript-shimmed responsive-image patterns of 2014–2018.

HTML for data, with accessible headers
Editorial team — Tue, 28 Apr 2026 00:00:00 GMT

is the right element for tabular data and only tabular data. Correct use of ,
,
, and is the difference between an accessible table and a grid of unrelated cells.

ResizeObserver: element-level layout reactivity

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
ResizeObserver fires a callback when an observed element's content-box, border-box, or device-pixel size changes. The right primitive for component-level responsive behaviour, replacing window-resize listeners.

structuredClone() and the structured-clone algorithm

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
structuredClone() deep-copies almost any object, including Maps, Sets, ArrayBuffers, and cyclic graphs, in one platform-native call. Replaces the JSON.parse(JSON.stringify(x)) idiom and most third-party clone libraries.

Core Web Vitals: LCP, INP, CLS

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift are the three field-measured metrics Google uses for the Page Experience signal. Targets: 2.5s, 200ms, 0.1.

Subresource Integrity (SRI)

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
SRI protects pages from compromised CDNs by pinning the cryptographic hash of an external script or stylesheet. The browser refuses to execute a resource whose hash does not match the integrity attribute.

WCAG 1.3.1 Info and Relationships

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
Information, structure, and relationships conveyed through presentation must also be programmatically determinable. The criterion that powers headings, lists, table headers, and form-label association.

WCAG 1.4.11 Non-text Contrast

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
User-interface components and graphical objects required to understand the content must have a contrast ratio of at least 3:1 against adjacent colours. Level AA; the criterion that catches under-styled focus rings, icon-only buttons, and chart strokes.

WCAG 2.1.1 Keyboard

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
Every functionality available with a pointer must also be available with the keyboard alone, without requiring specific timings for individual keystrokes. Level A; the foundation of every keyboard-accessible widget.

WCAG 3.3.8 Accessible Authentication (Minimum)

Editorial team — Tue, 28 Apr 2026 00:00:00 GMT
Authentication must not depend solely on a cognitive function test (memorise, transcribe). New in WCAG 2.2 at Level AA. Affects password fields, captcha challenges, and SMS code transcription.

ARIA states and properties

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
ARIA states (such as aria-checked) and properties (such as aria-label) carry the dynamic and static metadata of a widget. Authors of any non-native widget must update them as the user interacts.

HTML
element and submission semantics

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
wraps a set of controls and defines how they are submitted. Knowing the difference between native validation, the FormData API, and constraint validation prevents most form bugs.

ARIA landmark roles and structure

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Landmark roles let assistive-technology users navigate a page by region: banner, main, navigation, complementary, contentinfo, search, form, region. Most have native HTML equivalents.

ARIA roles: a vocabulary for assistive technology

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
ARIA roles describe what an element is to assistive technology. Native HTML elements come with implicit roles; ARIA lets authors declare a role explicitly for custom widgets.

The HTML element

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
is the native HTML modal and non-modal dialog element. It manages focus trapping, the top layer, and inert background, replacing many ad-hoc modal libraries.

CSS color spaces and contrast

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
CSS Color 4 brings device-independent colour spaces (display-p3, lch, oklch) and the relative-colour syntax. Picking colours in a perceptually uniform space makes contrast tuning predictable.

CSS layout primitives: flow, flex, grid, container

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Modern CSS layout is built from four primitives: normal flow, flexbox, grid, and container queries. Knowing which to reach for is the largest determinant of layout quality.

HTML semantic elements

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
HTML's semantic vocabulary — header, nav, main, article, section, aside, figure, footer — encodes structure that browsers, search engines, and assistive technology rely on.

Fetch API: requests, responses, streaming, and abort

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Fetch is the modern HTTP client built into the platform. It exposes Request, Response, AbortSignal, ReadableStream, and FormData as primitives that compose with the rest of the platform.

Service workers: registration, lifecycle, fetch handling

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
A service worker is a programmable network proxy controlled by the page's origin. It enables offline, background sync, and push, but introduces a lifecycle that can outlive the page.

Web Components: custom-element lifecycle and slots

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
A custom element's lifecycle is defined by four user-agent callbacks plus three observable transitions. Knowing them is the difference between a robust component and one that leaks.

WCAG 1.4.3 Contrast (Minimum)

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, with documented exceptions for large text, incidental text, and logotypes.

WCAG 2.4.7 Focus Visible

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Any keyboard-operable interface must show a visible indicator on the focused element. The indicator must be perceivable and reliable across keyboard, switch, and voice control inputs.

CSS :has() — the parent selector

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
:has(...) matches an element if any of its descendants match the inner selector. The first general-purpose 'parent' selector in CSS, with quadratic-time pitfalls if used carelessly.

ARIA combobox pattern

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
The combobox pattern combines a single-line text input with a popup listbox, tree, grid, or dialog. The 1.2 spec requires aria-expanded, aria-controls, and either aria-activedescendant or focus-managed selection.

CSS @layer — explicit cascade layers

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
@layer creates named, ordered slots in the cascade so authors can predict which rule wins without specificity wars or !important escalation. The single largest improvement to cascade authoring since custom properties.

HTML
and

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT

is the native disclosure widget. The 2024 name attribute lets a group of
behave as an exclusive accordion. Replaces a long history of ad-hoc collapsible-panel JavaScript.

CSS View Transitions

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
View Transitions snapshot the page before and after a state change, then animate between the two snapshots. The single API turns 'navigation requires a SPA framework' into 'add five lines of CSS'.

AbortController and AbortSignal

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
AbortController is the platform's standard cancellation primitive. AbortSignal flows through fetch, addEventListener, streams, and most async platform APIs added since 2019.

IntersectionObserver: visibility-driven loading

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
IntersectionObserver fires a callback when a target element enters or leaves a viewport-relative root, with configurable thresholds. The right primitive for lazy-load, infinite-scroll, and sticky-state detection.

Content Security Policy: directives, nonces, and reporting

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
CSP is the response header that tells the browser which scripts, styles, frames, and connects are allowed to run. A correctly authored CSP eliminates whole classes of XSS attacks at the cost of a careful inventory of trusted sources.

The HTML element and its types

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
with its 22 type values is the most variable element in HTML. Each type carries different validation, keyboard, and platform UI semantics. Picking the right type is the difference between mobile autofill working or not.

WCAG 4.1.2 Name, Role, Value

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Every UI component built with markup must expose a programmatic name, role, and value, plus state changes via accessibility APIs. The single criterion that underpins every ARIA pattern.

WCAG 2.5.8 Target Size (Minimum)

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Pointer targets must be at least 24 by 24 CSS pixels, with documented exceptions for inline links, equivalent control alternatives, essential UIs, and user-agent default sizing. New in WCAG 2.2.

WCAG 2.5.7 Dragging Movements

Editorial team — Mon, 27 Apr 2026 00:00:00 GMT
Any drag-to-do interaction must have a single-pointer, non-drag alternative. New in WCAG 2.2 at Level AA. Reorderable lists, file uploads, and pan/zoom are the most common offenders.

w3c.wiki — independent encyclopedia of W3C web standards

ARIA tabs pattern

CSS color-mix() and relative colour syntax

CSS scroll-driven animations

CSS @supports — feature queries

The HTML element

, srcset, and responsive images

ResizeObserver: element-level layout reactivity

structuredClone() and the structured-clone algorithm

Core Web Vitals: LCP, INP, CLS

Subresource Integrity (SRI)

WCAG 1.3.1 Info and Relationships

WCAG 1.4.11 Non-text Contrast

WCAG 2.1.1 Keyboard

WCAG 3.3.8 Accessible Authentication (Minimum)

ARIA states and properties

HTML element and submission semantics

ARIA landmark roles and structure

ARIA roles: a vocabulary for assistive technology

The HTML element

CSS color spaces and contrast

CSS layout primitives: flow, flex, grid, container

HTML semantic elements

Fetch API: requests, responses, streaming, and abort

Service workers: registration, lifecycle, fetch handling

Web Components: custom-element lifecycle and slots

WCAG 1.4.3 Contrast (Minimum)

WCAG 2.4.7 Focus Visible

CSS :has() — the parent selector

ARIA combobox pattern

CSS @layer — explicit cascade layers

HTML and

CSS View Transitions

AbortController and AbortSignal

IntersectionObserver: visibility-driven loading

Content Security Policy: directives, nonces, and reporting

The HTML element and its types

WCAG 4.1.2 Name, Role, Value

WCAG 2.5.8 Target Size (Minimum)

WCAG 2.5.7 Dragging Movements

The HTML

HTML
element and submission semantics

HTML
and