i 标签的 Alt 或标题属性-前端问题

Alt or title attribute for i tag(i 标签的 Alt 或标题属性)

本文介绍了i 标签的 Alt 或标题属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I use font-awesome and display their fonts like that:

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

这将显示一个漂亮的小锁符号.为了让用户知道这到底是什么意思，我尝试添加标题和 alt 等属性，但无济于事.

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.

我可以为 <i> 标签使用任何属性来执行与图像的 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 元素上使用 title 属性，就像任何元素一样，例如

You can use the title attribute on an i element, like any element, e.g.

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

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

Whether it helps is a more difficult issue. Browsers usually show the title attribute 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 属性的可选访问权限，但我不确定他们如何处理内容为空的元素.

Screen readers may give the user optional access to title attributes, but I’m not sure what they do with elements with empty content.

这篇关于i 标签的 Alt 或标题属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！