C# 无法使用键盘访问工具提示内容

当我用键盘聚焦在图像工具提示上时，我看不到它的内容。下面是一个代码示例：

使用鼠标悬停时，我可以看到工具提示内容。

根据

title属性表示元素的建议信息，例如适用于工具提示的信息

本规范还添加了以下警告：

警告目前不鼓励依赖title属性，因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性（例如，要求鼠标等定点设备显示工具提示，不包括仅键盘用户和仅触摸用户，如任何使用现代手机或平板电脑的用户）

换句话说，不应该依赖

title

属性向键盘用户（包括屏幕阅读器用户）公开信息。这个问题已经存在多年了。可访问性标准建议（ed）仅在

frame

元素上使用

title

属性（即

input

元素（如果出于美观原因不使用

label

元素）和

abbr

元素。另请参见Steve Faulkner的blogpost。（尽管blogpost上次更新是在2013年，但该建议基本上仍然有效。）

如果您想在键盘焦点上直观地显示

title

属性的内容，则需要依赖CSS、JavaScript或两者的组合。但是，请注意，

img

元素在默认情况下不可键盘焦点。

根据

title属性表示元素的建议信息，例如适用于工具提示的信息

本规范还添加了以下警告：

警告！目前不鼓励依赖title属性，因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性（例如，要求鼠标等定点设备显示工具提示，不包括仅键盘用户和仅触摸用户，如任何使用现代手机或平板电脑的用户）

换句话说，不应该依赖

title

属性向键盘用户（包括屏幕阅读器用户）公开信息。这个问题已经存在多年了。可访问性标准建议（ed）仅在

frame

元素上使用

title

属性（即

input

元素（如果出于美观原因不使用

label

元素）和

abbr

元素。另请参见Steve Faulkner的blogpost。（尽管blogpost上次更新是在2013年，但该建议基本上仍然有效。）

如果您想在键盘焦点上直观地显示

title

属性的内容，则需要依赖CSS、JavaScript或两者的组合。但是，请注意，

img

元素在默认情况下不可键盘焦点。

简短回答 不要使用

title

属性，它没有任何更适合作为图像下的标题或

上的

的用途（请不要在输入上使用

标题

。。即使对于搜索框，即使是“占位符”文本也更可取，因为至少一些屏幕阅读器会读取该文本，并且您的触摸屏用户仍能读取输入的内容）

中等回答

title

属性的支持率较低，对现代触摸屏时代的人们提供的支持很少（只有不使用放大镜或其他辅助技术的有视力的鼠标用户才能从

title

属性中获得任何好处），一般来说，对于大多数用例来说，这不是一个好主意

作为一般规则，如果您确实想使用它（以便鼠标用户可以看到图像的内容），那么请确保它与

alt

属性相同，以便为屏幕阅读器用户提供与非屏幕阅读器用户相同的信息/体验

长话短说 我们对此进行了一段时间的研究，在某些情况下，

title

属性（或者至少是显示有关图像的额外信息的效果）可能很有用。最后，我们“推出了自己的”版本的

title

属性，该属性允许我们获得有关图片的附加信息，而不会中断带有

标题的文档流

在下面的示例中（我们使用的精简版本），我们有：-

可通过键盘和悬停键访问
为需要它的人提供了有用的信息，这增加了可访问性的好处（因为标题工具提示在某些浏览器中不遵循最小大小准则，即使更改浏览器中的字体大小设置也不会缩放）
让它在触摸设备上工作
其功能设计类似于插件，您可以生成标准标记，剩下的部分可以使用一点JavaScript和CSS魔术
它仍然不如简单地在图像下提供一个标题那么好，但我相信它抓住了图像上“标题”属性的设计精神，同时考虑了从引入时起的可访问性和技术变化

请注意-前80行左右的JavaScript只是一个允许jQuery风格语法的小助手库，相关部分从
$（“img”）.each（function（）{
开始


//jQuery的微小替代品-适应于ki.js的版本
！函数（b、c、d、e、f）{
f=b[“加上”+e]
功能i（a、d、i）{
对于（d=（a&&a.nodeType？[a]：“”+a===a？b.queryselectoral（a）：c），i=d.length；i--；c.unshift.call（this，d[i]）；
}
$=函数（a）{
返回/^f/.test（a的类型）？/in/.test（b.readySta