搭出来的，但通过role=”menu”、aria-expanded=”true/false”这样的ARIA属性，我们就能告诉屏幕阅读器：“这货其实是个菜单，它现在是展开还是收起状态。”这就像给你的房子里那些没挂牌的房间，补上“厨房”、“卧室”的标识。但切记，ARIA是“补充”，能用原生HTML解决的，就别瞎用ARIA。
图片和多媒体内容的替代文本（alt属性）是老生常谈，但却是最容易被忽视的细节。一张没有alt的图片，对视障用户来说就是空气，他们完全不知道那里有什么。所以，描述图片内容，更重要的是描述图片 目的，比如一个按钮图片，alt应该写“提交订单”，而不是“蓝色方块”。视频和音频，提供字幕或文字稿，这不仅帮到视障用户，对听障或在嘈杂环境下观看的用户也同样有益。
别忘了键盘可访问性。很多视障用户依赖键盘操作，所以确保所有可交互元素（链接、按钮、表单控件）都能通过Tab键聚焦，并且有清晰的焦点指示（outline样式），这至关重要。而且，焦点顺序要符合逻辑，不能跳来跳去。表单的label与input关联起来，错误提示要能被屏幕阅读器读到，这些都是细节，但决定了用户体验的生死。
<!-- 语义化示例 --> <header> <nav> <ul> <li><a href="#main">跳过导航，直达内容</a></li> <li><a href="/">首页</a></li> <li><a href="/about">关于我们</a></li> </ul> </nav> </header> <main id="main"> <h1>欢迎来到我的博客</h1> <article> <h2>HTML无障碍实践</h2> <p>这是文章内容。</p> @@##@@ </article> </main> <footer> <p>© 2023 我的网站</p> </footer> <!-- ARIA示例 --> <button aria-expanded="false" aria-controls="menu-panel"> 菜单 </button> <div id="menu-panel" role="menu" aria-hidden="true"> <a href="#" role="menuitem">选项1</a> <a href="#" role="menuitem">选项2</a> </div>
为什么语义化HTML对视障用户如此重要？
我觉得，谈到无障碍，语义化HTML绝对是第一步，也是最关键的一步。它不仅仅是让你的代码看起来更“规范”，更深层次的意义在于，它为屏幕阅读器提供了一份清晰的“地图”。你想想，一个视障用户，他无法通过视觉快速浏览页面的布局，无法一眼看出哪里是导航、哪里是主要内容、哪里是页脚。他们依赖屏幕阅读器将页面内容“读”出来。
如果你的HTML充斥着大量的div和span，而没有使用header、nav、main、article、section、aside、footer这些具有明确语义的标签，那么屏幕阅读器就只能按照dom的顺序，机械地将所有文本内容一股脑地读出来。这就像你走进一个没有房间标识的房子，你根本不知道哪里是客厅、哪里是卧室，只能挨个摸索。而语义化标签，就相当于给这些“房间”挂上了明确的门牌。屏幕阅读器可以识别这些门牌，并提供快捷键让用户直接跳到导航区、主要内容区，甚至直接跳过某个不感兴趣的区块。这极大地提升了他们的浏览效率和理解能力，从“摸索”变成了“导航”。对我而言，这不仅仅是技术规范，更是一种对用户体验的深刻理解和尊重。
除了语义化标签，ARIA属性在无障碍设计中扮演什么角色？
语义化HTML固然重要，但它并非万能。我们现在的前端应用越来越复杂，很多交互组件都是用JavaScript动态生成的，或者压根就没有对应的原生HTML标签（比如一个自定义的滑块或者手风琴组件）。这时候，WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）就登场了，它就像是语义化HTML的“超级外挂”或者“补丁包”。
ARIA属性的主要作用是为那些无法通过原生HTML表达语义、状态或属性的元素，提供额外的无障碍信息。举个例子，你可能用一个div做了一个可展开收起的菜单，视觉上我们知道它是个菜单，并且能看到它的展开状态。但对于屏幕阅读器，它只是一个普通的div。这时，我们可以给这个div加上role=”menu”来声明它的角色，再用aria-expanded=”true/false”来指示它的展开/收起状态，甚至用aria-controls来关联它控制的面板。这样，屏幕阅读器就能准确地告诉用户：“这是一个菜单，目前是展开状态。”
不过，这里有个黄金法则，叫做“能用原生HTML就不用ARIA”。如果你可以用一个
如何确保图片和交互元素对视障用户友好？
图片和交互元素，是构建丰富网页体验的关键，但它们也常常是无障碍设计中最容易“翻车”的地方。
对于图片，最直接也最有效的办法就是使用alt属性。但这里的学问可大了，不是随便写几个字就行。一个好的alt文本，应该简洁地描述图片的内容，更重要的是，要传达图片在当前语境下的 目的 或 信息。如果图片是纯装饰性的，比如一个背景纹理，那么alt=””（空字符串）是最好的选择，告诉屏幕阅读器直接忽略它。如果图片是一个图表，alt可能需要描述图表的主要趋势或结论，或者引导用户去阅读旁边的详细数据。比如，一张展示销售额增长的图，alt写“2023年销售额持续增长的柱状图”，比“蓝色的柱状图”更有意义。
至于交互元素，比如按钮、链接、表单输入框等，核心在于“键盘可访问性”和“清晰的反馈”。视障用户很多时候是完全依赖键盘进行操作的。这意味着：
- Tab键可达性： 所有可点击、可操作的元素都应该能通过Tab键按顺序遍历到。默认的、
- 焦点指示： 当元素被Tab键聚焦时，必须有一个清晰的视觉反馈（比如默认的蓝色边框，或者自定义的outline样式），让用户知道当前焦点在哪里。我见过很多设计师为了“美观”直接移除outline，这简直是无障碍的灾难。
- 逻辑焦点顺序： Tab键的遍历顺序应该符合页面的阅读顺序和操作逻辑。如果顺序混乱，用户会感到非常困惑。
- 表单元素： label标签必须与对应的input元素通过for和id属性关联起来，这样屏幕阅读器在用户聚焦输入框时，就能读出它的标签。错误提示也应该被清晰地关联到对应的输入框，并且能够被屏幕阅读器识别。
这些看似细微的调整，却能极大地提升视障用户与网站的互动体验。毕竟，一个无法操作的网站，再美观也毫无意义。
