mat-icon是否需要alt文本属性?

时间:2019-05-22 07:03:44

标签: angular angular-material accessibility

我要在所有图像中添加替代文本,但是我不确定mat-icon,是否也需要在其中添加替代文本?

1 个答案:

答案 0 :(得分:0)

这取决于-如果显示的是图标而不是按钮的文本,则最好在按钮元素上使用适当的aria-label

对于表示某些东西但不直接交互的图标,则可能需要添加一个同级元素,例如:span,其中包含指示符的文本表示形式,并使用类{{ 1}}。

从官方文档引用:

  

类似于元素,仅图标不会为屏幕阅读器用户传达任何有用的信息。的用户必须提供有关如何使用图标的其他信息。根据下面描述的用例,默认情况下mat-icon标记为aria-hidden =“ true”,但是可以通过向该元素添加aria-hidden =“ false”来覆盖。

     

在考虑可访问性时,将图标的使用归为以下三类之一非常有用:

     

装饰性的:图标不传达任何真实的语义含义,并且纯粹是装饰性的。

     

互动式:用户将单击图标或与图标互动以执行某些操作。

     

指示器:该图标不是交互式的,但是它传达了一些信息,例如状态。这包括在较大的邮件中使用图标代替文本。

ref:https://material.angular.io/components/icon/overview#accessibility