【前言】
随着 Web 技术的不断进步，Web Components 成为继 React、Vue 等现代化前端框架之后广受关注的前端技术。但这项技术除了提供更好的组件复用性、拆分性之外，还有一项如此重要却被忽略的需求 - 无障碍性，即我们所说的“辅助阅读”。
无障碍性是指让 Web 应用程序较易于被身体残障人士使用。由于残障群体的多样性，无障碍技术需实现的场景也多元化，而本篇文章将围绕 Web Components 的无障碍性需求进行讨论，并提供实现方案。
【无障碍需求】
无障碍需求的核心目的是让残障人士能够访问和使用 Web Components，而三个最常见的无障碍需求是：
- 可访问性标准规范
- 焦点管理
- ARIA 支持
【可访问性标准规范】
可访问性标准规范被广泛地使用与推广，是有助于 Web 开发者开发出较易使用、高度无障碍的 Web 应用程序的指南。其中两个最广泛使用的工具是 WCAG（Web Content Accessibility Guidelines）和 WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）。WCAG 让开发人员更好地了解无障碍性的基本原则，而 WAI-ARIA 则提供了一组可移植的实现方法，以便将这些原理应用到 Web 应用程序。
【焦点管理】
焦点管理越来越显著地融入无障碍技术领域，它提供了一个可枚举和可预知的方式来导航和交互 Web 应用程序，为除视觉方式之外的所有访问方式（例如键盘导航）提供了路由和交互方法。
为实现焦点管理，我们可以利用 Shadow DOM。基于 Shadow DOM 的 Web Component 不仅使其部分外部 DOM 范围无法访问，而且将其内部信息流（包括焦点聚焦）限制在一个浏览器引擎既定的封闭 DOM 隔离域之内。这保证了 Web Components 内部防止外部 DOM 中操作发生冲突，从而更容易地管理焦点。
【ARIA 支持】
ARIA（Accessible Rich Internet Applications）指的是可访问的富 Internet 应用程序，是不难实现的。在 Web Components 内部实现 ARIA 支持，通过给父组件和子组件添加其 ARIA 角色以及属性，从而使得 Assistive Technology（协助工具）能够更好地识别和获取组件的语义信息，进而向用户表达任务的类型、状态和操作方式。比如，我们可以在组件根节点上通过 ARIA 属性设置它的角色类型：
// In a WC HTML file <div role="myWidget" id="myWidget"> <div role="label">My Label</div> <button role="button">Example Button</button> </div>
关于更多 ARIA 角色及属性可参照 WAI-ARIA 规范。
【实现方案】
下面给出一些 Web Components 无障碍性方案的实现方式。
【焦点管理方案】
对于具有内部防止外部操作干扰的 Style DOM 的 Web Components，我们推荐使用 focusin 和 focusout 事件来处理焦点管理。考虑到组件可能不断地插入和删除，因此我们需要订阅这些事件，以便跟踪可聚焦和可操作元素的列表。
以下示例实现了一个具有焦点管理的 Web Component：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- ---------------- - ----- --------------- - ----- --------------- - -- -- - -- ----------------- ---------- ------------ - -- ---------------------------------------------------- - ------------------------- - --------------- - ----------------------- - -- ---------------- - -- -- - -- ----------------- ---------- ----------- -- --------------- --- ----------------------- - ------------------------ - -- - ------------------- - ----------------------------- ----- -------------------------------- ----------------- --------------------------------- ------------------ - ---------------------- - ----------------------------------- ----------------- ------------------------------------ ------------------ - ------ --- -------------------- - ------ ------------- - ------------------------------ ------- ------- - -- ----- --- ----------- - ---------------- - -------------------------------- - - - --------------------------------------- -----------------展开代码
【ARIA 支持方案】
关于 Web Components 内部如何实现 ARIA，最佳的实践是添加适当的角色、属性和关系，以通过 Assistive Technology 的诸多需求来表现组件信息。例如，可以为自定义标签添加特定角色：
<!-- In your HTML file --> <my-element role="button" aria-label="A custom button tag" tabindex="0"></my-element>
可以为各个自定义标签添加特定关系，以便 Assistive Technology 能够识别它们:
-- -------------------- ---- ------- ---- -- ---- ---- ---- --- -------- -------- ------------ ----------- ---------------------- ----------------------------------- --------- ------ --- ------- ---------- ------------- ----------- ---------------- --------------------展开代码
其中，aria-controls 表示该组件直接控制的区域；aria-expanded 表示该组件是否已展开。
同时，还要注意在元素状态变化时，动态地添加或移除适当的角色和属性。
以上是 Web Components 中的无障碍性需求及其实现方案的简要讨论，需要注意的是，在给 Web Components 添加无障碍性支持时，我们应该以最终用户为中心，可以通过使用工具和辅助应用程序，考虑访问 Web 应用程序的多种方式，以确保它对所有用户都是可用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bebc390c976d473a2ee0ed
