如何将按钮角色添加到angular中的自定义元素中,使其可由屏幕阅读器访问?

我不了解Angular,所以你可能需要深入了解如何构建它,但你的方法让事情变得困难。

相反,将按钮设置为 <button> 通过这种方式,您可以获得内置的所有本地可访问性(例如,默认情况下可通过选项卡访问,接受焦点,具有 hover 和 focus 状态等),您还将在屏幕阅读器中获得正确的公告。

然后将图标放在 <按钮> 并恰当地设计它。

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

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

我通过更多的角色实验找到了这个问题的解决方案。

image标签不接受role=“button”作为属性。相反,角色需要分配给图像标签的父元素,即在我的例子中,组件 icn 如下所示:

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

现在,屏幕阅读器软件会读取“垃圾桶按钮”,并给出更多关于如何与该按钮交互的说明。如果上述方法不起作用,只需将自定义组件封装在span标记中并分配 role="button" 到span标签就像一个魅力。

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

注:按钮角色 examples