i 标签的 Alt 或标题属性

Posted 2023-02-15

【中文标题】i 标签的 Alt 或标题属性

【英文标题】：Alt or title attribute for i tag

【发布时间】：2012-07-29 14:29:25

【问题描述】：

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

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

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

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

【问题讨论】：

许多 FontAwesome 网站也使用 Bootstrap。如果这样做，请在单独的 <span> 上使用 .sr-only。

视觉隐藏内部文本的好例子：fontawesome.com/how-to-use/on-the-web/other-topics/…

【参考方案1】：

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

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

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

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

【讨论】：

title 通常被读取，即使没有内容，只要元素本身是可选择的

请注意 <i> 标签通常不可选择，除非您向它们添加 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>
  [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]

【参考方案3】：

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

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

然后像这样写你的标记：

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

【讨论】：

<i> 在 html 4.01 中没有被弃用。

你是对的...鉴于 <u> 和 <s> 是，我总是发现自己在想 <b> 和 <i> 也是如此，特别是因为他们有 <em> 和 @ 987654331@，但你是绝对正确的。

【参考方案4】：

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

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

【讨论】：

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

【参考方案5】：

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