i标签的Alt或Title属性是什么？

Question

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

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

这将显示一个漂亮的小锁符号。为了让用户知道它的确切含义，我尝试添加title和alt等属性，但都没有成功。

有没有任何属性可以用于标签执行与图像alt和链接title相同的任务？

- Dennis Hackethal

---

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

优秀的示例，带有可视隐藏的内部文本：https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility - Hrvoje Golcic

Answer 1

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

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

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

屏幕阅读器可以给用户可选的title属性访问方式，但我不确定它们对空内容元素采取何种处理方式。

- Jukka K. Korpela

---

“title”通常会被阅读，即使没有内容，只要该元素本身是可选择的。 - Mike

请注意，除非您为<i>标签添加tabIndex，否则它们通常无法被选择。 - dandavis

我已经在我的fa图标<i class="fa fa-info-circle" aria-hidden="true" title="heeeeeelp"></i>中添加了标题，但不起作用。 - GomuGomuNoRocket

这已经被接受并得到了很高的赞同，这应该让我们感到不安，因为这基本上是Jukka的猜测。我并不是说Jukka发帖是错的，或者这个答案的存在会造成伤害，但我认为，一个回答几乎只是“嗯，也许title属性有效，也许不行，谁知道？”被120人视为足够好而得到了赞同，说明大多数Web开发人员（包括我在内）对屏幕阅读器支持的工作只是敷衍了事。作为一个职业，我们需要比这更严谨地解决这些问题。 - Mark Amery

从无障碍角度来看，这不是一个好的做法。如果宿主元素不是本地可聚焦的（例如按钮、锚点），并非所有屏幕阅读器都会读取标题属性。建议除了title之外，还要添加一段在视觉上隐藏的文本（例如Bootstrap中的.sr-only类）。请参见此处的良好示例：https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility - Hrvoje Golcic

Answer 2

随着WAI-ARIA的推进，在使用字体图标时，您可能应该使用以下组合来改善可访问性:

• 角色presentation可以去除元素的固有语义。如果您滥用带有本地语义的元素来提供图标（例如在您的示例中使用i元素），这一点尤为重要。因为根据规范，"表示具有替代声音或心情的文本范围[...]"。
• aria-label可以提供一个字符串值，用于标记元素；或者使用HTML的本地title属性，如果允许浏览器在悬停时显示工具提示。
• aria-hidden属性可隐藏辅助技术的生成内容（由于你正在使用字体图标系列，因此存在生成的字符：before或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属性应描述元素的内容，而不是下一个同级元素。因此，我认为以下解决方案不符合规范（即使大多数辅助工具的可观察行为与电话号码实际位于span元素内部相同）。

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

- Sylvain Leroux

Answer 3

你应该使用 <span> 或类似的标签。如果你想要鼠标悬停时显示一些文本，可以使用 title="" 属性。至于为了方便屏幕阅读器访问或提高 SEO 值，你可以添加以下 CSS：

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

然后，您可以按照以下方式编写标记：

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

- Chris Sobolewski

---

<i> 在 HTML 4.01 中并未被弃用。 - Jim

你是正确的...鉴于 <u> 和 <s> 是这样，我总是会认为 <b> 和 <i> 也是这样，特别是因为它们有 <em> 和 <strong>，但你绝对是正确的。 - Chris Sobolewski

Answer 4

我认为像图片一样的字体应该保留role="img"角色。这可以与aria-label="alt-text"一起使用。这是因为ARIA Accessible Name算法的作用。参见：Aria Techniques Using Img Role。

- NoseToThePage

---

不要忘记为装饰性图标或包含一些文本的锚点标签内的图标添加 aria-hidden='true'。 - Vibhor Dube

Answer 5

<i>标签用于标记文本。你把这个标签的语义意义更改成了与使用斜体无关的东西（甚至斜体标签也不是一个好主意）。你应该使用SPAN代替。

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

- Diodeus - James MacFarlane

---

font-awesome的使用说明告诉你要使用<i>，因此你应该说一下如果这样做会出什么问题。以一种原本不打算使用的方式使用某些东西（在这种情况下是<i>）存在风险，但在这种情况下，这种风险已经被缓解了，因为成千上万的知名网站和数亿用户已经在使用font-awesome。 - cesoid