i标签的Alt或title属性


82

我使用超赞的字体并像这样显示其字体:

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

这将显示一个漂亮的小锁符号。为了让用户知道确切的含义,我尝试添加诸如title和alt之类的属性,但无济于事。

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


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

与视觉上隐藏内部文本很好的例子:fontawesome.com/how-to-use/on-the-web/other-topics/...
赫尔沃耶Golcic

Answers:


151

您可以titlei元素(例如任何元素)上使用属性,例如

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

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

屏幕阅读器可以为用户提供对title属性的可选访问权限,但是我不确定他们如何处理内容为空的元素。


1
title通常可以读取,即使没有内容也可以,只要元素本身是可选择的即可
Mike

请注意<i>,除非您向标签添加了tabIndex,否则标签通常是不可选择的。
dandavis

我已在我的fa图标<i class =“ fa fa-info-circle” aria-hidden =“ true” title =“ heeeeeelp”> </ i>中添加了标题,但无法正常工作
GomuGomuNoRocket

4
令我们感到困扰的是,当它基本上是Jukka方面的疯狂猜测时,它已被接受并受到高度评价。我并不是说Jukka发布错误,或者这个答案的存在确实有害,但是我认为这样的事实相当于“嗯,也许一个title属性会起作用,或者也许不起作用,谁知道? ” 被认为足以胜任120个人的投票说明了大多数Web开发人员(我包括我在内)在屏幕阅读器支持方面所付出的辛勤努力。作为一个职业,我们需要比现在更严格地解决这些问题。
Mark Amery

3
从可访问性的角度来看不是很好的做法。如果宿主元素本身不是可聚焦的(例如按钮,锚点),则并非所有的屏幕阅读器都会读取title属性。建议除了添加title视觉上隐藏的文本外(例如.sr-only,Bootstrap中的类)。见优秀范例:fontawesome.com/how-to-use/on-the-web/other-topics/...
赫尔沃耶Golcic

13

随着WAI-ARIA的进步,在使用字体图标时,您可能应该结合使用以下各项来改善可访问性:

  • 角色表示,用于删除元素的隐式本机角色语义。如果您(ab)使用具有本机语义的元素来提供图标,则这一点尤其重要,因为在您的示例中,使用i元素就是这种情况(根据规格,“以替代语音表示一段文本或心情[...]“)。
  • 用于提供标记元素的字符串值的aria标签-如果本地浏览器将鼠标悬停时显示工具提示,则可以提供原生HTML标题属性。
  • 一个aria-hidden属性,用于从辅助技术中隐藏生成的内容(当您使用图标字体系列时,在: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-labeltitle属性应描述元素的内容。不是下一个同级元素。因此,觉得以下解决方案符合规范(即使大多数可访问性工具实际上具有与电话号码实际上位于span元素中相同的可观察行为):

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

7

您应该改用<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中不被弃用。
吉姆(Jim)

2
您是正确的...鉴于此<u><s>过去,我总是觉得自己也在思考<b><i>也是如此,特别是因为它们具有<em><strong>,但是您绝对正确。
克里斯·索博洛夫斯基

3

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

斜体元素不支持alt属性,IMG元素则支持。如果需要ALT属性,请使用图像。


令人敬畏的字体说明会告诉您使用<i>,因此您可能应该说出如果这样做会出什么问题。以某种<i>原本非预期的方式使用某种东西(在这种情况下)会带来风险,但是在这种情况下,由于成千上万个拥有数亿用户的信誉良好的网站已经在使用真棒字体这一事实,风险已得到缓解。
cesoid

2

我认为应将类似于图像的字体的角色保留给role =“ img”。然后可以与aria-label =“ alt-text”一起使用。由于ARIA可访问名称算法的缘故,它可以工作。请参阅:使用Img Role的Aria技术

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.