Html i 标签的 Alt 或 title 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11746619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alt or title attribute for i tag
提问by dchacke
I use font-awesomeand display their fonts like that:
我使用font-awesome并像这样显示它们的字体：
<i class="icon-lock"></i>
This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail.
这将显示一个漂亮的小锁符号。为了让用户知道这究竟意味着什么，我尝试添加诸如 title 和 alt 之类的属性，但无济于事。
Is there any attribute I can use for the <i>tag that executes the same task as alt for images and title for links?
是否有任何属性可以用于<i>执行与图像的 alt 和链接的标题相同的任务的标签？
回答by Jukka K. Korpela
You can use the titleattribute on an ielement, like any element, e.g.
您可以title在i元素上使用该属性，就像任何元素一样，例如
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
Whether it helps is a more difficult issue. Browsers usually show the titleattribute value as a “tooltip” on mouseover, but why would the user mouse over the icon? And such tooltips are of poor usability; so-called CSS tooltips often work better.
它是否有帮助是一个更困难的问题。浏览器通常会title在鼠标悬停时将属性值显示为“工具提示”，但为什么用户会将鼠标悬停在图标上？并且这样的提示框可用性很差；所谓的 CSS 工具提示通常效果更好。
Screen readers may give the user optional access to titleattributes, but I'm not sure what they do with elements with empty content.
屏幕阅读器可能会为用户提供对title属性的可选访问权限，但我不确定它们如何处理内容为空的元素。
回答by Sylvain Leroux
With the advance of WAI-ARIA, when using font icons, you probably should use a combination of the following to improve accessibility:
随着WAI-ARIA的进步，在使用字体图标时，您可能应该使用以下组合来提高可访问性：
- The role presentationto remove implicit native role semantics of the element. This is especially important if you (ab)use an element with a native semantic to provide icons, as this is the case in your example using the ielement (which, according to the specs, "represents a span of text in an alternate voice or mood [...]").
- An aria-labelto provide a string value that labels the element -or-a native HTML titleattribute if you are OK with the browser displaying a tooltip when hovered.
- An aria-hiddenattribute to hide generated contentfrom assistive technologies (as you are using an icon font family, there is a generated character :before of :after). According to the specs:
- 删除元素的隐式本机角色语义的角色表示。如果您 (ab) 使用具有本机语义的元素来提供图标，这一点尤其重要，因为在您使用i元素的示例中就是这种情况（根据规范，“以替代语音表示一段文本或心情 [...]")。
- 一个aria-label提供一个字符串值来标记元素- 或者 -如果浏览器在悬停时显示工具提示没问题，那么它是一个原生 HTML标题属性。
- 用于隐藏辅助技术生成的内容的aria-hidden属性（当您使用图标字体系列时，会生成一个字符 :before 或 :after）。根据规格：
Authors MAY, with caution, use aria-hiddento hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.
作者可以谨慎地使用aria-hidden来隐藏辅助技术中可见呈现的内容，只有当隐藏此内容的行为旨在通过删除冗余或无关内容来改善辅助技术用户的体验时。使用 aria-hidden 隐藏屏幕阅读器可见内容的作者必须确保相同或等效的含义和功能暴露给辅助技术。
I don't know your exact use case, so I take the liberty to use the simpler case of providing a phone number. In decreasing order of preference, Iwould use:
我不知道你的确切用例，所以我冒昧地使用提供电话号码的更简单的情况。按优先顺序递减，我将使用：
<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`)
Please note that aria-labeland titleattributes should describe the contentof the element. Not the next sibling element. So Ifeel like the following solution is notin accordance with the specs (even if most accessibility tools would actually have the same observable behavior as if the phone number were actually inside the spanelement) :
请注意aria-label和title属性应该描述元素的内容。不是下一个兄弟元素。所以我觉得以下解决方案不符合规范（即使大多数辅助功能工具实际上具有与电话号码实际上在span元素内部相同的可观察行为）：
<span class="icon-phone"
title="Our phone number"></span>+33 7 1234576
回答by Chris Sobolewski
You should use <span>or something along those lines instead. You can use the title=""attribute to give some text on hover, if that's what you're looking for. As far as providing accessability to screen readers, or SEO value, you could add the following CSS:
你应该使用<span>或类似的东西。title=""如果这是您要查找的内容，您可以使用该属性在悬停时提供一些文本。至于为屏幕阅读器提供可访问性或 SEO 值，您可以添加以下 CSS：
.icon-lock{
text-indent:-99999px;
}
And then write your markup like so:
然后像这样写你的标记：
<span class="icon-lock">What I want the screen reader to say</span>
回答by Diodeus - James MacFarlane
<i>tags are for marking up text. You are changing the semantic meaning of this tag to something that has nothing to do using italics (and even the italic tag is a bad idea).
You should be using a SPANinstead.
<i>标签用于标记文本。您正在将此标记的语义含义更改为与使用斜体无关的内容（甚至斜体标记也是一个坏主意）。你应该使用 aSPAN代替。
Italic elements do not support altattributes, IMGelements do. If you want an ALTattribute, use an image.
斜体元素不支持alt属性，IMG元素支持。如果需要ALT属性，请使用图像。
回答by NoseToThePage
I think the role for fonts that act like images should be reserved to role="img". This can then be used with aria-label="alt-text". It works because of the ARIA Accessible Name algorithm. See: Aria Techniques Using Img Role.
我认为像图像一样的字体的角色应该保留给 role="img"。这可以与 aria-label="alt-text" 一起使用。它的工作原理是基于 ARIA 可访问名称算法。请参阅：使用 Img 角色的 Aria 技术。
