Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
ARIA states are attributes that change frequently based on user interaction, while ARIA properties are more static. States must be updated with JavaScript when the UI changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-expanded - Expandable Content</title>
</head>
<body>
<div class="container">
<h1>🔽 aria-expanded</h1>
<p style="text-align: center; color: #6b7280; margin-bottom: 30px;">
Indicates whether content is expanded or collapsed
</p>
<div class="accordion-item">
<button
class="accordion-button"
aria-expanded="false"
aria-controls="panel1"
onclick="toggleAccordion(this)">
<span>What is aria-expanded?</span>
<div style="display: flex; align-items: center; gap: 10px;">
<span class="state-indicator state-collapsed">aria-expanded="false"</span>
<span class="accordion-icon">▼</span>
</div>
</button>
<div id="panel1" class="accordion-panel" role="region" aria-hidden="true">
<div class="accordion-content">
<p>
<strong>aria-expanded</strong> is a state that tells screen readers whether
expandable content (like this accordion panel) is currently expanded or collapsed.
</p>
<p style="margin-top: 10px;">
When you click the button, JavaScript updates this attribute, and screen readers
announce the new state: "expanded" or "collapsed".
</p>
</div>
</div>
</div>
<div class="accordion-item">
<button
class="accordion-button"
aria-expanded="false"
aria-controls="panel2"
onclick="toggleAccordion(this)">
<span>When to use aria-expanded?</span>
<div style="display: flex; align-items: center; gap: 10px;">
<span class="state-indicator state-collapsed">aria-expanded="false"</span>
<span class="accordion-icon">▼</span>
</div>
</button>
<div id="panel2" class="accordion-panel" role="region" aria-hidden="true">
<div class="accordion-content">
<ul style="list-style: none; line-height: 2;">
<li>✓ Accordion panels (like this)</li>
<li>✓ Dropdown menus</li>
<li>✓ Collapsible sections</li>
<li>✓ Tree view items</li>
<li>✓ Combo boxes</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<button
class="accordion-button"
aria-expanded="false"
aria-controls="panel3"
onclick="toggleAccordion(this)">
<span>Try clicking me!</span>
<div style="display: flex; align-items: center; gap: 10px;">
<span class="state-indicator state-collapsed">aria-expanded="false"</span>
<span class="accordion-icon">▼</span>
</div>
</button>
<div id="panel3" class="accordion-panel" role="region" aria-hidden="true">
<div class="accordion-content">
<p>
🎉 Great! Notice how the state indicator updated when you clicked the button.
Screen readers announce this change automatically, letting users know the panel
is now expanded.
</p>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-checked & aria-pressed</title>
</head>
<body>
<div class="container">
<h1>☑️ aria-checked & aria-pressed</h1>
<!-- aria-checked Section -->
<div class="section">
<h3>aria-checked (for checkboxes)</h3>
<p style="color: #6b7280; margin-bottom: 20px;">
Indicates the checked state of checkboxes and radio buttons.
</p>
<div class="custom-checkbox">
<div
class="checkbox-box"
role="checkbox"
aria-checked="false"
tabindex="0"
onclick="toggleCheckbox(this)"
onkeypress="if(event.key==='Enter' || event.key===' ') toggleCheckbox(this)">
</div>
<label>Enable notifications</label>
</div>
<div class="custom-checkbox">
<div
class="checkbox-box"
role="checkbox"
aria-checked="false"
tabindex="0"
onclick="toggleCheckbox(this)"
onkeypress="if(event.key==='Enter' || event.key===' ') toggleCheckbox(this)">
</div>
<label>Accept terms and conditions</label>
</div>
<div class="custom-checkbox">
<div
class="checkbox-box"
role="checkbox"
aria-checked="true"
tabindex="0"
onclick="toggleCheckbox(this)"
onkeypress="if(event.key==='Enter' || event.key===' ') toggleCheckbox(this)">
✓
</div>
<label>Subscribe to newsletter (pre-checked)</label>
</div>
</div>
<!-- aria-pressed Section -->
<div class="section">
<h3>aria-pressed (for toggle buttons)</h3>
<p style="color: #6b7280; margin-bottom: 20px;">
Indicates the pressed state of toggle buttons (like bold/italic in editors).
</p>
<button
class="toggle-button"
aria-pressed="false"
onclick="toggleButton(this)">
<strong>Bold</strong>
<span class="state-badge badge-false">aria-pressed="false"</span>
</button>
<button
class="toggle-button"
aria-pressed="false"
onclick="toggleButton(this)">
<em>Italic</em>
<span class="state-badge badge-false">aria-pressed="false"</span>
</button>
<button
class="toggle-button"
aria-pressed="false"
onclick="toggleButton(this)">
<u>Underline</u>
<span class="state-badge badge-false">aria-pressed="false"</span>
</button>
</div>
<p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
Try clicking or using keyboard (Tab + Enter/Space) to toggle states!
</p>
</div>
</body>
</html>Loading preview...
Indicates if a dropdown, accordion, or other expandable element is open or closed.
<button aria-expanded="false" aria-controls="menu">Menu</button>Indicates the checked state. Use "mixed" for indeterminate checkboxes.
<div role="checkbox" aria-checked="true">Option</div>Indicates if a toggle button is pressed (like Bold/Italic in editors).
<button aria-pressed="false">Bold</button>Indicates if an option in a list or tab is currently selected.
<div role="tab" aria-selected="true">Tab 1</div>Hides content from screen readers. Never use on focusable elements!
<span aria-hidden="true">🎉</span> Decorative emojiIndicates element is disabled but still focusable (unlike disabled attribute).
<button aria-disabled="true">Submit</button>