Where we stand
我们正在推动网络可访问性,以符合管理公共/教育机构的某些法律。到目前为止,我们一直在确保:
1.我们的布局是合乎逻辑的,
1.图片有alt=""
标签。但很快就意识到我们需要做好准备,认真思考这个问题。
我们考虑的是
我们一直将AngularJS
视为动态web应用程序的框架,但担心它对我们的可访问性地位意味着什么。
我知道一个没有JavaScript的浏览器很可能会破坏一个高度动态的Angular应用程序(例如,表达式,如嵌入在标记中的{{ item.something }}
,使用ng-repeat
从单个<li>
构建列表,客户端部分视图作为空标记等)。
提问
我想知道是否有一个很好理解的最佳实践或信息资源,用于这些严重依赖动态标记和内联标记的框架,这些标记和内联标记可能会被屏幕阅读器甚至关闭 JavaScript 和 CSS 的浏览器视为胡言乱语。
3条答案
按热度按时间ezykj2lf1#
所有相同的原则都适用,例如为图像使用alt文本,良好的标题使用,为内容使用适当的HTML(5)结构。
您可能通过JavaScript创建它,但过去5年的屏幕阅读器理解这一点,并使用浏览器的可访问性API来访问DOM。非JavaScript方面是simply not an accessibility issue。没有使用JavaScript的屏幕阅读器用户的数量与一般人群相同,因此它看起来像完全形成的HTML,而不是您在开发中看到的原始标记。
**注:**我认为渐进式增强是一种很好的方法,但是对于Angular.js,你事先决定不采用这种方法。如果你想了解性能和渐进式增强,我认为这是答案。
当然,你不能仅仅使用Angular.js来创建标准的内容页面,所以你需要跟上WAI-ARIA specification和how to use ARIA in HTML的速度。指定了如何动态标记传统HTML实践中没有涵盖的内容,如标签、树、网格等。
对于阿威ARIA技术在实践中的一个实际例子,我想看看Whatsock technical style guide。
与传统网站相比,一个不同之处在于您如何管理页面更新,因为您管理键盘焦点而不是刷新页面。但除此之外,WAI-ARIA是值得一读的。
7cjasjjr2#
传统上,Angular并不鼓励开发人员以“正确的方式”编写用户界面-创建无法访问的自定义元素指令(例如
div
上的ngClick)太容易了,并且没有提供可访问性支持。然而,随着Angular 1.3x和ngAria模块的发布,它已经得到了改进。现在,通过在应用程序中包含ngAria,某些ARIA属性将自动应用,因此您不必管理它们。例如,
ngClick
指令现在应用tabIndex="0"
和ngKeypress
(只要这些选项没有被禁用),这样就不容易创建不可访问的单击事件。ngAria也将很快添加role="button"
来传达可点击元素的目的:这可以被其他角色覆盖。请参阅此pull request以获取更多信息:https://github.com/angular/angular.js/pull/10318ngAria可以提供帮助的另一种方式是将
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 issue或提交一个pull request!这是一个社区驱动的努力。
q9yhzks03#
你对AngularJS和可访问性的最大问题是:
1.焦点管理-一旦你的路由导致一部分内容被更新,并且该部分包含焦点,浏览器将把焦点发送到文档的顶部,屏幕阅读器和键盘用户将丢失。你必须积极地管理你的注意力
1.动态更新公告-数据绑定允许更新DOM,而不需要与JavaScript交互。如果这些更新是重要的,屏幕阅读器用户将不得不使用aria-live区域通知这些更新。让这些正常工作-特别是在iOS上将是棘手的。
1.表单验证-AngularJS示例都使用元素来表示表单验证失败时显示的错误消息。与输入字段的关联都不正确,如果自动显示这些(特别是使用模糊时),则必须解决在#2中提到的相同问题
除此之外,它只是另一个HTML应用程序。
这个Github仓库有一些Angular.js指令和服务来处理其中的一些问题https://github.com/dequelabs/ngA11y