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

Question

我们站在哪里

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

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

我们在考虑什么

我们一直将其AngularJS视为动态Web应用程序的框架,但关注它对我们的可访问性的影响.

据我所知,没有JavaScript的浏览器可能会打破一个高度动态的角度应用程序(如表达式,如{{ item.something }}嵌入标记,采用ng-repeat构建从单一的列表<li>为空标签,客户端的部分景色,等).

题

我想知道如果有一个很好理解的最佳做法或信息资源为这些类型的框架,在很大程度上依赖于动态标记和内嵌标记,可以被视为胡言乱语像屏幕阅读器,甚至是浏览器JavaScript和CSS已关闭.

Answer 1

所有相同的原则都适用,例如对图像使用alt文本,使用标题,对内容使用适当的HTML(5)结构.

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

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

Of course, you don't use Angular.js just to create standard content pages, so you need to get up to speed with the WAI-ARIA specification, and how to use ARIA in HTML. The specifies how to dynamically markup things that are not covered by traditional HTML practices, such as tabs, trees, grids etc.

For a practical example of WAI ARIA techniques in practice, I would have a look at the Whatsock technical style guide.

One difference compared to traditional websites are how you manage page updates, as you manage the keyboard focus rather than refresh the page. But apart from that, WAI-ARIA is the thing to read up on.

Answer 2

传统上,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问题或提交拉取请求!这是一项社区驱动的努力.