关于 title/alt 属性 [英] About the title/alt attributes

问题描述

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

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

据我所知，所有 img 标签都需要一个 alt 属性:

对同一主题的多张图片使用相同的 alt 属性是一种好习惯吗?

在每个标签中使用 title/alt 属性是一种好习惯吗?多次使用同一个属性怎么样?

示例:

<li title=这条狗">狗 </li><li title=这条狗">狗 </li><li title=这条狗">狗 </li><li title=这条狗">狗 </li><li title=这条狗">狗 </li></ol><div id="正文"><p title=这只狗"></p><p title=这只狗"></p><p title=这只狗"></p><p title=这只狗"></p>

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

解决方案

我的理解是，在较新的浏览器中，标题标签用作工具提示/悬停在信息类型的事物上，而 alt 标签在旧浏览器中用于执行相同的操作.

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

<小时>

标题

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

<块引用>

title 属性表示元素 […]

的咨询信息

您应该阅读属性的定义，它解释了应该(不)如何使用它.

替代

alt 属性只能用于 area, input(用于图像按钮)和 img 元素.对于 img，它有这个 含义:

<块引用>

alt 属性的值是 img 元素的后备内容，并为无法处理图像或禁用图像加载的用户和用户代理提供等效内容.

有很多规则 你应该(不)如何使用这个属性.

<小时>

因此，alt 属性是图像的替代:EITHER你看到图像OR你阅读备选案文.alt 值应该不作为图像的补充给出/呈现.

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

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

I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.

For example, take a website about dogs:

From my understanding all img tags need an alt attribute:

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

Is it good practice to use the same alt attribute for multiple pictures on the same subject?

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

Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?

Example:

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

My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.

解决方案

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.

No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).

---

title

The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:

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

You should read the definition of the attribute, it explains how it should (not) be used.

alt

The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this 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.

There are many rules how you should (not) use this attribute.

---

So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.

The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …

• … the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
• … keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
• … screen readers often don't read/announce the title value (in the default settings)

这篇关于关于 title/alt 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！