Attributi ARIA e screen reader
Combini l'utility sr-only di Tailwind con gli attributi HTML aria-* per fornire contesto agli screen reader senza influire sul layout visivo.
Attributi ARIA e screen reader è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Attributi ARIA e screen reader» è gratuita?
Sì — il testo completo di «Attributi ARIA e screen reader» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Attributi ARIA e screen reader»?
Combini l'utility sr-only di Tailwind con gli attributi HTML aria-* per fornire contesto agli screen reader senza influire sul layout visivo. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Attributi ARIA e screen reader»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Contrasto dei colori e testo leggibile
- Indicatori di focus e navigazione da tastiera
- Attributi ARIA e screen reader
- Componenti di form accessibili