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

Question

我们的立场

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

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

我们正在考虑什么

我们一直将AngularJS视为动态网络应用程序的框架，但关注它对我们的可访问性状态可能意味着什么。

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

问题

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

Answer 1

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

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

NB：我认为渐进式增强是一种很好的方法，但是对于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是值得阅读的内容。

Answer 2

传统上，Angular并不鼓励开发人员编写用户界面＃34;正确的方式＆＃34; - 太容易创建无法访问的自定义元素指令（例如对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等等。您还可以参考针对ngAria的新Angular.js开发人员指南：https://docs.angularjs.org/guide/accessibility

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

Answer 3

AngularJS和辅助功能的最大问题是：

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

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

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