Features

The atomic form unit. The label announces the field's purpose to all users; the input captures the value. Without the label, a sighted user guesses from context — a screen reader user gets nothing. The pair is indivisible.

Use when a user may need more than one sentence. The label remains essential. Add a character counter (a separate <span> updated via JS) when there is a hard limit — never surprise the user with a truncation.

A specialised input + button pair where the action is always search or filter. Use type="search" for native clear behaviour and correct assistive-tech semantics. Wrap in a <form role="search"> for screen reader landmarks.

The label identifies the decision being made; the select + options supply the choices. Use for 5–15 mutually exclusive options. Fewer than 5 — prefer radio buttons so all options are visible at once.

When the user must pick exactly one option and all options should be visible simultaneously. The fieldset + legend provide the group's name to assistive tech — the legend is announced before each individual radio. Never skip it.

When multiple options can be selected simultaneously and independently. Each checkbox is its own binary choice. The fieldset + legend provide the shared question or context that makes each individual label meaningful.

An icon alone lacks text — it is ambiguous to everyone. Bonding it with a button element that carries an aria-label (for icon-only) or a visible text label ensures the action is understood by all users, including those who cannot see the icon.

Two buttons bonded by shared context: one confirms the consequence, one cancels it. The pair only makes sense together — showing just the confirm button creates a trap, showing just cancel is meaningless. The distinction in visual weight (primary vs. secondary) communicates relative severity.

Pairs an anchor with an icon to communicate direction or destination type (external link, download, back). The icon is decorative — aria-hidden="true" prevents screen readers announcing it twice. The text inside the <a> is the accessible name.

Tells the user where they are within a hierarchy and gives them one-click access to any ancestor. The <nav aria-label="Breadcrumb"> provides a named landmark. <ol> is correct (not ul) because order is meaningful — it represents a path. The current page is a <span>, not a link.

A <blockquote> alone conveys that text is quoted — but not from where. The <footer> + <cite> inside it completes the feature: source, author, title, or publication. The <cite> carries the title of the work, not the person's name (names are plain text).

Inline <code> handles single tokens in prose. For multi-line code, wrap in <pre> to preserve whitespace and line breaks. The <pre> is the block container; <code> provides the semantic type. Swap in a syntax-highlighting library without changing the element structure.

type Post = {
  slug: string;
  title: string;
  date: string;
};

The <figure> declares 'this is a self-contained asset'; the <img> provides the visual; the <figcaption> provides context for all users. The figcaption and alt text serve different roles — alt describes what is in the image, figcaption explains why it matters here.

The <time> element encodes the date precisely via datetime; the <span> provides the surrounding label. Together they give screen readers, search engines, and RSS parsers the exact date, while the user sees a friendly format.

A <progress> bar alone is unidentified — the label names the task and the <output> shows the current value in text. This trio gives sighted users the visual bar, the context label, and the precise number, while assistive tech can announce all three.

A <meter> represents current state within a bounded range (unlike progress, which represents completion). The label names what is being measured; the span provides the human-readable value description. The low, high, and optimum attributes drive colour feedback in supporting browsers.

The description list is the correct semantic structure for key–value data — metadata panels, glossary entries, specification tables, FAQ pages. <dt> is the term; <dd> is its value. One <dt> can have multiple <dd> children.

Tables convey two-dimensional relationships — every data cell has both a row and a column identity. Without <th scope> headers, a screen reader reaches a cell and has no idea what it means. thead + tbody is required for correct reading order and print formatting.