在网页中,没有用于Facebook/Twitter图标的工具提示。当我检查网页的代码时,我看到了:标题属性属性 wis如下代码中突出显示了所缺少的。
<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>
请建议如果"标题"在HTML代码中没有值时可能会发生的可访问性问题。
在此上下文中丢失的title
属性没有可访问性问题(在<a href>
上(。不要在这里使用它。
https://www.paciellogroup.com/blog/2013/01/ususe-the-html-title-title-attribute-upded/
由于缺乏支持,因此标题属性没有用:
- 显示在手机浏览器上查看的Web内容信息。通常,在桌面浏览器中,标题属性内容显示为工具提示。据我所知,工具提示显示在任何移动浏览器中不支持,并且不支持访问标题属性内容的替代视觉视觉方法。
- 为无法使用鼠标的人提供信息。通常在桌面浏览器中,标题属性内容显示为工具提示。尽管工具提示行为已经支持了10多年,但尚未浏览器(IE10 [focusable Elements]除外(尚未实现一种使用键盘显示标题属性内容的实用方法。
- 在大多数HTML元素上使用它为各种辅助技术的用户提供信息。屏幕读取器不统一支持访问标题属性信息
尽管图像具有alt
属性,但此代码具有明确的空title
标签,该标签可以导致ScreenReaders的不确定行为。
您有两个解决方案:
- 您可以从
a
标签中删除空的title
属性。 - 您可以使用此
title
属性来显示使用ScreenReaders的人可能会看到的信息(因为title
属性没有良好的ScreenReader支持(
如果您想使用屏幕读取器使用明确针对人员,请在a
元素上使用aria-label
属性。例如:
<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>