--- theme: smartblue --- 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，[点击查看活动详情](https://juejin.cn/post/7123120819437322247)。 # 背景之前公司要求我们所有网页必须实现无障碍适配，有幸接触了下「无障碍适配」。上篇文章介绍了[《什么是无障碍适配？》](https://juejin.cn/post/7132875364497358861)，推荐大家先读一下。今天我给大家介绍，前端开发者如何实现无障碍适配。 # 1. 认识ARIA 你需要了解一下[ARIA](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA)。 **ARIA** (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。 > **警告：** 许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，**开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA**。例如，原生元素具有内置的[键盘可访问性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。 ## 常见的属性这里列举了2个最常用的属性。更多属性，建议你去阅读官方文档，浏览一遍，看看都有什么属性，到时候有需要了，再去详查用法：[ARIA相关属性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques)。 ### aria-label [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label)，给元素设置一段描述性的文字，可以由屏幕阅读器读出，它内部的文字将被忽略。 ```html

你好，我是HullQin。

``` 上方这个div被选中时，屏幕阅读器会播报「你好，我是HullQin」。 ```html

你好，我是HullQin。

``` 上方这个div被选中时，屏幕阅读器会播报「HullQin的自我介绍」，而不会播报「你好，我是HullQin」。 ### role="button" [`role="button"`](https://www.w3.org/TR/wai-aria-1.1/#button)，将元素标记为按钮，。 ```html

哈哈

``` 上方这个div被选中时，屏幕阅读器会播报「哈哈，按钮」。但是没有role这个属性时，只会播报「哈哈」，视障用户并不知道它可以被点击。 # 2. 尽量使用Html5语义化标签在body中正确使用这些标签： [`

`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header)，[`