role button alert dialog and landmark
Apply ARIA roles to communicate element purpose to assistive tech.
role=button
Use role="button" when a non-button element must act as a button (rare):
<span
role="button"
tabindex="0"
onclick="handleClick()"
onkeydown="e.key==='Enter'||e.key===' ' ? handleClick() : null"
aria-pressed="false"
>
Toggle Feature
</span>
<!-- Better: use a real <button> element! -->
<!-- Only use role="button" when you cannot change the HTML element -->role=alert
role="alert" announces content changes immediately to screen readers:
<div role="alert" id="error-msg"></div>
<script>
// When injecting an error:
document.getElementById('error-msg').textContent = 'Invalid email address.';
// Screen readers announce this immediately without the user moving focus
// role="alert" implies aria-live="assertive" aria-atomic="true"
</script>All lessons in this course
- When to Use ARIA vs Native HTML
- role button alert dialog and landmark
- aria-label aria-labelledby and aria-describedby
- aria-hidden and aria-live