Question

在网页中，没有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代码中没有任何价值。

Answer 1

此上下文中缺少title属性没有可访问性问题（在<a href>上）。不要在这里使用它。

https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/

由于缺乏支持，title属性无用的情况：


显示在手机浏览器上查看的网页内容的信息。通常在桌面浏览器中，标题属性内容显示为工具提示。根据我的发现，任何移动浏览器都不支持工具提示显示，并且不支持访问标题属性内容的其他可视方法。

为不能使用鼠标的人提供信息。通常在桌面浏览器中，标题属性内容显示为工具提示。虽然工具提示行为已经支持了10多年，但是目前还没有浏览器（IE10 + [关注焦点元素]除外）实现了使用键盘显示标题属性内容的实用方法。

在大多数HTML元素上使用它，为各种辅助技术的用户提供信息。屏幕阅读器不统一支持访问标题属性信息

Answer 2

虽然图片具有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>

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

2 个答案: