替代标签的Alt或title属性
我使用font-awesome并显示他们的字体：
<i class="icon-lock"></i> 这将显示一个不错的小锁符号。 为了让用户知道究竟是什么意思，我尝试添加诸如title和alt之类的属性，但无济于事。
是否有任何属性我可以使用的标签执行相同的任务为图像和标题的链接？
你可以在i元素上使用title属性，比如任何元素
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
是否有帮助是一个更困难的问题。 浏览器通常将title属性值显示为鼠标hover的“工具提示”，但为什么用户将鼠标hover在图标上？ 而这样的工具提示可用性差; 所谓的CSS工具提示通常效果更好。
屏幕阅读器可能会给用户可选的title属性访问权限，但是我不确定他们如何处理内容为空的元素。
你应该使用<span>或其他东西。 如果这是你正在寻找的东西，你可以使用title=""属性给一些hover的文本。 就为屏幕阅读器提供访问权限或SEO价值，您可以添加以下CSS：
.icon-lock{ text-indent:-99999px; }
然后写下你的标记：
<span class="icon-lock">What I want the screen reader to say</span>
随着WAI-ARIA的进步，在使用字体图标时，您可能应该结合使用以下内容来提高可访问性：
- angular色表示去除元素的隐式本地angular色语义。 如果您（ab）使用具有本地语义的元素来提供图标，这一点尤其重要，因为在您的示例中，使用i元素（根据规范， “这代表了替代语音中的一段文本或心情[…]“ ）。
- 一个咏叹调标签提供一个标签元素的string值– 或 –一个本地的HTML 标题属性，如果你确定浏览器显示一个工具提示徘徊。
- 隐藏咏叹调属性隐藏辅助技术生成的内容 （因为您正在使用图标字体系列，有一个生成的字符：之前：之后）。 根据规格：
作者可能谨慎的使用隐藏的咏叹调来隐藏辅助技术中明显呈现的内容，只有隐藏此内容的行为旨在通过删除冗余或无关的内容来改善辅助技术用户的体验。 使用咏叹调隐藏的作者从屏幕阅读器隐藏可见内容必须确保相同或相当的意义和function暴露于辅助技术。
我不知道你的确切用例，所以我冒昧地使用提供电话号码的更简单的情况。 按照偏好的顺序， 我会使用：
<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`)
请注意， 咏叹调标签和标题属性应该描述元素的内容 。 不是下一个兄弟元素。 所以我觉得下面的解决scheme不符合规范（即使大多数可访问性工具实际上具有相同的可观察行为，就好像电话号码实际上在span元素内一样）：
<span class="icon-phone" title="Our phone number"></span>+33 7 1234576
<i>标记用于标记文本。 你正在将这个标签的语义意义改变成没有使用斜体的东西（甚至斜体标签也是一个坏主意）。 您应该使用SPAN来代替。
斜体元素不支持alt属性， IMG元素。 如果你想要一个ALT属性，使用一个图像。
