使用像angularjs这样的框架有什么可访问性含义？

Question

我们站在哪里

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

1. 我们的布局按逻辑顺序排列;
2. 图像有alt=""标签。 但很快就会知道我们需要适应并真正考虑到这一点。

我们在考虑什么

我们一直在将AngularJS视为动态Web应用程序的框架，但我们担心它对我们的可访问性的影响。

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

题

我想知道这些框架是否有一个易于理解的最佳实践或信息资源 ，这些框架严重依赖于动态标记和内联标记，这些标记可能被视为屏幕阅读器或甚至是浏览器之类的乱码JavaScript和CSS已关闭。

Answer 1

所有相同的原则都适用，例如对图像使用alt文本，使用标题，对内容使用适当的HTML（5）结构。

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

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

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

有关WAI ARIA技术在实践中的实际例子，我将看一下Whatsock技术风格指南 。

与传统网站相比，有一个区别是您管理页面更新的方式 ，因为您管理键盘焦点而不是刷新页面。 但除此之外，WAI-ARIA是值得阅读的东西。

Answer 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可以提供帮助的另一种方法是在任何使用ng-disabled情况下添加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问题或提交拉取请求！ 这是一项社区驱动的努力。

Answer 3

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

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

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

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