WCAG & Semantic HTML

Accessibility starts with the basics

Web accessibility means designing so that everyone — including people with visual, motor, auditory, or cognitive disabilities — can use your site. The WCAG (Web Content Accessibility Guidelines) codify how.

The four principles: POUR

• Perceivable — content must be presentable in ways users can perceive (text alternatives, captions).
• Operable — all functionality must work via keyboard and not trap focus.
• Understandable — content and UI must be clear and predictable.
• Robust — markup must work reliably with assistive technologies.

Semantic HTML is the foundation

The single most powerful accessibility tool is correct HTML. Native elements like <button>, <a>, <input>, and <nav> are keyboard-focusable, announce their role to screen readers, and work for free. A <div onclick> does none of this.

Landmark elements

Semantic tags double as landmarks that screen-reader users jump between:

<header> <nav> <main> <aside> <footer>

Heading hierarchy

Screen-reader users navigate by headings like a table of contents. Rules:

• Exactly one <h1> describing the page.
• Don't skip levels (no <h2> jumping to <h4>).
• Don't choose a level for its font size — style with CSS instead.

Before reaching for ARIA, ask: is there a native HTML element that already does this? If yes, use it. Native semantics are more robust than any ARIA you could hand-roll.