States and Properties: expanded, checked, disabled
Communicate the current condition of a control.
States and Properties: expanded, checked, disabled is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 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.
Beyond What, Toward How
A role says what an element is. States and properties say how it currently behaves: is it open, checked, busy, or off-limits?
States Change, Properties Mostly Stay
A state shifts as the user interacts, like expanded toggling. A property tends to stay put, like a control's required flag.
aria-expanded for Toggles
aria-expanded tells users whether a control's region is open. You must flip it in JavaScript every time the state changes.
<button aria-expanded="false">Menu</button>aria-checked for Custom Controls
aria-checked reports whether a custom checkbox or switch is on. A native checkbox already announces this for free.
<div role="switch" aria-checked="true">Dark mode</div>Disabled the Native Way
On real form controls, the HTML disabled attribute removes them from focus and announces them as unavailable automatically.
<button disabled>Submit</button>aria-disabled for the Rest
aria-disabled announces a custom control as disabled, but it does not block clicks. You still must stop the action in code.
<div role="button" aria-disabled="true">Submit</div>aria-selected in Sets
aria-selected marks the chosen item in a tablist, listbox, or grid so users know which option is currently active.
<div role="tab" aria-selected="true">Inbox</div>aria-pressed for Toggle Buttons
A toggle button uses aria-pressed to report on or off, like a bold button that stays lit while text is bold.
<button aria-pressed="true">Bold</button>Keep States in Sync
The number one bug: stale states. If the visual changes but aria-expanded stays false, screen reader users hear the wrong thing.
Values, Not Just Booleans
Some states carry numbers. A slider exposes its position with aria-valuenow, plus aria-valuemin and aria-valuemax for range.
<div role="slider" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>aria-required and aria-invalid
Two helpful form properties: aria-required flags a must-fill field, and aria-invalid announces one that failed validation.
<input aria-required="true" aria-invalid="true">Quick Check
You build a custom accordion button. Which attribute reports whether its panel is open?
Recap: Report the State
You learned states and properties describe an element's condition. Prefer native attributes, and always keep ARIA states in sync with the UI.
Frequently asked questions
Is the “States and Properties: expanded, checked, disabled” lesson free?
Yes — the full text of “States and Properties: expanded, checked, disabled” 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 “States and Properties: expanded, checked, disabled”?
Communicate the current condition of a control. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “States and Properties: expanded, checked, disabled” 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.
All lessons in this course
- The First Rule: No ARIA Beats Bad ARIA
- Roles Define What a Thing Is
- States and Properties: expanded, checked, disabled
- Reading the Accessibility Tree to Debug ARIA