使用像 angularjs 这样的框架对可访问性有什么影响？答案

【问题标题】：What are the accessibility implications of using a framework like angularjs?使用像 angularjs 这样的框架对可访问性有什么影响？
【发布时间】：2013-09-22 02:07:21
【问题描述】：

我们的立场

我们正在推动网络可访问性，以符合某些管理公共/教育机构的法律。到目前为止，我们一直在确保：

我们的布局在逻辑上是有序的；
图片有alt=""标签。但我们很快了解到我们需要做好准备并认真考虑这一点。

我们正在考虑什么

我们一直将 AngularJS 视为动态 Web 应用程序的框架，但担心它对我们的可访问性地位可能意味着什么。

我了解没有 JavaScript 的浏览器可能会破坏高度动态的 Angular 应用程序（例如，嵌入在标记中的 {{ item.something }} 等表达式，使用 ng-repeat 从单个 <li> 构建列表，客户端部分视图为空标签等）。

问题

我想知道对于这些严重依赖动态标记和内联标记的框架是否有很好理解的最佳实践或信息资源，这些框架可能会被视为胡言乱语比如屏幕阅读器，甚至是关闭 JavaScript 和 CSS 的浏览器。

【问题讨论】：

从在学校研究 WAI 的东西开始，我还记得他们的规范有很多旨在让屏幕阅读器理解动态的、基于 AJAX 的 Web 应用程序的功能。（例如，您可以将元素标记为内容会动态变化的元素，以便屏幕阅读器会观察它的变化。）通常，WAI 的东西应该是您正在寻找的资源：@987654321@
浏览器是否支持 Javascript 无关紧要。当浏览器功能被禁用时，我们必须构建我们的站点以优雅地回退。 Javascript 可以根据用户的意愿打开或关闭，因此我们不能假设他们总是会打开它。实际上，所指出的文章建议在构建 Web 应用程序时考虑这一点。
换一种说法：让屏幕阅读器用户可以访问网站与让禁用 Javascript 的用户可以使用网站是完全不同的问题。对于前者：阅读 WCAG，应用广泛支持的 WAI-ARIA 属性，或等效的 hack。（即关注内容动态变化的元素。）对于后者：不要使用任何 Javascript，或使用渐进增强技术添加它。（A List Apart 很乐意为您提供有关该主题的大量文章。）
需要注意的一点：“渐进式增强”与“优雅后备”不同——它们是解决同一问题的不同方法。如今，前者似乎拥有更大的思想份额。（即，您从一个功能齐全的服务器端应用程序开始，并添加用户客户端上可用的动态行为。例如，用 AJAX 提交替换常规表单提交，为所有绝对需要 Javascript 的功能动态添加 UI 元素等）见：docs.webplatform.org/wiki/tutorials/…
即使在今天，也有一些主流屏幕阅读器不支持或对 JavaScript 的支持非常有限。网站“可访问”和“无需 JavaScript 即可工作”不是两个独立的东西。这并不意味着您必须打开和关闭完整的奇偶校验 JavaScript。显然，你能提供的体验总是会随着 JS 的开启而更加丰富。但是，所有关键任务至少应该在没有 JS 的情况下运行，否则你非常搞砸了你的一些用户。

标签： javascript angularjs accessibility

【解决方案1】：

所有相同的原则都适用，例如对图像使用替代文本、充分利用标题、对内容使用适当的 HTML(5) 结构。

您可能正在通过 JavaScript 创建它，但过去约 5 年的屏幕阅读器理解这一点，并使用浏览器的辅助功能 API 来访问 DOM。非 JavaScript 方面是 simply not an accessibility issue。没有 JavaScript 的屏幕阅读器用户的数量与一般人群相同，因此它给人的印象是完整的 HTML，而不是您在开发中看到的原始标记。

注意：我认为渐进式增强是一种很好的方法，但是对于 Angular.js，您预先决定不采用这种方法。如果你想了解性能和渐进增强，我想this answered it。

当然，您不会使用 Angular.js 来创建标准内容页面，因此您需要了解WAI-ARIA specification 和how to use ARIA in HTML 的速度。指定如何动态标记传统 HTML 实践未涵盖的内容，例如选项卡、树、网格等。

