ARIA 属性与屏幕阅读器
结合 Tailwind 的 sr-only 工具类和 aria-* HTML 属性，为屏幕阅读器提供上下文，同时不影响视觉布局。
ARIA 属性与屏幕阅读器 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「ARIA 属性与屏幕阅读器」课时是免费的吗？
是的 — 「ARIA 属性与屏幕阅读器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「ARIA 属性与屏幕阅读器」这节课中我会学到什么？
结合 Tailwind 的 sr-only 工具类和 aria-* HTML 属性，为屏幕阅读器提供上下文，同时不影响视觉布局。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「ARIA 属性与屏幕阅读器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 颜色对比度与易读文本
- 焦点指示器与键盘导航
- ARIA 属性与屏幕阅读器
- 无障碍表单组件