html img 标题,辅助功能 - HTML img标签：标题属性与alt属性？

ALT属性

title属性在一组标记中定义(即img,alt以及可选的:hover和title)，以允许您提供对象的文本等效项。

在以下常见情况下，等效的文本会为您的网站及其访问者带来以下好处：

如今，Web浏览器可用于各种各样的平台，具有不同的容量; 有些人根本不能显示图像，或者只能显示一组有限的图像; 有些可以配置为不加载图像。 如果您的代码在其图像中设置了alt属性，则大多数浏览器将显示您给出的描述而不是图像

你的一些访客看不到图像，他们是盲人，色盲，低视; alt属性对那些可以依赖它的人很有帮助，可以很好地了解页面上的内容

搜索引擎机器人属于上述两个类别：如果您希望将您的网站编入索引，请使用alt属性以确保它们不会错过您网页的重要部分。

标题属性

此技术的目的是通过在title属性中提供帮助信息，为用户输入表单中的数据时提供上下文相关帮助。 帮助可以包括格式信息或输入的示例。

示例1：限制搜索范围的下拉菜单

搜索表单使用下拉菜单来限制搜索范围。 下拉菜单紧邻用于输入搜索词的文本字段。 搜索字段和下拉菜单之间的关系对于可以看到视觉设计的用户来说是清楚的，该视觉设计没有可见标签的空间。 title属性用于标识img菜单。 alt属性可以由屏幕阅读器说出，或者显示为使用屏幕放大镜的人的工具提示。

Search for:

...

示例2：电话号码的输入字段

网页包含用于在美国输入电话号码的控件，其中包含三个区域代码，交换和最后四位数字段。

Phone number

示例3：搜索功能网页包含用户可以输入搜索词的文本字段和标记为“搜索”的按钮以执行搜索。 title属性用于标识表单控件，按钮位于文本字段的正后方，以便用户清楚文本字段是应输入搜索项的位置。

示例4：表单控件的数据表

表单控件的数据表需要将每个控件与该单元格的列和行标题相关联。 如果没有标题(或屏幕外LABEL)，非可视用户很难在表格中进行选项时使用他们的辅助技术暂停和查询相应的行/列标题值。

例如，调查表在第一行中有四个列标题：问题，同意，未定，不同意。 每个后续行包含一个问题，每个单元格中的单选按钮对应于三列中的答案选项。 每个单选按钮的title属性是答案选项(列标题)和问题文本(行标题)的连接，连字符或冒号作为分隔符。

Img元素

MDN提到的允许属性。

title

title

title

title

title(实验性api)

title(实验性api)

title

title(实验性api)

title

title

title

title

正如您所见，img元素内不允许title属性。 我会使用alt属性，如果需要我会使用CSS(例如：伪类:hover)而不是title属性。