i标记的Alt或title属性

Question

我使用font-awesome并显示他们的字体:

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

这将显示一个漂亮的小锁符号.为了让用户知道究竟是什么意思,我尝试添加诸如title和alt之类的属性,但无济于事.

是否有任何属性我可以用于<i>执行与图像和标题链接相同的任务的标记？

Answer 1

您可以title在i元素上使用该属性,例如,任何元素

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

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

屏幕阅读器可以为用户提供对title属性的可选访问,但我不确定他们对具有空内容的元素的处理方式.

Answer 2

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

• 角色表示删除元素的隐式本机角色语义.如果您(ab)使用具有本机语义的元素来提供图标,这一点尤为重要,因为在您的示例中使用i元素(根据规范,"代表备用语音中的文本范围)或情绪[...]").
• 一个aria-label,用于提供标记元素的字符串值-如果您可以使用浏览器在悬停时显示工具提示,则可以使用本机HTML 标题属性.
• 一个唱段隐藏属性隐藏生成的内容从辅助技术(如您使用的图标字体的家庭,有一个生成人物:前:后).根据规格:

只有隐藏此内容的行为旨在通过删除冗余或无关内容来改善辅助技术用户的体验时,作者可以谨慎地使用隐藏式隐藏隐藏的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

Answer 3

您应该使用<span>或沿着这些线的东西.您可以使用该title=""属性在悬停时提供一些文本,如果这是您正在寻找的内容.至于为屏幕阅读器提供可访问性或SEO值,您可以添加以下CSS:

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

然后写下你的标记:

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