我无法看到图像工具提示的内容时,焦点在它使用键盘。下面是一个代码示例:<img id= "id1" title ="title1" tabindex ="0" src="/images/home.gif" alt="title1" />我可以看到工具提示内容时,悬停使用鼠标。
<img id= "id1" title ="title1" tabindex ="0" src="/images/home.gif" alt="title1" />
pn9klfpd1#
不要使用title属性,它不适合用作图像下的标题或<input>上的<label>(请不要在输入中使用title....即使是搜索框,即使是“占位符”文本也是首选的,因为至少有一些屏幕阅读器会阅读它,而您的触摸屏用户仍然能够阅读输入的内容)。
title
<input>
<label>
title属性的支持度很低,对现代触摸屏时代的人们来说几乎没有什么帮助(只有不使用放大镜或其他辅助技术的有视力的鼠标用户才能从title属性中获得任何东西),而且通常对大多数用例来说都不是一个好主意。作为一般规则,如果您确实要使用它(以便鼠标用户可以看到图像的内容),请确保它与alt属性相同,以便您向屏幕阅读器用户提供与非屏幕阅读器用户相同的信息/体验。
alt
我们尝试了一段时间,在某些情况下,title属性(或者至少是显示图片额外信息的效果)可能会很有用。最后,我们推出了自己的title属性版本,它允许我们获得图片的额外信息,而不会中断带有caption的文档流。在下面的例子中(我们使用的精简版本),我们有:-1.使其可通过键盘和悬停访问。1.为需要的人提供有用的信息,这具有可访问的附加好处(因为标题工具提示在某些浏览器中不遵循最小大小准则,并且即使您在浏览器中更改字体大小设置也不缩放)。1.让它在触摸设备上工作。1.它的设计功能类似于插件,您可以生成标准标记,剩下的工作只需一点JavaScript和CSS的魔力。它仍然不如简单地在图像下提供一个标题,但我相信它抓住了图像上的“标题”属性的设计精神,同时考虑到了它推出时的可访问性和技术变化。
caption
请注意-JavaScript的前80行左右只是一个支持jQuery风格语法的小助手库,相关部分从$("img").each(function(){开始。
$("img").each(function(){
第一个
whitzsjs2#
根据HTML5.2规范,title属性代表项目的建议信息,例如适用于工具提示的信息。该规范还添加了以下警告:
**警告!**目前不鼓励依赖title属性,因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性(例如,需要鼠标等指示设备来显示工具提示,这将只使用键盘的用户和只使用触摸的用户排除在外,例如任何使用现代电话或平板电脑的用户)。
换句话说,不应该依赖title属性向键盘用户公开信息,包括屏幕阅读器用户。这个问题已经存在很多年了。辅助功能标准建议(艾德)仅在frame元素上使用title属性(在HTML 5中已弃用)input元素(如果你出于审美的原因不使用label元素)和abbr元素。(尽管这篇博文最后一次更新是在2013年,但这条建议基本上仍然有效。)如果你想让title属性的内容在键盘焦点上显示出来,你需要依靠CSS、JavaScript或者两者的结合。但是,注意,img元素在默认情况下是不可键盘焦点的。
frame
input
label
abbr
img
2条答案
按热度按时间pn9klfpd1#
简短回答
不要使用
title
属性,它不适合用作图像下的标题或<input>
上的<label>
(请不要在输入中使用title
....即使是搜索框,即使是“占位符”文本也是首选的,因为至少有一些屏幕阅读器会阅读它,而您的触摸屏用户仍然能够阅读输入的内容)。中等答案
title
属性的支持度很低,对现代触摸屏时代的人们来说几乎没有什么帮助(只有不使用放大镜或其他辅助技术的有视力的鼠标用户才能从title
属性中获得任何东西),而且通常对大多数用例来说都不是一个好主意。作为一般规则,如果您确实要使用它(以便鼠标用户可以看到图像的内容),请确保它与
alt
属性相同,以便您向屏幕阅读器用户提供与非屏幕阅读器用户相同的信息/体验。长答案
我们尝试了一段时间,在某些情况下,
title
属性(或者至少是显示图片额外信息的效果)可能会很有用。最后,我们推出了自己的title
属性版本,它允许我们获得图片的额外信息,而不会中断带有caption
的文档流。在下面的例子中(我们使用的精简版本),我们有:-
1.使其可通过键盘和悬停访问。
1.为需要的人提供有用的信息,这具有可访问的附加好处(因为标题工具提示在某些浏览器中不遵循最小大小准则,并且即使您在浏览器中更改字体大小设置也不缩放)。
1.让它在触摸设备上工作。
1.它的设计功能类似于插件,您可以生成标准标记,剩下的工作只需一点JavaScript和CSS的魔力。
它仍然不如简单地在图像下提供一个标题,但我相信它抓住了图像上的“标题”属性的设计精神,同时考虑到了它推出时的可访问性和技术变化。
请注意-JavaScript的前80行左右只是一个支持jQuery风格语法的小助手库,相关部分从
$("img").each(function(){
开始。第一个
whitzsjs2#
根据HTML5.2规范,
title属性代表项目的建议信息,例如适用于工具提示的信息。
该规范还添加了以下警告:
**警告!**目前不鼓励依赖title属性,因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性(例如,需要鼠标等指示设备来显示工具提示,这将只使用键盘的用户和只使用触摸的用户排除在外,例如任何使用现代电话或平板电脑的用户)。
换句话说,不应该依赖
title
属性向键盘用户公开信息,包括屏幕阅读器用户。这个问题已经存在很多年了。辅助功能标准建议(艾德)仅在frame
元素上使用title
属性(在HTML 5中已弃用)input
元素(如果你出于审美的原因不使用label
元素)和abbr
元素。(尽管这篇博文最后一次更新是在2013年,但这条建议基本上仍然有效。)如果你想让
title
属性的内容在键盘焦点上显示出来,你需要依靠CSS、JavaScript或者两者的结合。但是,注意,img
元素在默认情况下是不可键盘焦点的。