Atributos ARIA e leitores de tela
Combine a utilidade sr-only do Tailwind com atributos HTML aria-* para fornecer contexto aos leitores de tela sem afetar o layout visual.
Atributos ARIA e leitores de tela é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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>Tailwind's sr-only Utility
Tailwind's sr-only class visually hides content while keeping it accessible to screen readers. It uses a specific CSS technique: a 1×1 pixel clip with overflow hidden and absolute positioning that removes the element from visual layout but keeps it in the accessibility tree. Use sr-only for labels, descriptions, and context that screen reader users need but sighted users get from visual cues.
/* What .sr-only does */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
<!-- Usage: icon buttons need visible labels for screen readers -->
<button class='p-2 rounded-lg hover:bg-gray-100'>
<XMarkIcon class='h-5 w-5 text-gray-700' />
<span class='sr-only'>Close dialog</span>
</button>ARIA Labels and Descriptions
aria-label provides an accessible name when there is no visible text label. Use it for icon-only buttons or elements whose visual label is insufficient. aria-labelledby references the ID of a visible element to use as the accessible name. aria-describedby references an element that provides supplementary context — like an error message or a hint below a form field — that is announced after the element's label.
<!-- aria-label for icon-only button -->
<button aria-label='Open notifications'
class='p-2 rounded-lg hover:bg-gray-100'>
<BellIcon class='h-5 w-5' />
</button>
<!-- aria-labelledby references visible heading -->
<section aria-labelledby='pricing-heading'>
<h2 id='pricing-heading' class='text-2xl font-bold'>Pricing</h2>
{/* screen reader: 'Pricing, region' */}
</section>
<!-- aria-describedby links to help text -->
<div>
<label for='email'>Email</label>
<input id='email' type='email' aria-describedby='email-hint' />
<p id='email-hint' class='text-sm text-gray-500 mt-1'>
We will never share your email.
</p>
</div>ARIA Live Regions
ARIA live regions announce dynamic content changes to screen readers without moving focus. Use aria-live='polite' for non-urgent updates (like search results loading) and aria-live='assertive' for urgent announcements (like error alerts). The content of the live region is announced when it changes. Tailwind classes style the visual container; the accessibility behavior comes entirely from the ARIA attribute.
<!-- Polite: announced after current announcement finishes -->
<div
aria-live='polite'
aria-atomic='true'
class='sr-only' {/* screen reader only — no visual display */}
>
{searchStatus} {/* e.g., 'Loading results...' or '12 results found' */}
</div>
<!-- Assertive: interrupts current announcement -->
<div
aria-live='assertive'
role='alert'
class='fixed top-4 right-4 bg-red-50 border border-red-200 p-4 rounded-lg'
>
{errorMessage}
</div>ARIA Roles for Custom Components
When you build custom interactive components with non-semantic HTML (like a div-based combobox or a custom toggle), add the appropriate ARIA role to communicate what the element is. Common roles include button, checkbox, combobox, listbox, option, tab, tabpanel, dialog, and alert. The role defines the implicit keyboard contract and what states are meaningful for that element type.
<!-- Custom toggle switch -->
<div
role='switch'
aria-checked={enabled}
tabIndex={0}
onKeyDown={(e) => e.key === 'Enter' && toggle()}
onClick={toggle}
class={cn(
'relative inline-flex h-6 w-11 items-center rounded-full cursor-pointer',
'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2',
enabled ? 'bg-blue-600' : 'bg-gray-300'
)}
>
<span class='sr-only'>{enabled ? 'Enabled' : 'Disabled'}</span>
<span class={cn('inline-block h-4 w-4 rounded-full bg-white transition-transform',
enabled ? 'translate-x-6' : 'translate-x-1'
)} />
</div>ARIA States and Properties
ARIA states (aria-checked, aria-expanded, aria-selected, aria-disabled) communicate the current interactive state of an element. Update these programmatically to keep the accessibility tree in sync with visual state. If a disclosure section expands, set aria-expanded='true' on the trigger. If a list item is selected, set aria-selected='true'. Screen readers announce these state changes as the user interacts.
function AccordionItem({ title, content }) {
const [expanded, setExpanded] = useState(false);
const contentId = 'accordion-content-' + title.replace(/\s/g, '-');
return (
<div class='border-b border-gray-200'>
<button
onClick={() => setExpanded(!expanded)}
aria-expanded={expanded}
aria-controls={contentId}
class='flex w-full justify-between items-center py-4 text-left'
>
{title}
<ChevronDownIcon class={cn('h-5 w-5 transition-transform', expanded && 'rotate-180')} />
</button>
<div
id={contentId}
hidden={!expanded}
class='pb-4 text-gray-600 text-sm leading-relaxed'
>
{content}
</div>
</div>
);
}Hiding Decorative Content From Screen Readers
Not all visual content should be announced to screen readers. Decorative images, icon duplicates (when text already provides the meaning), and layout elements should be hidden from the accessibility tree. Use aria-hidden='true' to remove an element from the tree without hiding it visually. Never add aria-hidden='true' to elements that contain or are related to keyboard-focusable elements.
<!-- Decorative image: hide from screen reader -->
<img
src='/decorative-pattern.svg'
alt='' {/* empty alt = decorative */}
class='absolute inset-0 opacity-5'
aria-hidden='true'
/>
<!-- Icon alongside text: icon is decorative -->
<button class='flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg'>
<SaveIcon class='h-4 w-4' aria-hidden='true' />
Save Changes {/* text label is sufficient */}
</button>
<!-- Spinner: decorative, but announce loading state differently -->
<button disabled aria-busy='true'>
<span aria-hidden='true' class='animate-spin'>...</span>
<span class='sr-only'>Saving...</span>
</button>Landmark Regions for Screen Reader Navigation
Landmark roles allow screen reader users to jump directly to major page sections. The HTML5 semantic elements <main>, <nav>, <header>, <footer>, <aside>, and <section> (with a name) automatically create landmark regions. When you have multiple <nav> elements, distinguish them with aria-label so screen reader users can navigate to the correct one.
<body class='min-h-screen flex flex-col'>
{/* banner landmark */}
<header class='bg-white border-b border-gray-200'>
<nav aria-label='Main navigation' class='flex gap-6 px-6 h-16 items-center'>
{/* nav links */}
</nav>
</header>
<div class='flex flex-1'>
{/* complementary landmark */}
<aside class='w-64 border-r border-gray-200' aria-label='Sidebar'>
<nav aria-label='Section navigation'>{/* sidebar links */}</nav>
</aside>
{/* main landmark */}
<main class='flex-1 p-8'>{/* page content */}</main>
</div>
{/* contentinfo landmark */}
<footer class='bg-gray-50 border-t border-gray-200 py-8'>
{/* footer content */}
</footer>
</body>Visually Hidden Focus Announcements
Some UI patterns require screen reader announcements that have no visual counterpart. For example, after a form submits successfully, moving focus to a sr-only heading that reads 'Form submitted successfully' is a clean pattern that informs screen reader users without changing the visual UI. Combine sr-only with a tabIndex={-1} ref that receives programmatic focus.
// After form submit, announce result to screen readers
function SubmitForm() {
const [submitted, setSubmitted] = useState(false);
const statusRef = useRef(null);
const handleSubmit = async (e) => {
e.preventDefault();
await submitForm();
setSubmitted(true);
// Move focus to the sr-only status message
statusRef.current?.focus();
};
return (
<form onSubmit={handleSubmit}>
{submitted && (
<p
ref={statusRef}
tabIndex={-1}
class='sr-only'
>
Your form was submitted successfully. We will be in touch.
</p>
)}
{/* form fields */}
<button type='submit'>Submit</button>
</form>
);
}Automated Screen Reader Testing
While there is no substitute for testing with a real screen reader (NVDA on Windows, VoiceOver on macOS/iOS, TalkBack on Android), automated tools catch many common issues. axe-core checks for missing ARIA labels, invalid role usage, and inaccessible color contrast. Integrate it into your CI pipeline using jest-axe for component tests or axe-playwright for end-to-end tests.
// jest-axe: test individual React components
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('Button has no accessibility violations', async () => {
const { container } = render(
<button class='px-4 py-2 bg-blue-600 text-white rounded'>
Submit
</button>
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
test('Icon button has accessible label', async () => {
const { container } = render(
<button aria-label='Close dialog'>
<XMarkIcon class='h-5 w-5' />
</button>
);
expect(await axe(container)).toHaveNoViolations();
});Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: sr-only hides content visually while keeping it accessible to screen readers, ARIA labels, roles, and states augment custom components with accessibility semantics, and aria-live regions announce dynamic content changes without moving focus. Next up we apply all accessibility techniques to build accessible form components.
Perguntas Frequentes
A aula “Atributos ARIA e leitores de tela” é grátis?
Sim — o texto completo de “Atributos ARIA e leitores de tela” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Atributos ARIA e leitores de tela”?
Combine a utilidade sr-only do Tailwind com atributos HTML aria-* para fornecer contexto aos leitores de tela sem afetar o layout visual. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Atributos ARIA e leitores de tela”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Contraste de cores e texto legível
- Indicadores de foco e navegação pelo teclado
- Atributos ARIA e leitores de tela
- Componentes de formulário acessíveis