Intermediate LevelHTML & Semantic Web
How do WAI-ARIA roles complement native HTML elements for accessibility?
❓ Interview Prompt: Explain WAI-ARIA roles (role="dialog", role="navigation", role="alert"), First Rule of ARIA, and Accessibility Tree enhancements.
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) attributes enhance accessibility when native HTML elements are insufficient for complex interactive widgets.
The First Rule of ARIA:
Do NOT use ARIA if a native HTML element already exists! (Use '<button>' instead of '<div role="button">').
Valid ARIA Use Cases:
Use ARIA roles ('role="dialog"', 'role="alert"', 'aria-expanded="true"') for custom JavaScript UI widgets (modals, tooltips, tab panels) to communicate state to screen readers.
Code Implementation Example
html
<!-- ✅ Custom accessible tabs widget using ARIA roles -->
<div role="tablist" aria-label="Account Settings">
<button role="tab" aria-selected="true" aria-controls="panel-1">Profile</button>
<button role="tab" aria-selected="false" aria-controls="panel-2">Security</button>
</div>💡Accessible custom tabs widget using ARIA role and state attributes.
🎯 Interview Key Takeaway
Follow the First Rule of ARIA: prefer native HTML5 semantic tags over ARIA roles whenever native elements exist.
#ARIA#a11y#Accessibility Tree#Intermediate
Back to all HTML & Semantic Web Questions→