ARIA Attributes and Screen Readers
Combine Tailwind's sr-only utility with aria-* HTML attributes to provide context for screen readers without affecting visual layout.
How Screen Readers Work
Screen readers are assistive technology software that convert visual content into speech or braille output. They read the accessibility tree — a structured representation of the page derived from the DOM — rather than the visual layout. The accessibility tree includes element roles, names, states, and properties. Tailwind's visual classes affect the DOM, but to communicate correctly with screen readers, you also need proper HTML semantics and ARIA attributes.
Semantic HTML First
Before reaching for ARIA, use semantic HTML elements — they have built-in accessibility roles that screen readers understand without any extra attributes. A <button> is announced as 'button'; an <h1> as a heading level 1; a <nav> as a navigation landmark. Using <div> for everything requires adding ARIA to compensate. The first rule of ARIA is: use semantic HTML if a native element already provides the semantics.
<!-- BAD: div-based — requires ARIA to make accessible -->
<div class='flex items-center gap-2 cursor-pointer' onclick='handleClick()'>
<span class='text-sm'>Submit</span>
</div>
<!-- GOOD: semantic button — accessible by default -->
<button
type='submit'
class='flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg'
>
Submit
</button>
<!-- BAD: no landmark semantics -->
<div class='flex gap-4'>Nav links...</div>
<!-- GOOD: nav landmark -->
<nav class='flex gap-4' aria-label='Main navigation'>Nav links...</nav>All lessons in this course
- Color Contrast and Readable Text
- Focus Indicators and Keyboard Navigation
- ARIA Attributes and Screen Readers
- Accessible Form Components