angular - Angular 2 和 4 中的 ARIA 可访问性

标签 angular accessibility wai-aria

当我遇到 angular-aria 模块时,我一直在我的组件模板中手动包含 ARIA 属性:https://docs.angularjs.org/api/ngAria

但是,这是针对 AngularJS 的。 Angular 2 和 4 是否有任何等效模块在运行时静默地在组件上注入(inject) aria 属性?

我看过这个问题:How do I include ngAria in and Angular 2 application?但它似乎没有答案。

最佳答案

你的问题有一个简短的答案和一个很长的答案,让我们看看那些是什么?

Angular 2 和 4 是否有任何等效模块在运行时默默地在组件上注入(inject) aria 属性?

让我们首先引用 AngularJs 的知识库文章:

Using ngAria is as simple as requiring the ngAria module in your application. ngAria hooks into standard AngularJS directives and quietly injects accessibility support into your application at runtime.

由于 Angular 2 试图内置对 ARIA 的支持,不需要这样的等效模块,也没有我所知道的补充模块。

所以,是的,它是隐式支持的,不,没有这样的模块(必需)。

Angular 的辅助功能用例至少包括:(引自 Marcy Sutton)

  • 为自定义处理 aria-disabled、aria-required 和 aria-checked 控制
  • 使用 ngModel 处理自定义控件上的 aria-* 值属性
  • 不鼓励非语义 div 元素上的点击事件(可以做到 通过文档)
  • 文本替代品:表单控件的标签,图像的 alt

您可以通过检查 Angular 模板的渲染输出来简单地调查上述内容。

最后说明:无论如何,应该考虑仍然需要手动遵守 ARIA 使用规则,这与使用的 angular(JS 或 2+)版本无关;例如,避免将点击事件分配给非语义元素,或将给定标签嵌入到不是 labelable 的元素.

关于angular - Angular 2 和 4 中的 ARIA 可访问性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46166331/

相关文章:

html - 如何使可点击的 <tr> 可访问?

html - 在一个文档中同时使用 WAI-ARIA 属性和 HTML5 语义标签

组件上的 Angular 强制输入

angular - 错误: Can't resolve all parameters for TypeDecorator: Angular 2 RC-6

angular - 如果 ng-content 有内容或为空 Angular2

html - 防止屏幕阅读器读取默认标记元素指令

HTML 视频无法在苹果设备(Chrome/Safari/等)上运行

html - 在不更改默认浏览器首选项的情况下将 tabindex/focus 添加到 Safari 中的按钮

javascript - Jquery 和 WAI ARIA

angularjs - NVDA 忽略角色为 ="alert"的 Angular *ngIf block