31

我们站在哪里

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

  1. 我们的布局在逻辑上是有序的；
  2. 图像有alt=""标签。但我们很快就知道我们需要做好准备并认真考虑这一点。

我们正在考虑什么

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

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

问题

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

4

3 回答 3

31

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

您可能通过 JavaScript 创建它，但过去约 5 年的屏幕阅读器理解这一点，并使用浏览器的可访问性 API 来访问 DOM。非 JavaScript 方面根本不是可访问性问题。没有 JavaScript 的屏幕阅读器用户的数量与一般人群相同，因此它表现为完全形成的 HTML，而不是您在开发中看到的原始标记。

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

当然，您不会使用 Angular.js 来创建标准内容页面，因此您需要了解WAI-ARIA 规范，以及如何在 HTML 中使用 ARIA。指定如何动态标记传统 HTML 实践未涵盖的内容，例如选项卡、树、网格等。

对于 WAI ARIA 技术在实践中的实际示例，我会查看Whatsock 技术风格指南。

与传统网站相比，一个不同之处在于您管理页面更新的方式，因为您管理键盘焦点而不是刷新页面。但除此之外，WAI-ARIA 还是值得一读的。

于 2013-09-17T22:45:06.803 回答
7

传统上，Angular 不鼓励开发人员以“正确的方式”编写用户界面——创建不可访问的自定义元素指令（例如 ngClick on a div）太容易了，并且没有提供可访问性支持。然而，随着 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 将继续发展（我希望它只是被烘焙而不是模块），但很高兴看到核心框架最终支持可访问性。

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

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

于 2014-12-09T18:29:05.197 回答
3

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

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

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

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

于 2014-12-10T05:19:48.773 回答