i 标签的 Alt 或标题属性

Question

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

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

这将显示一个漂亮的小锁符号。为了让用户知道这到底意味着什么，我尝试添加标题和 alt 等属性，但没有成功。

是否有任何属性可以用于

<i>

标签，该标签执行与图像 alt 和链接标题相同的任务？

Answer 1

您可以在

title

元素上使用

i

属性，就像任何元素一样，例如

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

是否有帮助是一个比较困难的问题。浏览器通常将

title

属性值显示为鼠标悬停时的“工具提示”，但为什么用户会将鼠标悬停在图标上？而且这样的工具提示可用性较差；所谓的 CSS 工具提示通常效果更好。

屏幕阅读器可以让用户选择访问

title

属性，但我不确定它们对空内容的元素有何作用。

Answer 2

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

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

作者可以谨慎使用 aria-hidden 来隐藏可见渲染的内容 仅当隐藏此内容时才来自辅助技术的内容 内容旨在改善辅助设备用户的体验 通过删除冗余或无关内容的技术。作者 必须使用 aria-hidden 隐藏屏幕阅读器可见的内容 确保相同或等效的含义和功能 接触辅助技术。

---

我不知道您的确切用例，所以我冒昧地使用提供电话号码的更简单的情况。按照偏好的降序排列，I 将使用：

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  [phone]
</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">[phone]</span>

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

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">[phone]</i>

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

请注意，aria-label和title属性应描述元素的content。不是下一个同级元素。因此，我感觉以下解决方案不符合规范（即使大多数辅助工具实际上具有相同的可观察行为，就好像电话号码实际上位于

span

元素内一样）：

<span class="icon-phone" 
  title="Our phone number"></span>[phone]

Answer 3

您应该使用

<span>

或类似的东西。如果您正在寻找的话，您可以使用

title=""

属性在悬停时提供一些文本。至于提供屏幕阅读器的可访问性或 SEO 价值，您可以添加以下 CSS：

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

然后像这样编写你的标记：

<span class="icon-lock">What I want the screen reader to say</span>

Answer 4

我认为像图像一样的字体的角色应该保留为 role="img"。然后可以将其与 aria-label="alt-text" 一起使用。它之所以有效，是因为 ARIA 可访问名称算法。请参阅：使用 Img 角色的 Aria 技术。

Answer 5

<i>

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

SPAN

来代替。

斜体元素不支持

alt

属性，

IMG

元素支持。如果您想要

ALT

属性，请使用图像。