HTML 可访问性：无障碍网页
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 Web 可访问性 (A11y)，确保网站对所有用户可用。
可访问性不仅是道德要求，在很多国家也是法律要求。
你将学到：
- 使用
role属性定义元素角色 - 使用
aria-*属性增强语义 - 确保键盘可访问性
- 为屏幕阅读器优化内容
Intermediate⏱ 25-30 min
Learning Objectives
- 理解 ARIA 角色和属性
- 掌握键盘导航实现
- 学会为图片和控件添加标签
- 了解屏幕阅读器工作原理
Scenario
你正在优化一个导航菜单和卡片组件的可访问性。
需要确保：
- 屏幕阅读器能正确朗读内容
- 键盘用户能顺畅操作
- 所有交互元素都有明确标签
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5A11yARIAAccessibility