HTML - Semantic way of displaying images/icons/user interface elements?

Question

Is it true that there are semantically correct & incorrect ways of displaying pictures/icons?
I mean of course it's not very friendly to include all pictures of a newspaper article as background images because that way, screen readers can't read out the alt text, but what about icons or user interface elements? Is it justifiable from a semantic oriented point of view to include these as background-images?

Answer 1

There are some semantically correct and incorrect ways of displaying different kinds of images.

• Normal images It's better to use standard <img> tags, because they are often the main content of a site. These should have alt tags to inform users about important parts of content.
• Icons are a kind of image which isn't the main content of your site, but they should also be displayed by using <img> tags because it's important for usability to show what specific icons do if it's not displayed correctly.
• Not important pictures which make the site nice and are not main content of the site should be displayed as background, because then you do not use unnecessary Nodes in your DOM.

Answer 2

I don't think you should include icons as an separate element just representing that icon; e.g. an img or i.

Instead each icon represents a specific function – therefore you should use an element that could be used for that functionality, e.g. an anchor a or a button. Each of those elements should have a non-graphical content that could be parsed by screen readers and web spiders. You could then beautify those elements by using background images for some graphical icon.

Using separate markup for icons is a semantic error/mistake. The icon itself does nothing. It's just there to memorize the function of the underlying element. But in fact those elements are still there when you remove the icon.

So yes, I always would include icons as background images to an element directly or to a generated pseudo element.