有关 WAI ARIA 技术在实践中的实际示例，我想看看 Whatsock technical style guide。

与传统网站相比的一个区别是how you manage page updates，因为您管理键盘焦点而不是刷新页面。但除此之外，WAI-ARIA 还是值得一读的。

【讨论】：

虽然这些 cmets 都对 Angular.js 有效，但其中很少有像 Angular 这样的框架所独有的。 jQueryUI、jQuery Mobile 和纯 JavaScript 都存在同样的问题。
同意，但是这个问题被问到了，而且 Angular 确实假设您忽略了渐进增强，而 jQuery 没有。

【解决方案2】：

传统上，Angular 不鼓励开发人员以“正确的方式”编写用户界面——创建不可访问的自定义元素指令（例如 div 上的 ngClick）太容易了，并且没有提供可访问性支持。然而，随着 Angular 1.3x 和 ngAria 模块的发布，它得到了改进。现在，通过在您的应用程序中包含 ngAria，某些 ARIA 属性会自动应用，因此您不必管理它们。

例如，ngClick 指令现在应用了tabIndex="0" 和ngKeypress（只要这些选项未被禁用），因此创建不可访问的点击事件并不那么容易。 ngAria 还将很快添加role="button" 来传达可点击元素的目的：这可以被其他角色覆盖。有关更多信息，请参阅此拉取请求：https://github.com/angular/angular.js/pull/10318

ngAria 可以提供帮助的另一种方法是将aria-disabled 添加到ng-disabled 的任何使用中。这样可以确保默认情况下可以访问被框架禁用的自定义控件，例如：

<md-button ng-disabled="true">

使用 ngAria，这变成：

<md-button ng-disabled="true" aria-disabled="true">

有关受支持属性的完整列表，请参阅 ngAria API 文档：https://docs.angularjs.org/api/ngAria

ngAria 将继续发展（我希望它只是被烘焙而不是模块），但很高兴看到可访问性 finally supported by the core framework。

我们每个人仍然需要牢记可访问性并负责任地编写代码，但 Angular 不应再成为您的障碍。 Alistair 对这个问题的回答有很棒的资源：我肯定会参考那些关于键盘焦点管理、在 HTML 中使用 ARIA 等的技巧。你也可以参考新的 Angular.js 开发者指南 ngAria：https://docs.angularjs.org/guide/accessibility

还有一件事：如果有人对 ngAria 有想法，请务必创建一个 Github 问题或提交拉取请求！这是一项由社区推动的工作。

【讨论】：

感谢您的解释。我发现了这个问题，因为我偶然发现了一个网站，其中基本浏览器功能“在新窗口/标签中打开链接”被破坏了，因为网站设计师将ngClick 放在了span 元素上，而普通链接将是完美的。他们确实使用了 tabIndex，role 但这一切并没有使它成为一个真正的链接，它仍然从根本上被破坏了。它让我想起了“重新布置泰坦尼克号上的躺椅”、“木腿上的石膏”这样的表达方式。因此，人们应该首先尊重超文本的基础知识。

【解决方案3】：

AngularJS 和可访问性的最大问题是：

焦点管理 - 一旦您的路径导致部分内容更新并且该部分包含焦点，浏览器会将焦点发送到文档顶部，屏幕阅读器和仅使用键盘的用户将会迷路。您必须积极管理自己的注意力
动态更新公告 - 数据绑定允许在不与 JavaScript 交互的情况下对 DOM 进行更新。如果这些更新很重要，则必须使用 aria-live 区域通知屏幕阅读器用户这些更新。让它们正常工作 - 尤其是在 iOS 上会很棘手。
表单验证 - AngularJS 示例都使用了表单验证失败时显示的错误消息的元素。输入字段的关联都不正确，如果自动显示这些关联，则必须解决 #2 中提到的相同问题（尤其是使用模糊完成时）
标题属性更新 - 当您的路由器更改您的 URL 时，您应该更新文档的标题

除此之外，它只是另一个 HTML 应用程序。

这个 Github repo 有一些 Angular.js 指令和服务来处理这些问题https://github.com/dequelabs/ngA11y

【讨论】：