HTML img tag title attribute vs alt attribute

Question

I was browsing Amazon and I noticed that when searching  1TB  if you hover the mouse cursor over the stars rating  image  you only see the score if using IE   If you are using another browser then the score won t show   A rating of 3 8 and a rating of 4 2 both show up as 4 stars  Of course a 3 8 stars vs 4 2 stars  76  vs 84  score  could make a difference   This is because the standard way of displaying alt text is only when the user turns off graphics or when the browser is  read out   e g browser for users who are visually  impaired    IE however  shows it on hover   So I think if Amazon is to show it regardless of the user s browser  then title should be used in addition to alt  Would you agree

User · Answer

You should not use title attribute for the img element. The reasoning behind this is quite simple:

Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.

Source: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 includes general advice on use of the title attribute:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to apear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Source: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

When it comes to accessibility and different screen readers:

Jaws 10-11: turned off by default
Window-Eyes 7.02: turned on by default
NVDA: not supported (no support options)
VoiceOver: not supported (no support options)

Hence, as Denis Boudreau adequately put it: clearly not a recommended practice.

User · Answer

They are used for different things  The alt attribute is used instead of the image  If the image can t be shown  and in screen readers   The title attribute is shown along with the image  typically as a hover tooltip   One should not be used  instead  of the other  Each should be used properly  to do the things they were designed to do

User · Answer

ALT Attribute  The alt attribute is defined in a set of tags  namely  img  area and optionally for input and applet  to allow you to provide a text equivalent for the object   A text equivalent brings the following benefits to your web site and its visitors in the following common situations    nowadays  Web browsers are available in a very wide variety of platforms with very different capacities  some cannot display images at all or only a restricted set of type of images  some can be configured to not load images  If your code has the alt attribute set in its images  most of these browsers will display the description you gave instead of the images some of your visitors cannot see images  be they blind  color-blind  low-sighted  the alt attribute is of great help for those people that can rely on it to have a good idea of what s on your page search engine bots belong to the two above categories  if you want your website to be indexed as well as it deserves  use the alt attribute to make sure that they won t miss important sections of your pages    Title Attribute  The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute  The help may include format information or examples of input   Example 1  A pulldown menu that limits the scope of a search A search form uses a pulldown menu to limit the scope of the search  The pulldown menu is immediately adjacent to the text field used to enter the search term  The relationship between the search field and the pulldown menu is clear to users who can see the visual design  which does not have room for a visible label  The title attribute is used to identify the select menu  The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers    lt label for  searchTerm  gt Search for  lt  label gt   lt input id  searchTerm  type  text  size  30  value    name  searchTerm  gt   lt select title  Search in  id  scope  gt           lt  select gt     Example 2  Input fields for a phone number A Web page contains controls for entering a phone number in the United States  with three fields for area code  exchange  and last four digits    lt fieldset gt       lt legend gt Phone number lt  legend gt       lt input id  areaCode  name  areaCode  title  Area Code  type  text  size  3  value     gt       lt input id  exchange  name  exchange  title  First three digits of phone number  type  text  size  3  value     gt       lt input id  lastDigits  name  lastDigits  title  Last four digits of phone number  type  text  size  4  value     gt   lt  fieldset gt     Example 3  A Search Function  A Web page contains a text field where the user can enter search terms and a button labeled  Search  for performing the search  The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered    lt input type  text  title  Type search term here   gt   lt input type  submit  value  Search   gt    Example 4  A data table of form controls A data table of form controls needs to associate each control with the column and row headers for that cell  Without a title  or off-screen LABEL  it is difficult for non-visual users to pause and interrogate for corresponding row column header values using their assistive technology while tabbing through the form   For example  a survey form has four column headers in first row  Question  Agree  Undecided  Disagree  Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns  The title attribute for every radio button is a concatenation of the answer choice  column header  and the text of the question  row header  with a hyphen or colon as a separator   Img Element  Allowed attributes mentioned at MDN     alt crossorigin decoding height importance  experimental api  intrinsicsize  experimental api  ismap referrerpolicy  experimental api  src srcset width usemap   As you can see title attribute is not allowed inside img element  I would use alt attribute and if requires I would use CSS  Example  pseudo class  hover  instead of title attribute

User · Answer

