Missing Tooltip for Facebook/Twitter icons

Question

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>

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

Answer 1

There is no accessibility issue for a missing title attribute in this context (on an <a href>). Do not use it here.

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

Situations in which the the title attribute is not useful due to lack of support:

• Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers title attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing title attribute content are not supported.
• Providing information for people who cannot use a mouse. Typically in desktop browsers, title attribute content is displayed as a tooltip. Although the tooltip behaviour has been supported for 10+ years, no browser (except IE10+ [on focusable elements]) as yet has implemented a practical method to display title attribute content using the keyboard.
• Using it on most HTML elements to provide information for users of a variety of assistive technologies. Access to title attribute information is not supported uniformly by screen readers

Answer 2

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

You have two solutions:

• 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)

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>