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的推进，使用字体图标时，您可能应该使用以下组合来改善可访问性：

角色presentation，用于删除元素的隐式本机角色语义。如果您（ab）使用具有本机语义的元素来提供图标，这一点尤其重要，因为在您的示例中使用i元素（根据规范，“代表另一个声音或心情的文本范围[...]“）。
aria-label提供一个字符串值，用于标记元素 -or - 本机HTML title属性，如果您在浏览器显示悬停时的工具提示时没有问题。
aria-hidden属性，用于隐藏辅助技术中的生成的内容（因为您使用的是图标字体系列，所以有生成的字符：之前：之后）。根据规格：

作者可以谨慎使用 aria-hidden 来隐藏可见的渲染来自辅助技术的内容，只有隐藏此行为的行为内容旨在改善辅助用户的体验删除冗余或无关内容的技术。作者使用aria-hidden隐藏屏幕阅读器中的可见内容确保相同或等同的含义和功能接触辅助技术。

我不知道您的确切用例，因此我冒昧地使用提供电话号码的简单案例。按优先顺序递减， I 将使用：

<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>

Answer 4

<i>标记用于标记文本。您正在将此标记的语义含义更改为使用斜体无关的内容（甚至斜体标记也是一个坏主意）。您应该使用SPAN代替。

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

Answer 5

我认为像图像的字体的角色应该保留给role =“ img”。然后可以与aria-label =“ alt-text”一起使用。由于ARIA可访问名称算法的缘故，它可以工作。参见：Aria Techniques Using Img Role。

i标记的Alt或title属性

5 个答案: