如何将辅助功能图标添加到 JAWS、旁白和对讲等屏幕阅读器？

Question

我收到一项要求我更新隐私页面内容的任务。内容 json 文件中的一个键值上有一个心形图标。这需要所有屏幕阅读器应用程序（如 JAWS、语音和对讲）阅读

这就是我解决问题的方式。

我在 json 文件中添加了 span span <span class="sr-only">heart</span>

然后在css中添加类：

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

预期行为 图标应由 JAWS、旁白和对讲等屏幕阅读器阅读

实际行为 它只被 NVDA 读取

Answer 1

心形图标通常表示您想将某个项目标记为“收藏”。您不必逐字地使用描述图标形状的文字。相反，您应该使用描述图标用途的文字。在这种情况下，类似于“标记为收藏”。

大多数心形图标也是交互式的。您可以用鼠标单击它们，它会将心形图标从空/轮廓形状更改为填充形状。图标必须是键盘可聚焦的（使用 tab 键）和可选择的（space 或 enter）。这通常通过将图标设为真正的<button> 来完成。

如果您使用带有嵌套<img> 的<button> 元素作为图标，则为<img> 指定一个alt 属性，即“标记为收藏”。你会有这样的东西：

<button>
   <img src="heart.jpg" alt="mark as favorite">
</button>

为了完整起见，当心被选中时，您可能会看到不同的图像，因此您希望 alt 文本表明再次选择心形会将该项清除为收藏项。

<button>
   <img src="filledheart.jpg" alt="clear as favorite">
</button>

第二种解决方案是使用aria-pressed 来设置切换按钮。您可以在真/假之间切换属性值（并在空和填充之间切换图标）。

第三种解决方案是让心脏成为一个复选框。心脏基本上是选中或未选中（填充或空），因此复选框/开关符合范例。