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 - 如何使隐藏的链接对屏幕阅读器可见,但对选项卡导航不可见

    angularjs - 将 Aria 标签添加到 Angular 分页网格以使其更易于访问

    html - HTML标签保留尖括号

    Angular Material - 如何在运行时更改按钮颜色

    java - 我应该如何控制对tomcat中图像的访问?

    jquery - 打开Fancybox-2后,在fancybox窗口中发送焦点

    javascript - 实现副本以实现可访问性

    javascript - WAI-ARIA轮播 Angular 色(也称为 slider ,幻灯片,画廊)

    angular - 我如何使用 karma + jasmine 在 Angular 2 中测试局部变量?

    Angular 2 - 检查属性是否为数组