HomeGuides › ARIA Basics: Names, Roles, and Values

ARIA Basics: Names, Roles, and Values

ARIA (Accessible Rich Internet Applications) lets you give custom widgets the names, roles, and values screen readers need. Used wrong, it does more harm than good.

The first rule of ARIA

Don’t use ARIA if a native HTML element will do. A real <button> is accessible for free; a <div> with role="button" needs ARIA plus keyboard handling you have to build yourself.

Name, role, value

Every interactive control needs an accessible name (what it is), a role (what kind of control), and where relevant a value/state (e.g., expanded or checked). aria-label and aria-labelledby provide names when visible text isn’t enough.

Test it

ARIA makes promises about behavior. If you mark something as a tab or menu, it must actually behave like one with the keyboard. Always verify with a screen reader.

Check your site against these rules — free

Run an instant scan and get a plain-English list of exactly what to fix.

Scan my site free →

More guides

The WCAG 2.1 AA Checklist for Small BusinessesADA Website Lawsuits, ExplainedHow to Write Alt Text (With Examples)Color Contrast Requirements (WCAG 1.4.3)How to Build Accessible FormsKeyboard Navigation & Focus