我使用超赞的字体并像这样显示其字体:
<i class="icon-lock"></i>
这将显示一个漂亮的小锁符号。为了让用户知道确切的含义,我尝试添加诸如title和alt之类的属性,但无济于事。
我可以为<i>
执行与alt图像和链接标题相同的任务的标记使用任何属性吗?
我使用超赞的字体并像这样显示其字体:
<i class="icon-lock"></i>
这将显示一个漂亮的小锁符号。为了让用户知道确切的含义,我尝试添加诸如title和alt之类的属性,但无济于事。
我可以为<i>
执行与alt图像和链接标题相同的任务的标记使用任何属性吗?
Answers:
您可以title
在i
元素(例如任何元素)上使用属性,例如
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
是否有帮助是一个更困难的问题。浏览器通常title
在鼠标悬停时将属性值显示为“工具提示”,但是用户为什么将鼠标悬停在图标上?这些工具提示的可用性很差;所谓的CSS工具提示通常效果更好。
屏幕阅读器可以为用户提供对title
属性的可选访问权限,但是我不确定他们如何处理内容为空的元素。
title
通常可以读取,即使没有内容也可以,只要元素本身是可选择的即可
<i>
,除非您向标签添加了tabIndex,否则标签通常是不可选择的。
title
属性会起作用,或者也许不起作用,谁知道? ” 被认为足以胜任120个人的投票说明了大多数Web开发人员(我包括我在内)在屏幕阅读器支持方面所付出的辛勤努力。作为一个职业,我们需要比现在更严格地解决这些问题。
title
视觉上隐藏的文本外(例如.sr-only
,Bootstrap中的类)。见优秀范例:fontawesome.com/how-to-use/on-the-web/other-topics/...
随着WAI-ARIA的进步,在使用字体图标时,您可能应该结合使用以下各项来改善可访问性:
作者必须谨慎使用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属性应描述元素的内容。不是下一个同级元素。因此,我觉得以下解决方案不符合规范(即使大多数可访问性工具实际上具有与电话号码实际上位于span
元素中相同的可观察行为):
<span class="icon-phone"
title="Our phone number"></span>+33 7 1234576
您应该改用<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>
和<strong>
,但是您绝对正确。
<i>
标签用于标记文本。您正在将此标签的语义含义更改为与斜体无关的内容(甚至斜体标签也是个坏主意)。您应该改用a SPAN
。
斜体元素不支持alt
属性,IMG
元素则支持。如果需要ALT
属性,请使用图像。
<i>
,因此您可能应该说出如果这样做会出什么问题。以某种<i>
原本非预期的方式使用某种东西(在这种情况下)会带来风险,但是在这种情况下,由于成千上万个拥有数亿用户的信誉良好的网站已经在使用真棒字体这一事实,风险已得到缓解。
我认为应将类似于图像的字体的角色保留给role =“ img”。然后可以与aria-label =“ alt-text”一起使用。由于ARIA可访问名称算法的缘故,它可以工作。请参阅:使用Img Role的Aria技术。
.sr-only
在单独的上使用<span>
。