MACRO NEPAL
UNDERSTAND ABOUT ARIA Attributes IN DETAIL
awiskar acharya
September 30, 2025
12:59 pm

ARIA Attributes in HTML: Enhancing Accessibility

ARIA (Accessible Rich Internet Applications) attributes help make web content more accessible to people with disabilities, especially when using assistive technologies like screen readers.

Let me create a comprehensive example that demonstrates various ARIA attributes in action.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA Attributes Demonstration</title>
<style>
:root {
--primary: #2c3e50;
--secondary: #3498db;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--light: #ecf0f1;
--dark: #34495e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 2rem;
border-radius: 10px;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
margin-bottom: 1rem;
}
.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.section-title {
color: var(--primary);
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.aria-demo {
background-color: var(--light);
padding: 1.5rem;
border-radius: 8px;
margin: 1.5rem 0;
border-left: 4px solid var(--secondary);
}
.button-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 1rem 0;
}
button {
padding: 0.7rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--secondary);
color: white;
}
.btn-success {
background-color: var(--success);
color: white;
}
.btn-warning {
background-color: var(--warning);
color: white;
}
.btn-danger {
background-color: var(--danger);
color: white;
}
button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.progress-container {
margin: 1.5rem 0;
}
.progress-bar {
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--success);
width: 65%;
transition: width 0.5s ease;
}
.tab-container {
margin: 1.5rem 0;
}
.tab-list {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
}
.tab {
padding: 0.8rem 1.5rem;
background: none;
border: none;
cursor: pointer;
border-bottom: 3px solid transparent;
}
.tab[aria-selected="true"] {
border-bottom-color: var(--secondary);
color: var(--secondary);
font-weight: bold;
}
.tab-panel {
padding: 1rem;
display: none;
}
.tab-panel[aria-hidden="false"] {
display: block;
}
.alert {
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
input, textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.status-message {
padding: 0.5rem;
border-radius: 4px;
margin: 0.5rem 0;
}
.live-region {
min-height: 40px;
border: 1px dashed #ccc;
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
}
footer {
text-align: center;
margin-top: 2rem;
padding: 1rem;
color: #7f8c8d;
border-top: 1px solid #ddd;
}
@media (max-width: 768px) {
.button-group {
flex-direction: column;
}
.tab-list {
flex-direction: column;
}
.tab {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>ARIA Attributes in HTML</h1>
<p>Making web content more accessible with ARIA (Accessible Rich Internet Applications)</p>
</header>
<main>
<section class="card">
<h2 class="section-title">What are ARIA Attributes?</h2>
<p>ARIA attributes provide additional semantic information about elements, their properties, states, and roles to assistive technologies like screen readers.</p>
<div class="aria-demo">
<h3>Key ARIA Concepts:</h3>
<ul>
<li><strong>Roles</strong> - Define what an element is or does</li>
<li><strong>Properties</strong> - Describe characteristics of elements</li>
<li><strong>States</strong> - Define the current conditions of elements</li>
</ul>
</div>
</section>
<section class="card">
<h2 class="section-title">ARIA Roles</h2>
<p>Roles define the purpose of an element. Some elements have implicit roles (like &lt;button&gt;), while others need explicit ARIA roles.</p>
<div class="aria-demo">
<h3>Role Examples:</h3>
<div class="button-group">
<button role="button" class="btn-primary">Button with explicit role</button>
<div role="button" tabindex="0" class="btn-success">Div as button</div>
<span role="button" tabindex="0" class="btn-warning">Span as button</span>
</div>
<div role="navigation" aria-label="Main navigation" style="margin-top: 1rem;">
<h4>Navigation Role</h4>
<ul>
<li><a href="#" role="link">Home</a></li>
<li><a href="#" role="link">About</a></li>
<li><a href="#" role="link">Contact</a></li>
</ul>
</div>
</div>
</section>
<section class="card">
<h2 class="section-title">ARIA States and Properties</h2>
<p>States and properties provide additional information about elements.</p>
<div class="aria-demo">
<h3>Common States and Properties:</h3>
<div class="form-group">
<label for="name">Name (required):</label>
<input type="text" id="name" aria-required="true" aria-describedby="name-help">
<div id="name-help" class="visually-hidden">Please enter your full name</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="false" aria-describedby="email-status">
<div id="email-status" class="status-message" aria-live="polite"></div>
</div>
<div class="progress-container">
<label for="progress">Download Progress:</label>
<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<div class="progress-fill"></div>
</div>
<div aria-live="polite" class="visually-hidden">Download is 65 percent complete</div>
</div>
<div class="alert alert-warning" role="alert" aria-live="assertive">
<strong>Warning:</strong> This action cannot be undone.
</div>
</div>
</section>
<section class="card">
<h2 class="section-title">ARIA Live Regions</h2>
<p>Live regions announce content changes to screen readers without requiring user focus.</p>
<div class="aria-demo">
<h3>Live Region Examples:</h3>
<div class="button-group">
<button id="polite-btn" class="btn-primary">Update Polite Region</button>
<button id="assertive-btn" class="btn-warning">Update Assertive Region</button>
<button id="off-btn" class="btn-danger">Update Off Region</button>
</div>
<div>
<h4>Polite Region (aria-live="polite")</h4>
<div id="polite-region" class="live-region" aria-live="polite">
Initial polite content. Changes will be announced when the user is idle.
</div>
</div>
<div>
<h4>Assertive Region (aria-live="assertive")</h4>
<div id="assertive-region" class="live-region" aria-live="assertive">
Initial assertive content. Changes will be announced immediately.
</div>
</div>
<div>
<h4>Off Region (aria-live="off")</h4>
<div id="off-region" class="live-region" aria-live="off">
Initial off content. Changes will not be announced.
</div>
</div>
</div>
</section>
<section class="card">
<h2 class="section-title">ARIA in Complex Widgets</h2>
<p>ARIA helps make complex widgets like tabs, accordions, and modals accessible.</p>
<div class="aria-demo">
<h3>Tab Widget Example:</h3>
<div class="tab-container" role="tablist" aria-label="Sample Tabs">
<button class="tab" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1">
Tab 1
</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="-1">
Tab 2
</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="-1">
Tab 3
</button>
</div>
<div class="tab-panel" role="tabpanel" id="tab-panel-1" aria-labelledby="tab-1" aria-hidden="false">
<h4>First Tab Content</h4>
<p>This is the content for the first tab. ARIA attributes help screen readers understand the tab structure.</p>
</div>
<div class="tab-panel" role="tabpanel" id="tab-panel-2" aria-labelledby="tab-2" aria-hidden="true">
<h4>Second Tab Content</h4>
<p>This is the content for the second tab. Notice how the tab panel is hidden from screen readers when not active.</p>
</div>
<div class="tab-panel" role="tabpanel" id="tab-panel-3" aria-labelledby="tab-3" aria-hidden="true">
<h4>Third Tab Content</h4>
<p>This is the content for the third tab. The aria-hidden attribute controls visibility for assistive technologies.</p>
</div>
</div>
</section>
<section class="card">
<h2 class="section-title">ARIA Landmarks</h2>
<p>Landmarks help users navigate to important sections of a page.</p>
<div class="aria-demo">
<h3>Common Landmark Roles:</h3>
<ul>
<li><strong>banner</strong> - Site-oriented content (typically header)</li>
<li><strong>navigation</strong> - Collection of navigation links</li>
<li><strong>main</strong> - Main content of the page</li>
<li><strong>complementary</strong> - Supporting content (like sidebars)</li>
<li><strong>contentinfo</strong> - Information about the content (typically footer)</li>
<li><strong>search</strong> - Search functionality</li>
</ul>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
<div role="banner" style="padding: 1rem; background: #e8f4fc; border-radius: 4px;">
<h4>Banner</h4>
<p>Site header content</p>
</div>
<div role="navigation" style="padding: 1rem; background: #e8f4fc; border-radius: 4px;">
<h4>Navigation</h4>
<p>Navigation links</p>
</div>
<div role="main" style="padding: 1rem; background: #e8f4fc; border-radius: 4px;">
<h4>Main</h4>
<p>Primary content</p>
</div>
<div role="complementary" style="padding: 1rem; background: #e8f4fc; border-radius: 4px;">
<h4>Complementary</h4>
<p>Supplementary content</p>
</div>
</div>
</div>
</section>
</main>
<footer role="contentinfo">
<p>ARIA Attributes Demonstration &copy; 2023</p>
<p>This page demonstrates various ARIA attributes to improve web accessibility.</p>
</footer>
</div>
<script>
// Tab functionality
const tabs = document.querySelectorAll('.tab');
const tabPanels = document.querySelectorAll('.tab-panel');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Deactivate all tabs
tabs.forEach(t => {
t.setAttribute('aria-selected', 'false');
t.setAttribute('tabindex', '-1');
});
// Hide all panels
tabPanels.forEach(panel => {
panel.setAttribute('aria-hidden', 'true');
});
// Activate clicked tab
tab.setAttribute('aria-selected', 'true');
tab.removeAttribute('tabindex');
// Show corresponding panel
const panelId = tab.getAttribute('aria-controls');
const panel = document.getElementById(panelId);
panel.setAttribute('aria-hidden', 'false');
});
// Keyboard navigation for tabs
tab.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
tab.click();
}
if (e.key === 'ArrowRight') {
e.preventDefault();
const nextTab = tab.nextElementSibling || tabs[0];
nextTab.focus();
nextTab.click();
}
if (e.key === 'ArrowLeft') {
e.preventDefault();
const prevTab = tab.previousElementSibling || tabs[tabs.length - 1];
prevTab.focus();
prevTab.click();
}
});
});
// Live region updates
document.getElementById('polite-btn').addEventListener('click', () => {
const region = document.getElementById('polite-region');
region.textContent = `Polite region updated at ${new Date().toLocaleTimeString()}. 
This update will be announced when the screen reader is idle.`;
});
document.getElementById('assertive-btn').addEventListener('click', () => {
const region = document.getElementById('assertive-region');
region.textContent = `Assertive region updated at ${new Date().toLocaleTimeString()}. 
This update will be announced immediately!`;
});
document.getElementById('off-btn').addEventListener('click', () => {
const region = document.getElementById('off-region');
region.textContent = `Off region updated at ${new Date().toLocaleTimeString()}. 
This update will not be announced to screen readers.`;
});
// Form validation example
const emailInput = document.getElementById('email');
const emailStatus = document.getElementById('email-status');
emailInput.addEventListener('blur', () => {
const email = emailInput.value;
if (email && !isValidEmail(email)) {
emailInput.setAttribute('aria-invalid', 'true');
emailStatus.textContent = 'Please enter a valid email address.';
emailStatus.style.color = '#e74c3c';
} else if (email) {
emailInput.setAttribute('aria-invalid', 'false');
emailStatus.textContent = 'Email format is valid.';
emailStatus.style.color = '#2ecc71';
} else {
emailInput.setAttribute('aria-invalid', 'false');
emailStatus.textContent = '';
}
});
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
// Simulate progress update
setInterval(() => {
const progressBar = document.querySelector('.progress-fill');
const progressValue = document.querySelector('[role="progressbar"]');
let currentValue = parseInt(progressValue.getAttribute('aria-valuenow'));
if (currentValue < 100) {
currentValue += 5;
progressValue.setAttribute('aria-valuenow', currentValue);
progressBar.style.width = `${currentValue}%`;
// Update the live region for screen readers
const liveUpdate = document.querySelector('[aria-live="polite"]');
if (liveUpdate) {
liveUpdate.textContent = `Download is ${currentValue} percent complete`;
}
}
}, 3000);
</script>
</body>
</html>

Key ARIA Features Demonstrated:

  1. Roles - Using role attributes to define element purposes (button, navigation, progressbar, tablist, etc.)
  2. States and Properties:
  • aria-required: Marks required form fields
  • aria-invalid: Indicates validation state
  • aria-describedby: Links elements to their descriptions
  • aria-valuenow/min/max: For progress indicators
  1. Live Regions:
  • aria-live="polite": Updates announced when user is idle
  • aria-live="assertive": Updates announced immediately
  • aria-live="off": Updates not announced
  1. Complex Widgets:
  • Tab interface with proper ARIA attributes
  • Keyboard navigation support
  1. Landmarks:
  • Using role attributes to define page regions (banner, navigation, main, contentinfo)

This example provides a comprehensive overview of how ARIA attributes can be used to create more accessible web interfaces that work well with assistive technologies.

Category : HTML

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper