5

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

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

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

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

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

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

我只是不确定其中哪一个（或两者都适合）适合我想要实现的目标。

4

3 回答 3

5

您应该使用该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;
}
于 2013-04-02T02:21:33.233 回答
5
于 2013-04-03T19:01:55.900 回答
1

While aria-hidden="true" works to hide the audible icon, it will still show up in the assistive technology's list of links and headings.

I'm still trying to find a way to hide them entirely, but it's tricky. To the OP, yes, aria-hidden="true" will hide them somewhat, but not entirely. Don't rely on it alone. Also, make sure you test with real users!

I came across this really good article: http://pictos.cc/articles/using-icon-fonts/

于 2013-05-06T19:27:36.180 回答