如何将按钮角色添加到 angular 中的自定义元素以使其可被屏幕 reader 访问？

Question

我在 angular 中有一个处理图像的自定义组件。我将替代文本作为元素的输入，屏幕 reader 将其拾取并说出来。但是每当我切换到图像时，它都会显示 'Trash' 组。我希望屏幕 reader 将其读出为 'Trash' 按钮。我怎样才能做到这一点？以下是我目前的实现：

icn组件：

<img [ngClass]="class" [file]="file" [alt]="alt">

用法：

<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>

我试过 role="button" 但没有成功。任何 help/guidance 表示赞赏。

Answer 1

我不知道 Angular 所以您可能需要深入研究如何构建它，但您的方法让事情变得困难。

改为将按钮设为 <button>。通过这种方式，您可以获得所有内置的本机辅助功能（例如，默认情况下可通过选项卡访问、接受焦点、具有 hover 和 focus 状态等）并且您还将在屏幕阅读器中获得正确的通知。

然后将图标放在 <button> 中并适当设置样式。

<button> <!--add whatever directives angular requires here-->
   <img [ngClass]="class" [file]="file" [alt]="alt">
</button>

您还可以考虑为您的图标使用内联 SVG，因为它们提供样式选项并且可以根据用户偏好更改颜色。它也是一种较少的下载资源，因此有助于提高性能。

Answer 2

我通过对角色进行更多试验找到了解决这个问题的办法。

图片标签没有将role="button"作为属性。相反，角色需要分配给图像标签的父元素，即在我的例子中，组件 icn 如下所示：

<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>

现在，屏幕 reader 软件显示为 'Trash button'，并提供了有关如何与按钮交互的更多说明。而且，如果上述方法不起作用，只需将自定义组件封装在 span 标记中并将 role="button" 分配给 span 标记就可以了。

<span class="del-btn-container" role="button">
   <icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>

注：按钮作用examples

How to add button role to a custom element in angular to make it accessible by screen reader?