Question

在我的网络应用程序中，我自己制作了一个仅由图标组成的字体。我使用这些图标来补充应用程序中的标题和子标题，使其更具视觉吸引力。

然而，像JAWS这样的屏幕阅读器会将其读出来，这会给屏幕阅读器用户带来不愉快的体验。

例如，角色c显示云的图像。我以这种方式使用它来补充例如<h1>：

之类的标题

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

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

aria-hidden="true"或role="presentation"

我只是不确定这些（或两者）中的哪一个适合我想要实现的目标。任何意见都表示赞赏！

Answer 1

如果它只是一个装饰图标，最好使用CSS而不是HTML，例如使用伪元素：::after(content:…; font:…;)。不幸的是，一些屏幕阅读器也可能会阅读这些内容，当然，我们无法在CSS中应用WAI-ARIA。因此，根据您的具体情况，您可能会“强制”使用aria-hidden="true"代替标记。

如果可能，您还应该使用相应的Unicode符号（如☁，即“U + 2601 CLOUD”）而不是不相关的字符（如c）。

如果没有相应的字符，你应该使用Unicode的Private Use Areas，它们是未定义的代码点，因此你可以定义自己的字符/符号。

您可能对这些帖子感兴趣：

css-tricks.com: HTML for Icon Font Usage
nimbupani.com：Markup-free icon fonts using unicode-range

Answer 2

您应该使用aria-hidden="true"属性，其中包含：

表示作者实现的任何用户都看不到或看不到该元素及其所有后代。

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

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

如果图标应该是链接或者不仅仅是用于装饰，我建议您附带一些文字，以便屏幕阅读器知道它是什么。您可以将文本移出屏幕，使其仅对屏幕阅读器可见。

<强> 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;
}

Answer 3

虽然aria-hidden="true"可以隐藏声音图标，但它仍会显示在辅助技术的链接和标题列表中。

我仍然试图找到一种完全隐藏它们的方法，但这很棘手。对于OP，是的，aria-hidden="true"会稍微隐藏它们，但不完全隐藏它们。不要单靠它。另外，请确保您使用真实用户进行测试！

我遇到了这篇非常好的文章：http://pictos.cc/articles/using-icon-fonts/

祝你好运！

从屏幕阅读器隐藏图标的适当方法

3 个答案: