缺少Facebook/Twitter图标的工具提示



在网页中,没有用于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>

最新更新