Design Nomenclature / Systems & Spec

Semantic markup

Also called native semantics, semantic HTML, POSH

Using elements for what they mean rather than how they look — a button as `button`, a heading as `h2` — so role, state, and keyboard behaviour arrive from the platform rather than being rebuilt. It is what assistive technology reads. Class names mean nothing to anything except a stylesheet.

A two-column comparison. Left, semantic markup: a native button element, which supplies role, state, focusability, Enter and Space key handling, and platform conventions at no cost. Right, ARIA: a div with a button role, which supplies the role announcement and nothing else — focus order and keyboard handling must still be written by hand. This is why the first rule of ARIA is not to use ARIA.

In practice

The first rule of ARIA is not to use ARIA: a native element beats a div with a role bolted on, because the native one also brings focus and key handling.

Not to be confused with

How this term connects

Accessible nameARIAFocus indicatorLabelPOURScreen readerWCAGSemantic markup
Related Confused with