Facebook / Twitter图标缺少工具提示 [英] Missing Tooltip for Facebook/Twitter icons

问题描述

在一个网页中，没有用于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 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图标缺少工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！