86

我使用font-awesome并像这样显示他们的字体：

<i class="icon-lock"></i>

这将显示一个漂亮的小锁符号。为了让用户知道这到底意味着什么，我尝试添加诸如标题和 alt 之类的属性，但无济于事。

是否有任何属性可以用于<i>执行与图像的 alt 和链接的标题相同的任务的标签？

4

5 回答 5

162

您可以title在元素上使用属性i，就像任何元素一样，例如

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

它是否有帮助是一个更困难的问题。浏览器通常会在鼠标悬停时将title属性值显示为“工具提示”，但为什么用户会将鼠标悬停在图标上？而且这样的工具提示可用性很差；所谓的 CSS 工具提示通常效果更好。

屏幕阅读器可能会赋予用户对属性的可选访问权限title，但我不确定他们如何处理内容为空的元素。

于 2012-07-31T18:45:58.047 回答
14

随着WAI-ARIA的进步，在使用字体图标时，您可能应该使用以下组合来提高可访问性：

  • 用于移除元素的隐式本地角色语义的角色表示。如果您（ab）使用具有本机语义的元素来提供图标，这一点尤其重要，因为在您使用i元素的示例中就是这种情况（根据规范，“代表替代语音中的一段文本或心情 [...]”）。
  • 一个aria-label提供一个字符串值来标记元素- 或者 -如果您可以在浏览器悬停时显示工具提示，则可以使用本机 HTML标题属性。
  • 用于隐藏辅助技术生成的内容的aria-hidden属性（当您使用图标字体系列时，有一个生成的字符 :before of :after）。根据规格：

仅当隐藏此内容的行为旨在通过删除冗余或无关内容来改善辅助技术用户的体验时，作者才可以谨慎使用aria-hidden来隐藏辅助技术中可见呈现的内容。使用 aria-hidden 向屏幕阅读器隐藏可见内容的作者必须确保将相同或等效的含义和功能暴露给辅助技术。

我不知道您的确切用例，所以我冒昧地使用提供电话号码的更简单的情况。按优先顺序递减，我会使用：

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

请注意aria-label和title属性应该描述元素的内容。不是下一个兄弟元素。所以我觉得以下解决方案不符合规范（即使大多数可访问性工具实际上具有与电话号码实际上在span元素内一样的可观察行为）：

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576
于 2016-01-29T16:39:47.377 回答
7

你应该使用<span>或类似的东西。title=""如果您正在寻找，您可以使用该属性在悬停时提供一些文本。至于为屏幕阅读器提供可访问性或 SEO 值，您可以添加以下 CSS：

.icon-lock{
    text-indent:-99999px;
}

然后像这样写你的标记：

<span class="icon-lock">What I want the screen reader to say</span>
于 2012-07-31T18:30:19.520 回答
3

<i>标签用于标记文本。您正在将此标记的语义含义更改为与使用斜体无关的内容（甚至斜体标记也是一个坏主意）。你应该使用 aSPAN代替。

斜体元素不支持alt属性，IMG元素支持。如果您想要一个ALT属性，请使用图像。

于 2012-07-31T18:32:12.343 回答
2

我认为像图像一样的字体的角色应该保留给 role="img"。这可以与 aria-label="alt-text" 一起使用。它的工作原理是 ARIA 可访问名称算法。请参阅：使用 Img 角色的 Aria 技术。

于 2018-08-27T19:19:29.087 回答