在网页中,没有Facebook / Twitter图标的工具提示。当我检查网页代码时,我看到:标题属性值缺失,如下面的代码所示。
<a onclick="ga('send', 'social', 'Facebook',
'send''https://www.Website');"
href="https://www.Website" **title** target="_blank" ><img
src="http://www.Website/themes/act/images/facebook-mouseover.jpg"
alt="Facebook" ></a>
如果&#34; title&#34;请提供可能出现的辅助功能问题。在HTML代码中没有任何价值。
答案 0 :(得分:0)
此上下文中缺少title
属性没有可访问性问题(在<a href>
上)。不要在这里使用它。
https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/
由于缺乏支持,title属性无用的情况:
- 显示在手机浏览器上查看的网页内容的信息。通常在桌面浏览器中,标题属性内容显示为工具提示。根据我的发现,任何移动浏览器都不支持工具提示显示,并且不支持访问标题属性内容的其他可视方法。
- 为不能使用鼠标的人提供信息。通常在桌面浏览器中,标题属性内容显示为工具提示。虽然工具提示行为已经支持了10多年,但是目前还没有浏览器(IE10 + [关注焦点元素]除外)实现了使用键盘显示标题属性内容的实用方法。
- 在大多数HTML元素上使用它,为各种辅助技术的用户提供信息。屏幕阅读器不统一支持访问标题属性信息
答案 1 :(得分:0)
虽然图片具有alt
属性,但此代码具有明确的空title
标记,这可能会导致屏幕阅读器出现未确定的行为。
您有两种解决方案:
title
代码中删除空的a
属性。title
属性来显示人们使用屏幕阅读器可以兼顾的信息(因为title
属性没有良好的屏幕阅读器支持)如果您想明确定位使用屏幕阅读器的人,请aria-label
元素上的a
属性。例如:
<a href="https://www.Website" target="_blank"
title="Publish to Facebook (⧉)"
aria-label="Publish to Facebook (opens in a new tab)">
<img src="http://www.Website/themes/act/images/facebook-mouseover.jpg"
alt="Facebook" />
</a>