正确使用HTML title属性的一些建议

2019-10-26 17:15:13

字体：大中小

来源：转载

供稿：网友

如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么请使用title属性。
细节

HTML的title属性本身有问题。之所以有问题是因为它在一些重要的方面表现的不够好，尽管它陪伴我们超过14年了。随着触摸设备的兴起，这个属性的作用进一步降低。title属性的可访问性变得很鸡肋，由于缺少浏览器的支持，屏幕阅读器的支持和制作人员的重视。
下列情况下title属性由于缺乏支持变得多余：

对于在手机浏览器里访问web内容信息的人。通常title属性的内容在桌面浏览器里显示为提示信息。据我所知，没有任何手机浏览器支持显示提示信息，并且也没有其他访问title属性内容的视觉方法。
对于那些无法使用鼠标的人提供信息。通常title属性的内容在桌面浏览器里显示为提示信息。虽然提示信息的行为已经有10多年历史，但一直没有浏览器实现使用键盘显示title属性的方法。
对于在大多数HTML元素上使用它为使用各种辅助技术的人提供信息。据我所知屏幕阅读器对访问title属性信息一致不支持。

title属性不友好用户如下

手机用户
仅使用键盘的用户
使用屏幕放大器的用户
屏幕阅读器用户
精细运动技能障碍的用户
认知障碍的用户

title属性有用的例子：

为frame或iframe元素贴上标签：
<frame title="navigation">
提供需要程序才能实现的在特殊情况下才显示的标签，直接使用可见的文本标签会显得多余：
<input type="text" title="search"> <input type="submit" value="search">
数据表格中的标签控件。

title属性无用或用处不大的例子：

为不能作为文本的链接或周围内容添加额外信息：
<a href="newsletter.PDF" title="PDF file, size 1 mb.">newsletter</a>
相反这样的信息应该作为链接文本的部分或在链接的旁边。
提供和链接文本相同的信息：
<a href="newsletter.PDF" title="newsletter">newsletter</a>
建议不要复制链接内容作为title属性。这其实相当于什么都没做。
用于图像的标题：
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
大概标题信息是最重要的信息，应该能被所有用户默认访问。如果是这样，那么这个内容应该紧挨着图片。
用来代替表单的标签，去掉可见的文本标签：
<input type="text" title="name">
屏幕阅读器的用户将会访问表单元素的标签，由于title属性被列入可访问性api内的属性名称（当文本标签使用标签元素时是不被支持的）。许多其他用户并不如此。建议尽可能包括一个可见的文本标签。

上一篇：html标准写法与dreamweaver自动生成的不一样

下一篇：使一个input文本框随其中内容而变化长度的方法