Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA Basics - What is ARIA?</title>
</head>
<body>
<div class="container">
<h1>🎯 What is ARIA?</h1>
<p class="intro">
Accessible Rich Internet Applications - Making dynamic content accessible
</p>
<div class="info-box">
<h3>💡 ARIA in Simple Terms</h3>
<p>
ARIA stands for <strong>Accessible Rich Internet Applications</strong>. It's a set of HTML
attributes that help make web content more accessible to people using assistive technologies
like screen readers. Think of ARIA as adding "labels" and "instructions" that help screen
readers understand complex interfaces.
</p>
</div>
<h2 style="color: #f59e0b; margin: 40px 0 20px; font-size: 1.8rem;">
Three Main Categories of ARIA
</h2>
<div class="aria-categories">
<div class="category-card">
<h4>
🏷️ Roles
</h4>
<p>
Define what an element is or does. Examples: button, dialog, navigation, alert.
</p>
<div class="code-example">
<div role="button">
Click Me
</div>
</div>
</div>
<div class="category-card">
<h4>
📊 Properties
</h4>
<p>
Describe characteristics of an element. Examples: aria-label, aria-labelledby, aria-describedby.
</p>
<div class="code-example">
<button
aria-label="Close dialog">
✕
</button>
</div>
</div>
<div class="category-card">
<h4>
🔄 States
</h4>
<p>
Indicate current status that can change. Examples: aria-expanded, aria-hidden, aria-pressed.
</p>
<div class="code-example">
<button
aria-expanded="false">
Menu
</button>
</div>
</div>
</div>
<h2 style="color: #f59e0b; margin: 40px 0 20px; font-size: 1.8rem;">
When to Use ARIA
</h2>
<div style="background: #f0fdf4; padding: 25px; border-radius: 12px; margin: 20px 0; border-left: 4px solid #10b981;">
<h3 style="color: #065f46; margin-bottom: 15px;">✅ Good Uses of ARIA:</h3>
<ul style="list-style: none; color: #4b5563; line-height: 1.8;">
<li>✓ Making custom widgets accessible (dropdown menus, tabs, modals)</li>
<li>✓ Providing labels for icon-only buttons</li>
<li>✓ Indicating dynamic state changes (expanded/collapsed)</li>
<li>✓ Adding descriptions to complex elements</li>
<li>✓ Creating live regions for dynamic content</li>
</ul>
</div>
<div style="background: #fef2f2; padding: 25px; border-radius: 12px; margin: 20px 0; border-left: 4px solid #ef4444;">
<h3 style="color: #991b1b; margin-bottom: 15px;">❌ ARIA Mistakes:</h3>
<ul style="list-style: none; color: #4b5563; line-height: 1.8;">
<li>✗ Using ARIA when semantic HTML would work</li>
<li>✗ Adding aria-label to non-interactive elements</li>
<li>✗ Overriding native semantics unnecessarily</li>
<li>✗ Forgetting to update states with JavaScript</li>
<li>✗ Using ARIA without testing with screen readers</li>
</ul>
</div>
<p style="text-align: center; color: #6b7280; margin-top: 40px; line-height: 1.6;">
<strong style="color: #f59e0b;">Golden Rule:</strong> Use semantic HTML first,
ARIA only when necessary!
</p>
</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 Labels - Common Attributes</title>
</head>
<body>
<div class="container">
<h1>🏷️ Common ARIA Labels</h1>
<!-- aria-label Example -->
<div class="example-section">
<h3>1. aria-label</h3>
<p style="color: #6b7280; margin-bottom: 15px;">
Provides an accessible name for an element. Perfect for icon-only buttons.
</p>
<button class="icon-button" aria-label="Close dialog">
✕
</button>
<button class="icon-button" aria-label="Search" style="margin-left: 10px;">
🔍
</button>
<button class="icon-button" aria-label="Settings" style="margin-left: 10px;">
⚙️
</button>
<div class="code-display">
<button aria-label="Close dialog">✕</button>
<button aria-label="Search">🔍</button>
<button aria-label="Settings">⚙️</button>
</div>
<div class="explanation">
<strong>Why it's needed:</strong> Screen readers would only announce the icon (✕, 🔍, ⚙️).
With aria-label, they announce "Close dialog button", "Search button", etc.
</div>
</div>
<!-- aria-labelledby Example -->
<div class="example-section">
<h3>2. aria-labelledby</h3>
<p style="color: #6b7280; margin-bottom: 15px;">
Labels an element using the text from another element.
</p>
<div style="background: white; padding: 20px; border-radius: 8px;">
<h4 id="dialog-title" style="color: #1e40af; margin-bottom: 15px;">
Delete Account?
</h4>
<p id="dialog-desc" style="color: #6b7280; margin-bottom: 15px;">
This action cannot be undone. All your data will be permanently deleted.
</p>
<button
class="demo-button"
aria-labelledby="dialog-title dialog-desc"
style="background: #ef4444;">
Delete
</button>
</div>
<div class="code-display">
<h4 id="dialog-title">Delete Account?</h4>
<p id="dialog-desc">This action cannot be undone...</p>
<button aria-labelledby="dialog-title dialog-desc">
Delete
</button>
</div>
<div class="explanation">
<strong>Why it's useful:</strong> Screen reader announces both the title and description
when the button is focused, providing full context.
</div>
</div>
<!-- aria-describedby Example -->
<div class="example-section">
<h3>3. aria-describedby</h3>
<p style="color: #6b7280; margin-bottom: 15px;">
Provides additional description for an element.
</p>
<div style="background: white; padding: 20px; border-radius: 8px;">
<label for="password" style="display: block; color: #1f2937; font-weight: 600; margin-bottom: 8px;">
Password
</label>
<input
type="password"
id="password"
aria-describedby="password-help"
style="width: 100%; padding: 10px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 1rem;">
<p id="password-help" style="color: #6b7280; font-size: 0.85rem; margin-top: 8px;">
Must be at least 8 characters with uppercase, lowercase, and numbers.
</p>
</div>
<div class="code-display">
<label for="password">Password</label>
<input
id="password"
aria-describedby="password-help">
<p id="password-help">
Must be at least 8 characters...
</p>
</div>
<div class="explanation">
<strong>Why it's helpful:</strong> Screen readers announce the helper text when the input
is focused, giving users important context.
</div>
</div>
<!-- aria-hidden Example -->
<div class="example-section">
<h3>4. aria-hidden</h3>
<p style="color: #6b7280; margin-bottom: 15px;">
Hides decorative elements from screen readers.
</p>
<button class="demo-button">
<span aria-hidden="true">⭐</span>
Favorite
<span class="sr-only">(currently not favorited)</span>
</button>
<div class="code-display">
<button>
<span aria-hidden="true">⭐</span>
Favorite
<span class="sr-only">(currently not favorited)</span>
</button>
</div>
<div class="explanation">
<strong>Why it's smart:</strong> The star emoji is hidden from screen readers (decorative).
The sr-only text provides additional context only for screen reader users.
</div>
</div>
</div>
</body>
</html>Loading preview...
If you can use a native HTML element with the semantics you need, DO. Don't re-purpose elements with ARIA.
❌ <div role="button">Click</div>✅ <button>Click</button>Unless you really need to. Don't override native HTML semantics with ARIA roles.
❌ <h1 role="button">Title</h1>✅ <h1>Title</h1>If you add role="button" to a div, you must also add keyboard handling (Enter, Space keys).
Never hide focusable elements from screen readers. This creates "phantom" controls that keyboard users can focus but screen readers can't announce.
Buttons, links, form inputs - all need accessible names via text content, aria-label, or aria-labelledby.