HTML Accessibility & ARIA Cheat Sheet: Labels, Roles & Landmarks

Accessible HTML starts with native elements: labels on controls, real buttons, headings in order, and image alt text. ARIA adds names, roles, and states when no HTML element exists — it does not fix missing labels. Prefer semantic tags, then add the smallest ARIA that is true.

This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Name: Every interactive control needs an accessible name: <label>, aria-label, or aria-labelledby.
• Alt: Informative images get a short alt. Decorative images get alt="".
• Keyboard: If it clicks with a mouse, it must work with Enter/Space and be in the tab order.
• Focus: Never outline: none without a :focus-visible style. Skip links should be visible on focus.
• Headings: One h1, then sequential levels. Screen reader users jump by heading.
• ARIA rule: No ARIA is better than bad ARIA. Do not put role="button" on a <div> if you can use <button>.
• Hidden: aria-hidden="true" hides from AT. hidden or display:none hides from everyone.
• Live: aria-live="polite" for status messages after submit. Do not live-region the whole page.

Copy-paste examples

Dialog-free accessible toggle

A real button exposes role, keyboard, and disabled for free. aria-expanded tells AT the state.

<div>
  <button type="button" aria-expanded="false" aria-controls="faq-1" id="faq-btn-1">
    What is ARIA?
  </button>
  <div id="faq-1" hidden>
    <p>ARIA describes roles and states when native HTML is not enough.</p>
  </div>
</div>

Form error announced politely

Point aria-describedby at the error so the message is read with the field.

<label for="qty">Quantity</label>
<input id="qty" name="qty" type="number" min="1" aria-invalid="true" aria-describedby="qty-err">
<p id="qty-err" role="alert">Enter a number of 1 or more.</p>

Common mistakes

• Clickable <div onclick> with no tabindex, role, or keyboard handlers.
• Icon-only buttons with no text, aria-label, or visually hidden label.
• Duplicate aria-label that contradicts the visible label.
• Using aria-hidden on a focused element — AT and keyboard get out of sync.

FAQ

1. Do I need ARIA on every element? No. Correct HTML already has roles. Add ARIA for widgets HTML cannot express, or to wire labels and expanded state.

1. Is BLOGPH0 the same as BLOGPH1? No. alt is the image’s text replacement. title is a tooltip many mobile users never see.

1. What is WCAG in one line? Web Content Accessibility Guidelines: perceivable, operable, understandable, robust. Aim for AA on public sites.

Related HTML cheat sheets

• Html Cheat Sheet 2026
• Html Forms Cheat Sheet
• Html5 Semantic Tags Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.