从屏幕阅读器隐藏图标的适当方法 [英] Appropriate way to hide icons from screen readers

问题描述

在我的Web应用程序中，我使自己成为一种仅包含图标的字体。我使用这些图标来补充应用程序中的标题和副标题，并使其在视觉上更具吸引力。

In my web application, I have made myself a font that consists solely of icons. I use these icons to complement titles and sub titles within the application and make it more visually appealing.

但是，像JAWS一样的屏幕阅读器都会读出来，这令人不快

However, screen readers like JAWS read this out and it makes for an unpleasant experience for users of screen readers.

例如，字符 c 显示云的图像。我以这种方式使用它来补充例如< h1> 之类的标头：

For instance the character c displays an image of a cloud. I use it in this way to complement for instance a header such as <h1>:

< span class = my-font> c< / span>

现在我想让屏幕阅读器完全忽略这一点，因为这只是对现有标题的补充，而不是在页面上添加任何新含义。通过我的研究，我发现了两种可能性：

Now I would like for screen readers to completely ignore this as this is just complementing an existing title and not adding any new meaning to what's on the page. Through my research I have found two possibilities:

aria-hidden = true 或 role = presentation

我只是不确定其中哪一个（或可能两者）适合我的尝试实现。

I'm just not sure which one of these (or perhaps both) are suitable to what I am trying to achieve. Any input is appreciated!

推荐答案

您应该使用 aria-hidden = true 属性，它表示：

You should use the aria-hidden="true" attribute, which says:

表示该元素及其所有后代对作者所实施的任何用户都不可见或可感知。

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

这意味着该元素不应被任何用户感知。所以使用：

This means that the element is not supposed to be perceived by any user. So use:

<span class="my-font" aria-hidden="true">c</span>

如果该图标应该是链接或不仅仅是装饰，我建议您有一些伴随它们的文字，以便屏幕阅读器知道它是什么。您可以将文本移出屏幕，以便仅在屏幕阅读器上可见。

If the icon is supposed to be a link or is not just for decoration, I suggest you have some text accompanying them so that screen readers knows what it is. You can move the text off screen so that it is only visible to screen readers.

HTML

<span>
    <span class="my-font" aria-hidden="true">c</span>
    <span class="screen-reader">About me</span>
</span>

CSS

.screen-reader {
    position:absolute;
    top:-9999px;
    left:-9999px;
}

这篇关于从屏幕阅读器隐藏图标的适当方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！