Use this quick reference to choose semantic HTML first, add ARIA only when native semantics are insufficient, and verify keyboard, form and dynamic-content behavior.
<button type="button">Save</button>Use a button for an action, not a clickable div.
<nav aria-label="Primary">…</nav><main>…</main><fieldset><legend>Preferences</legend>…</fieldset><details><summary>Question</summary>…</details><label for="email">Email</label>aria-labelledby="dialog-title"aria-describedby="password-hint"aria-label="Close dialog"aria-hidden="true"aria-expanded="false"aria-controls="menu-panel"aria-current="page"aria-invalid="true"requiredPrefer the native attribute when it applies.
Move through focusable elementsActivate links and most buttonsActivate buttons and toggle checkboxesClose dismissible overlays where expectedUse for composite widgets such as radio groups, tabs and menus<p role="status">Saved</p><div role="alert">Payment failed</div>aria-live="polite"The region should exist before its text changes.
aria-busy="true"Use <button> or <a> insteadAvoid role="button" on <button>Do not remove outlines without a visible replacementPrefer native semantics and behavior<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint email-error" aria-invalid="true" />
<p id="email-hint">Use your work address.</p>
<p id="email-error" role="alert">Enter a valid email address.</p><button type="button" aria-expanded="false" aria-controls="site-menu">Menu</button>
<ul id="site-menu" hidden>…</ul>Accessibility & ARIA Cheatsheet includes quick reference sections, practical examples, common mistakes, tips and links to related DevKitYard tools.
This cheatsheet is a static quick reference focused on concise commands, syntax and examples.
Use it when you need to recall syntax, compare common patterns or avoid mistakes without opening a long tutorial.
Use related DevKitYard tools such as Contrast Checker when you need to format, validate, generate or inspect real output.