Roles Define What a Thing Is
Tell assistive tech an element is a tab, alert, or dialog.
Roles Define What a Thing Is is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
A Role Is an Identity
A role tells assistive tech the kind of thing an element is: a button, a tab, an alert, a dialog. It answers what is this?
Native Elements Have Roles Already
Most HTML tags carry an implicit role built in. A nav is a navigation, an h1 is a heading, a button is a button.
<nav>...</nav>
<!-- implicit role: navigation -->The role Attribute
When no native tag fits, you set the role attribute by hand to give a generic element a recognized identity.
<div role="alert">Saved!</div>Widget Roles
Widget roles describe interactive things you sometimes build by hand: tab, slider, switch, menuitem, and treeitem.
Landmark Roles
Landmark roles map the page into regions like banner, main, and navigation so users can jump straight to a section.
Document Structure Roles
Structure roles describe static content: heading, list, listitem, and figure. They label the shape of your information.
One Role Per Element
An element gets one role. You cannot make something a button and a link at once, so pick the identity that matches its real job.
Roles Imply Requirements
Choosing a role is a contract. role=tab means you owe it a tablist parent, keyboard support, and a linked tabpanel.
<div role="tab" aria-selected="true">Profile</div>Do Not Override Good Semantics
Never put a role on an element that already has the right one. A redundant role on a real button just adds noise and risk.
<button role="button">Save</button>
<!-- the role is pointless here -->role=presentation Erases Meaning
role=presentation strips an element of its semantics. Useful for a layout table, dangerous on anything users need to understand.
Roles Are the Foundation
Get the role right first. States and properties only make sense once the element has a clear identity to attach them to.
Quick Check
You wrap a custom popup that interrupts the user in a div. Which role fits?
Recap: Roles First
You learned a role names what an element is. Prefer native implicit roles, add one explicit role only when needed, and honor its contract.
Frequently asked questions
Is the “Roles Define What a Thing Is” lesson free?
Yes — the full text of “Roles Define What a Thing Is” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Roles Define What a Thing Is”?
Tell assistive tech an element is a tab, alert, or dialog. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Roles Define What a Thing Is” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.