i 标签的 Alt 或标题属性答案

【问题标题】：Alt or title attribute for i tagi 标签的 Alt 或标题属性
【发布时间】：2012-07-29 14:29:25
【问题描述】：

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

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

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

我可以为 标记使用任何属性来执行与图像的alt 和链接的标题相同的任务吗？

【问题讨论】：

许多 FontAwesome 网站也使用 Bootstrap。如果这样做，请在单独的  上使用 .sr-only。
视觉隐藏内部文本的好例子：fontawesome.com/how-to-use/on-the-web/other-topics/…

标签： html tags font-awesome

【解决方案1】：

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

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

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

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

【讨论】：

title 通常被读取，即使没有内容，只要元素本身是可选择的
请注意  标签通常不可选择，除非您向它们添加 tabIndex。
我在我的 fa 图标中添加了标题但不起作用
当这基本上是 Jukka 的疯狂猜测时，它已经被接受并得到高度支持，这应该让我们感到困扰。我并不是说 Jukka 发布它是错误的，或者这个答案的存在会造成伤害，但我认为一个相当于“嗯，也许 title 属性会起作用，或者可能不会起作用的事实，谁知道？”被认为足以得到 120 人的支持，这说明屏幕阅读器支持从大多数 Web 开发人员（包括我在内，我承认）那里得到了敷衍的努力。作为一个职业，我们需要弄清楚如何比这更严格地解决这些问题。
从可访问性的角度来看不是很好的做法。如果宿主元素本身不可聚焦（例如按钮、锚点），则并非所有屏幕阅读器都会读取标题属性。建议除了 title 以及视觉隐藏文本（例如 Bootstrap 中的 .sr-only 类）之外添加。在此处查看好的示例：fontawesome.com/how-to-use/on-the-web/other-topics/…

【解决方案2】：

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

角色presentation 删除元素的隐式本机角色语义。如果您（ab）使用具有本机语义的元素来提供图标，这一点尤其重要，因为在您的示例中使用i 元素就是这种情况（根据规范，“表示以另一种声音或语气发短信 [...]")。
aria-label 提供一个字符串值来标记元素
一个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 属性应该描述元素的content。不是下一个兄弟元素。所以我觉得下面的解决方案不符合规范（即使大多数可访问性工具实际上具有与电话号码实际上在span 元素）：

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

【讨论】：

【解决方案3】：

您应该改用 或类似的东西。您可以使用 title="" 属性在悬停时提供一些文本，如果这是您要查找的内容。至于提供屏幕阅读器的可访问性或 SEO 价值，您可以添加以下 CSS：

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

然后像这样写你的标记：

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

【讨论】：

 在 HTML 4.01 中没有被弃用。
你是对的...鉴于  和 <s> 是，我总是发现自己在想  和  也是如此，特别是因为他们有  和 @ 987654331@，但你是绝对正确的。

【解决方案4】：

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

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

【讨论】：

font-awesome 指令告诉你使用，所以你应该说如果你这样做会出现什么问题。以原本不打算使用的方式使用某些东西（在这种情况下是 ）存在风险，但在这种情况下，这种风险已经被数以亿计用户的数千个信誉良好的网站已经在使用 font-awesome 的事实减轻了.

【解决方案5】：

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

【讨论】：