Facebook / Twitter图标缺少工具提示

问题描述：

在一个网页中，没有用于Facebook / Twitter图标的工具提示。当检查该网页的代码时，我发现： title属性值丢失了，如下面的代码中突出显示。

In a webpage,there was no tooltip present for Facebook/Twitter icons.When I inspected the code for the webpage, I saw :the title attribute value was missing as highlighted in the code below.

    <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没有值，请提出可能出现的可访问性问题。 / p>

Please suggest the accessibility issue that might occur if "title" has no value in the HTML code.

答

尽管图像具有 alt 属性，但是此代码具有显式空的 title 标记可能导致屏幕阅读器无法确定行为。

Although the image has an alt attribute, this code has an explicit empty title tag which can lead to undetermined behavior from screenreaders.

您有两种解决方案：

您可以从 a $ c中删除空的 title 属性$ c>标签。

您可以使用此 title 属性来显示使用屏幕阅读器的人可能会随意看到的信息（例如 title 属性没有良好的屏幕阅读器支持）

You can remove the empty title attribute from the a tag.
You can use this title attribute to show an information that may be facultatively seen by people using screenreaders (as the title attribute does not have a good screenreader support)

如果需要为了明确使用屏幕阅读器来定位用户，请在 a 元素上使用 aria-label 属性。例如：

If you want to explicitely target people using a screen reader use, the aria-label attribute on the a element. For instance:

<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图标缺少工具提示

相关推荐