在可访问性领域经常看到的一个问题是“我正在使用这个框架,我怎么知道它是否可以访问?”。这当然是一个非常开放的问题,比“是”或“否”更难回答。为了完全回答这个问题,我们必须从可访问性的角度列出每个单独的 JavaScript 框架为我们提供的所有功能,并比较它们中的每一个。

每个 JavaScript 框架都有自己独特的优点和缺点,用于在可访问性之外使用框架。本文无意从可访问性的角度分享每个框架的缺点列表,只是因为缺点都相对相同,并且大问题在本系列的第 1 部分中有详细说明!

这篇文章也不是要让你使用一个框架而不是另一个框架。它只是为每个框架的开发人员提供信息,以了解可用的可访问性选项。使用哪个比较和决定取决于您!

比较每个框架

比较每个框架的可访问性的最佳方法是查看 3 个主要项目。什么是开箱即用的功能、文档以及使用该框架可能提供的任何其他好处。

反应

[](https://res.cloudinary.com/practicaldev/image/fetch/s--QOqWDzvQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/1nu30ivivvv2jamrjbjm.png)

React 是市场上最开放的 JavaScript 框架。它不强制执行通用项目结构,并且有许多不同的用途。由于它如此开放,从可访问性的角度来看,它可能会遇到挑战,但也为它提供了许多选项来使应用程序在其中可访问。

React 辅助功能

由于开放的性质,React 没有提供许多开箱即用的可访问性功能。但这里有主要特点:

• 允许使用 来保持 HTML 语义

• 易于使用组件生命周期进行焦点管理

• 允许使用htmlFor属性进行语义标注

React 可访问性文档

React 的可访问性文档到处都是,可能会更详细一些。它将一些细节放入可访问的表格、焦点控制以及标题和语言的几篇短文中。但最大的缺点是他们将关于 ARIA 使用的部分放在语义 HTML 的使用之上。

其他反应津贴

React 将看到其最大的可访问性优势来自所有有助于使可访问性更容易的开源库。以下是 React 的其他一些好处:

• 构建和支持开源库的大型可访问性社区

• ESLint JSX 插件

• React Document Title包,允许简单的页面标题

• React modal非常方便

• 提供可访问的 aria-live 区域的直播播音员包

• 种类繁多的可访问性优先 UI 库

• 注意:请阅读A Word of Caution关于可访问的框架

角度

[](https://res.cloudinary.com/practicaldev/image/fetch/s--s-JpEv1I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// angular.io/assets/images/logos/angularjs/AngularJS-Shield.svg)

Angular 比 React 更结构化,更不开放。 Angular 将项目分解为模块、组件和服务。它促成了结构化开发,可以导致更强制的 Web 编码实践,这反过来又可以帮助在其中创建的内容更易于访问。

角辅助功能

Angular 有许多开箱即用的可访问性功能,您可以使用它们。这里是其中的一些:

• 标题服务,可让您设置标题

• 使用强制语义 HTML 实践的 HTML 文件

• 易于使用组件生命周期进行焦点管理

• 可以利用NavigationEnd路由器事件设置焦点

• 可以绑定 ARIA 属性

Angular 可访问性文档

从对可访问性的整体理解来看,Angular 的可访问性文档非常棒,因为它链接到 google 的可访问性文档。但是,关于 Angular 和可访问性的文档非常缺乏。

它指出了 Material UI 的使用,它具有一些良好的可访问性工具,但作为一个框架并不是最易于访问的。对于语义 HTML 的使用以及开箱即用的功能,它也没有深入研究。

其他角度津贴

Angular 不像 React 甚至 Vue 那样开放,因此没有很多额外的附加组件,但是它确实有一个主要的包可以帮助实现可访问性:

• Angular Material A11y SDK具有以下特点:

• 在模态中捕获焦点的插件

• 现场播音员插件

*高对比度模式样式

• ESLint for Angular 有多个可访问性规则

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KTbbK_aS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vuejs. org/images/logo.png)

Vue 是 React 和 Angular 的完美结合。不像 React 那样开放,但也不像 Angular 那样严格。 Vue 更侧重于 Model-View-Controller 概念的 View 层。所有 CSS、JavaScript 和 HTML 都在一个 Vue 文件中完成。

Vue 辅助功能

Vue 有几个开箱即用的不同功能,从可访问性的角度来看,它在您获得的东西方面非常独特:

• Mixins 使在页面上轻松创建标题

• Vue 路由器为页面导航提供更易于访问的路由

• CSS、JS、HTML 在一个文件中有助于加强语义

Vue 可访问性文档

Vue 的可访问性文档实际上很好地组合在一起。它提供了有关如何使用跳过链接以及页面内容结构的实用设计模式。它还强调语义 HTML 而不是 ARIA,这太棒了!它仍然有点短,但是它为用户提供的信息非常有效。

其他 Vue 特权

Vue 有一个相当大的可访问性社区,该社区创建了许多用于可访问性的插件和附加组件,例如:

• Vue-A11y-Utils包包含有用的辅助功能

• Vue-Announcer是一个完全可访问的直播区域

• 包含许多可访问的框架,例如Vuetify

• Vue 焦点陷阱在模式和菜单中捕获焦点的包

余烬

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Ej1fcllv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://upload. wikimedia.org/wikipedia/commons/2/27/Ember-logo.png)

Ember 是一个非常易于使用且功能强大的 JavaScript 框架,可让您创建结构化的 Web 应用程序。拥有一些最好的文档和一个非常活跃的社区,它是一个很棒的 JavaScript 框架。

Ember 辅助功能

Ember 很可能带有所有其他框架中最内置的可访问性选项:

• 能够为应用程序创建默认语言

• Ember-page-title 服务允许简单的标题设置

• 路由中的焦点管理插件

• 一致的结构使语义 HTML 的执行更加严格

Ember 辅助功能文档

与任何其他 JavaScript 框架相比,Ember 拥有最好的文档。它列出了应用程序注意事项、模板注意事项、测试注意事项和大量额外资源。在 ember 中创建可访问的应用程序非常容易阅读和遵循

其他 Ember 特权

有了这样一个活跃的社区,Ember 拥有大量额外的附加组件,可用于增加应用程序的可访问性:

• Ember-a11y-landmarks帮助您的应用程序中的地标角色

• Ember-component-focus帮助您管理组件和页面中的焦点

• Ember-keyboard可轻松支持键盘事件

• A11y-Announcer当页面改变时通告

• 包含可访问性规则的 Linter

苗条

[](https://res.cloudinary.com/practicaldev/image/fetch/s--JrfI0yW4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://upload. wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/199px-Svelte_Logo.svg.png)

Svelte 是 JavaScript 框架市场的新成员,但对市场产生了非常重大的影响。 Svelte 是一个基于组件的框架,重量轻且非常易于使用。它还通过具有几个漂亮的可访问性功能的可访问性社区创建了一个利基市场

Svelte 辅助功能

• 内置于框架中的可访问性 linter,在您编码时建议修复!

• CSS、JS、HTML 在一个文件中有助于加强语义

• 非常简单的组件生命周期来管理焦点

Svelte 辅助功能文档

可访问性文档几乎基于可访问性警告部分。这涵盖了从可访问性角度进行的所有检查。除此之外,他们的文档中没有更多提及可访问性。

其他 Svelte Perks

从可访问性的角度来看,Svelte 确实有一些额外的插件可以提供帮助:

• 可访问的 Svelte具有可访问的组件

• Svelte-accessible-dialog为应用程序提供可访问的模式

总结

如您所见,每个框架都有自己独特的功能和可访问性附加组件,您可以使用它们来使您的应用程序可访问。

尽管本文列出了您可以使用的所有不同工具,但您将拥有的最佳工具是您和您的开发团队,只需对您创建的内容给予该死,并将可访问性作为您开发的优先事项!