title - 关于 title/alt 属性

Question

我了解 title 和 alt 属性的用途，但我只是不了解它们的最佳用途，或者我是否可以使用相同的 title /alt 不止一次。

例如，以一个关于狗的网站为例:

根据我的理解，所有 img 标签都需要一个 alt 属性:

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

对同一主题的多张图片使用相同的 alt 属性是好的做法吗？

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

在每个标签中使用 title/alt 属性是好的做法吗？多次使用同一属性会怎样？

例子:

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

我的理解是 title 属性充当将鼠标悬停在文本上时出现的工具提示。这种事情必须在较新的浏览器中完成，但 alt 和 title 曾经在旧浏览器中做同样的事情。这些属性还可以作为搜索引擎识别您的网站的一种方法。

Answer 1

My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.

不，title 和 alt 属性具有不同的含义/目的(不是旧方法与新方法)。

---

标题

title attribute是 global attribute ，这意味着您可以在所有 元素上使用它。一般来说(注意一些元素(例如 abbr 元素)它有特殊的含义)它被定义为:

The title attribute represents advisory information for the element […]

您应该阅读属性的定义，它解释了应该(不)使用它的方式。

替代

alt 属性只能在 area 上使用, input (用于图像按钮)和 img element .对于 img，它有这个 meaning :

the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.

有many rules你应该(不)如何使用这个属性。

---

因此，alt 属性是图像的替代品:要么您看到图像要么您阅读替代文本。 alt 值应该不作为图像的补充给出/呈现。

title 属性提供附加信息，这些信息将同时提供给(看到图像的用户和阅读图像的用户)替代文本)。但是，您不应该将 title 属性用作获取重要信息的唯一方式，因为……

• …典型的演示文稿通常“隐藏”在工具提示后面(用户不一定知道工具提示的存在，因为他们不会将鼠标悬停在所有元素上)
• …键盘或触摸屏用户通常根本看不到工具提示，因为他们无法悬停
• … 屏幕阅读器通常不会阅读/宣布 title 值(在默认设置中)