PWA（Progressive Web Application）是一种新型的 Web 应用开发技术，是一个 Web 应用可以像 Native 应用一样提供离线访问、推送通知、添加到主屏幕等体验。而 WAI-ARIA 是一种 Web 无障碍技术，用于给网页提供完整、语义化的无障碍支持，让残障人士也可以很好的访问页面。
这篇文章主要介绍 PWA 应用如何支持 WAI-ARIA，让 PWA 应用也可以提供无障碍体验。
什么是 WAI-ARIA
WAI-ARIA 是 Web Accessibility Initiative Accessible Rich Internet Applications 的缩写。WAI-ARIA 规范定义了一套方法和属性，用于界面元素的语义化标注，是 Web 技术中的无障碍标准的一部分，让残障人士也可以很好的访问 Web 页面。
WAI-ARIA 标准定义了三个角色：widget、live region 和 document role，widget 主要用于界面中的交互元素，如按钮、输入框、下拉框等，live region 主要用于动态更新的区域，如聊天消息、新闻列表等，document role 主要用于整个页面的语义化标注。
如何在 PWA 应用中支持 WAI-ARIA
为了让 PWA 应用也可以提供无障碍体验，需要在代码中添加 WAI-ARIA 标准的支持。
1. 语义化标注
在 HTML 中，使用语义化标记来标注页面元素的作用和意义。使用语义化标签来表示文本和信息内容，如使用 h1-h6 表示标题等。这样有助于屏幕阅读器读取和理解网页内容。
例如标记一个按钮，要使用 button 标签而不是 div 标签，并添加相应的属性。
<button role="button" aria-label="搜索">Search</button>
2. 使用 ARIA
ARIA（Accessible Rich Internet Applications）是针对一些无法用语义化标签描述的元素，如自定义组件、复杂交互组件等的一套辅助标签。ARIA 相关的标签和属性可以在代码中指示给屏幕阅读器的相关信息。
例如，以下代码中，切换开关按钮是自定义组件，需要设置 role 和相应的 aria-* 属性。
<div role="switch" aria-checked="false" tabindex="0">Toggle</div>
3. 使用 tabindex
tabindex 属性让非交互型元素和文本块变成交互型元素，使这些元素可以被屏幕阅读器读取和聚焦。通过 tabindex 属性可以指定元素的标记顺序，以及在用户操作时的焦点状态。
例如，在以下代码中，用 tabindex 属性为元素添加了聚焦的焦点并指定了 tabindex 的顺序。
<div tabindex="0" role="button">Click Me</div>
示例代码
完整的示例代码如下：
<!-- 按钮 --> <button role="button" aria-label="搜索">Search</button> <!-- 自定义开关 --> <div role="switch" aria-checked="false" tabindex="0">Toggle</div> <!-- 聚焦元素 --> <div tabindex="0" role="button">Click Me</div>
总结
通过语义化标注、ARIA、tabindex 等方式，可以让 PWA 应用也可以提供无障碍体验。开发者在开发 PWA 应用时需要注意这些细节，为残障人士提供更好的访问体验。
同时，由于 PWA 应用与 Native 应用的体验越来越接近，因此这些无障碍体验也将成为 PWA 应用开发的必要要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64536912968c7c53b07d02d7