4

Suppose I have a table that has icons as a concise form of some value. So I was looking at the title in the svg element. So in this scenario should the title describe the shape of the svg

enter image description here

or the value the icon represents?

enter image description here

The documentation vaguely hints that it should describe the shape. But I do not see any value in that.

Improve this question

3 Answers 3

Reset to default
4

You should not use <title> here. The title should be used to describe the image, if that makes sense for someone that can't see the image. In this case, it is obvious that the icon itself doesn't need any description. But the message it brings to people who can see it, is what you should focus on. When the image isn't visible (for either a human or technical reason) is it still relevant to provide this message to the user? If the answer is yes, support the image with a label. If this takes too much space, you can for example create a tooltip for it (not using title attributes/elements!) and hide it in a way a screen reader will still read it (see this technique). I would probably add a button with an (?) or (i) icon to open the tooltip on touch or click.

You can also point the icon to the label/message/tooltip using the aria-describedby attribute. It takes some testing to know what is the best approach.

Improve this answer
1
  • your answer encompasses answer almost all of my confusions. most of the documentation including the official one does not recommend to rely on the tooltip feature of the title attribute.
    – Pravin
    Jan 16, 2020 at 13:06
2

The <title> should be used as if it were an alt tag, describing the item for screen reader users as if it was just a .png or similar.

I answered a similar question on Stack Overflow explaining how to think of the <title> and <description> elements (among other things, first couple of paragraphs are most relevant to you.)

Improve this answer
2

If there is no value in describing the image then there is no value in using title. You do not need to title (or alt) every image just because it's there. (Note that alt is a required attribute so alt="" would be appropriate.)

Use such things to describe an image to a person who is unable to view the image for any reason. Whether sight impaired or the image just didn't get loaded. If the content is understandable without the image, then don't bother. Such things--as your first image--would be superfluous.

Improve this answer
2
  • i might have phrased it in a wrong way. first thing i would like to clarify is I am not saying there is not value in adding accessibility. Of course there is. What I am trying to ask is I could not justify describing the shape of object in title to mentioning the value that icon represents. For eg: there is a check mark. so title could say "check green". But the value that is representing could be "documents approved". so i personally thought that adding the value the icon represents, in this case "documents approved', to the title makes more sense than the shape of the icon.
    – Pravin
    Jan 16, 2020 at 12:31
  • what made me double down on this argument in my head is, when you hover on sth, the title pops up. so the user could misunderstand what the icon is, and that description in the popover clarifies what the icon represents. my understanding and approach could be totally wrong, hence coming here to clarify.
    – Pravin
    Jan 16, 2020 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.