Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
ARIA Properties are attributes that provide additional information about elements to assistive technologies like screen readers. They describe the purpose, state, or relationships of elements that might not be obvious from the HTML alone.
aria-label, aria-labelledby, aria-describedby provide names and descriptions
aria-hidden controls what screen readers can see and announce
aria-live announces dynamic content changes automatically
Properties that communicate current state to users
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-label & aria-labelledby</title>
</head>
<body>
<div class="container">
<h1>🏷️ aria-label & aria-labelledby</h1>
<p class="subtitle">Providing accessible names for elements</p>
<div class="example-section">
<h2>1️⃣ aria-label (Direct Label)</h2>
<p class="label-demo">
Use <strong>aria-label</strong> when there's no visible text label.
It provides a text alternative that screen readers will announce.
</p>
<div class="button-group">
<button class="btn-primary" aria-label="Close dialog window">
❌
</button>
<button class="btn-primary" aria-label="Search for products">
🔍
</button>
<button class="btn-primary" aria-label="Add to shopping cart">
🛒
</button>
</div>
<div class="code-block">
<button aria-label="Close dialog">❌</button>
<button aria-label="Search">🔍</button>
</div>
</div>
<div class="example-section">
<h2>2️⃣ aria-labelledby (Reference Label)</h2>
<p class="label-demo">
Use <strong>aria-labelledby</strong> to reference an existing element's ID.
This creates a relationship between elements.
</p>
<h3 id="form-title">📝 Contact Form</h3>
<form aria-labelledby="form-title">
<div class="button-group">
<button type="button" class="btn-primary">
Submit Form
</button>
</div>
</form>
<div class="code-block">
<h3 id="form-title">Contact Form</h3>
<form aria-labelledby="form-title">
<!-- Form content -->
</form>
</div>
</div>
<div class="example-section">
<h2>💡 Key Differences</h2>
<ul class="label-demo" style="margin-left: 20px; line-height: 2;">
<li>✅ <strong>aria-label</strong>: Creates new text (not visible on screen)</li>
<li>✅ <strong>aria-labelledby</strong>: Points to visible text already on page</li>
<li>✅ Use aria-label for icons without text</li>
<li>✅ Use aria-labelledby to reuse existing labels</li>
</ul>
</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-describedby</title>
</head>
<body>
<div class="container">
<h1>📝 aria-describedby</h1>
<p class="subtitle">Adding helpful descriptions to form fields</p>
<form>
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
aria-describedby="username-help"
placeholder="Enter your username"
>
<span id="username-help" class="help-text">
💡 Use 3-20 characters, letters and numbers only
</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
aria-describedby="password-help password-error"
placeholder="Create a password"
>
<span id="password-help" class="help-text">
🔒 Must be at least 8 characters with one number
</span>
<span id="password-error" class="error-text" style="display: none;">
❌ Password is too weak
</span>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
aria-describedby="email-help"
placeholder="your@email.com"
>
<span id="email-help" class="help-text">
✉️ We'll never share your email with anyone
</span>
</div>
</form>
<div class="info-box">
<h3>🎯 How it Works</h3>
<p>
<strong>aria-describedby</strong> references the ID of an element that describes
the current element. Screen readers announce this description after the label.
</p>
<p style="margin-top: 10px;">
You can reference multiple IDs separated by spaces!
</p>
</div>
</div>
</body>
</html>Loading preview...
aria-describedby to link form inputs with their help text, instructions, or error messages. Screen readers will announce the description after the label, giving users complete context.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aria-hidden</title>
</head>
<body>
<div class="container">
<h1>👻 aria-hidden</h1>
<p class="subtitle">Hiding decorative content from screen readers</p>
<div class="example-card">
<h2>✅ Good Example - Decorative Icons</h2>
<div class="icon-text">
<span class="decorative-icon" aria-hidden="true">⭐</span>
<span class="text-content">This is a featured product</span>
</div>
<div class="icon-text">
<span class="decorative-icon" aria-hidden="true">✅</span>
<span class="text-content">Item successfully added</span>
</div>
<div class="icon-text">
<span class="decorative-icon" aria-hidden="true">🔥</span>
<span class="text-content">Hot deal - Limited time only</span>
</div>
<div class="code-example">
<span aria-hidden="true">⭐</span>
<span>Featured product</span>
</div>
<p class="text-content" style="margin-top: 15px;">
Screen readers will only announce "Featured product", not "star featured product"
</p>
</div>
<div class="example-card">
<h2>💡 When to Use aria-hidden="true"</h2>
<ul class="text-content" style="margin-left: 20px; line-height: 2;">
<li>✅ Decorative icons that don't add meaning</li>
<li>✅ Visual spacing or styling elements</li>
<li>✅ Duplicate content (like icon + text)</li>
<li>✅ Background patterns or images</li>
</ul>
</div>
<div class="warning">
<strong>⚠️ Warning:</strong><br>
Never use aria-hidden="true" on focusable elements like buttons or links!
It will hide them from screen readers but users can still tab to them,
causing confusion.
</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-live Regions</title>
</head>
<body>
<div class="container">
<h1>📢 aria-live Regions</h1>
<p class="subtitle">Announcing dynamic content changes to screen readers</p>
<div class="demo-section">
<h2>🔔 aria-live="polite"</h2>
<p style="color: #0c4a6e; margin-bottom: 15px;">
Announces changes when the user is idle (waits for pause)
</p>
<button onclick="showPoliteMessage()">
Save Changes
</button>
<div id="polite-region" aria-live="polite" style="min-height: 50px;"></div>
</div>
<div class="demo-section">
<h2>🚨 aria-live="assertive"</h2>
<p style="color: #0c4a6e; margin-bottom: 15px;">
Immediately interrupts to announce (use sparingly!)
</p>
<button onclick="showAssertiveMessage()">
Delete Account
</button>
<div id="assertive-region" aria-live="assertive" style="min-height: 50px;"></div>
</div>
<div class="info-box">
<h3>💡 Common Use Cases</h3>
<ul style="margin-left: 20px; line-height: 1.8;">
<li><code>polite</code>: Form validation messages, status updates, notifications</li>
<li><code>assertive</code>: Critical errors, time-sensitive alerts, important warnings</li>
<li><code>off</code>: Don't announce (default)</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
Waits for user to pause before announcing
Use for: Status messages, form validation, progress updates, notifications
Immediately interrupts to announce
Use for: Critical errors, urgent alerts, time-sensitive warnings (use sparingly!)
aria-label="string"Provides an accessible name when no visible label exists
aria-labelledby="id"References another element's text as the label
aria-describedby="id"Links to additional descriptive text (help text, errors)
aria-hidden="true"Hides decorative elements from screen readers
aria-live="polite|assertive"Announces dynamic content changes automatically
aria-required="true"Indicates a form field must be filled out
aria-invalid="true"Marks form field as having invalid value
aria-expanded="true|false"Shows if a collapsible element is open or closed