I d go for both   Title will show a nice tooltip in all browsers and alt will give a description when browsing in a browser with no images   That said  I d love to see some stats of how many  surfers  out there going to a  store  to browse merchandise actually have images turned off or are using a browser that doesn t support images   I think the days where 90  of the population is using a 28k modem to connect to the InterWeb is looooong over

User · Answer

No  I think alt is better because the purpose of that attribute is to provide  alternate  text in the event that the image cannot be view  whether it be that the image is missing or that the browser itself is incapable of displaying it

User · Answer

In my opinion should the alt text always describe what is visible in the picture  for the case that the image is not displayed      alt   text  CS        For user agents that cannot display images  forms  or applets  this attribute specifies alternate text  The language of the alternate text is specified by the lang attribute    w3 org

User · Answer

alt and title are for different things  as already mentioned  While the title attribute will provide a tooltip  alt is also an important attribute  since it specifies text to be displayed if the image can t be displayed   And in some browsers  such as firefox  you ll also see this text while the image loads   Another point that I feel should be made is that the alt attribute is required to validate as an XHTML document  whereas the title attribute is just an  extra option   as it were

User · Answer

The MVCFutures for ASP NET MVC decided to do both  In fact if you provide  alt  it will automatically create a  title  with the same value for you   I don t have the source code to hand but a quick google search turned up a test case for it        TestMethod      public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag             HtmlHelper html   TestHelper GetHtmlHelper new ViewDataDictionary             string imageResult   html Image   system web mvc jpg   new   alt    this is an alt value              Assert AreEqual   lt img alt   this is an alt value   src    system web mvc jpg   title   this is an alt value     gt    imageResult

User · Answer

The ALT attribute is for the visually impaired user that would use a screen reader  If the ALT is missing from ANY image tag  the entire url for the image will be read  If the images are for part of the design of the site  they should still have the ALT but they can be left empty so the url doesn t have to be read for every part of the site

User · Answer

I would ALWAYS go with both the alt and the title attributes  Many developers have been using this pattern now for over 20 years to deal with IE and other issues  So this is not new knowledge  Its just been rediscovered by new developers that didn t bother to learn from the past  In addition  in HTML5 you should start using the new HTML5 picture element wrapped in figure with full WPA-ARIA attributes for greater accessibility  as well as support of assistive technologies  screen readers  and the like  Because this element is not supported in many older browsers   BUT degrades gracefully   I recommend the following HTML design pattern now for images in HTML   lt figure aria-labelledby  quot picturecaption2 quot  gt       lt picture id  quot picture2 quot  gt           lt source srcset  quot image webp quot  type  quot image webp quot  media  quot  min-width  800px  quot    gt           lt source srcset  quot image gif quot  type  quot image gif quot    gt           lt img id  quot image2 quot  style  quot height auto max-width  100   quot  src  quot image jpg quot  width  quot 255 quot  height  quot 200 quot  alt  quot image The World Wide Web quot  title  quot The World Wide Web quot  loading  quot lazy quot  no-referrer  quot no-referrer quot  onerror  quot this onerror null  quot    gt       lt  picture gt       lt figcaption id  quot picturecaption2 quot  gt  lt small gt  quot My Cool Picture quot    lt a href  quot http   creativecommons org licenses  quot  target  quot  blank quot  gt A License lt  a gt     via  lt a href  quot https   commons wikimedia org wiki  quot  target  quot  blank quot  gt Wikimedia Commons lt  a gt  lt  small gt  lt  figcaption gt   lt  figure gt   The code above has many extra  quot goodies quot  beside alt and title  including ARIA attributes  support for WebP  a media query supporting higher resolution imagery  and a nice fallback pattern supporting older image formats  It shows a fully decorated image example that uses new technologies while still supporting old ones with progressive design patterns  REMEMBER   ALWAYS SUPPORT THE OLD BROWSERS

User · Answer

That s because they serve different purposes and they both should be used not just one over the other   The  alt  is for what you guys already said  so you can see what s the image it s all about if the image can t be displayed  for whatever reason   it also allows visually impaired people to understand what s the image about   The  title  attribute is the correct one to show the tooltip with a title for the image

User · Answer

I believe alt is required for strict XHTML compliance   As others have noted  title is for tooltips  nice to have   alt is for accessibility  Nothing wrong with using both  but alt should always be there

[html] HTML img tag: title attribute vs. alt attribute?

Examples related to html

Examples related to accessibility

Examples related to alt