Lately it seems that when I'm trying to find easy topics to write about, I end up digging down a rabbit hole... The <img> element is a perfect example. As you already know, it's used to embed an image in a web page, but don't stop reading: there are a couple of attributes that you may not know. So let's try to step up our game with a two-part <img> article. This one is more about labeling and accessibility, the next one will be focused on lesser-known and more advanced attributes.
Read Images with <img> tag - advanced attributes.
Basic structure
Tag <img> is one of the few "self-closing tags". This means that there is no </img> tag and hence no content. For this is good practice to not forget a good "/" ad the end, just like
<img src="file.jpg" alt="" />
Labeling and accessibility-related attributes
alt attribute
Use descriptive file names and alt text: SEO will thank you for this. The file name should give an idea of what the image is about, and the alt text should describe the content of the image in a concise and meaningful way. Keep it under 125 characters, define the main "point of view" (it depends mainly on the topic of your document), use relevant keywords and keep your word choice simple. This will help you with search engines. And also with your design: you don't want a blob of text if your image is not going to be loaded: keep the text straight to the point.
An alt attribute must always be present, but for decorative images it can be empty (alt="").
title attribute
Use an attribute title if you need to add a descriptive, short pop-over to your image. Just remember to not duplicate the same text of the alt attribute. By the way, at least at the moment, title text is useless in terms of SEO, but a potentially nice addition for UX/UI: keep that in mind.
aria-describedby attribute
Use the aria-describedby attribute (it must point to an element with unique id) to provide additional information about the image, such as a caption or description. It is useful (and semantically more correct than alt text) when you have longer, more descriptive text, or when you want to add an explanation of what the image contains. In providing a diagram or an infographic, for example, it would be a great feature to have a textual representation of what's on the image, both for screen reader users and for SEO.
aria-hidden attribute
On the opposite side, you should use aria-hidden attribute to hide decorative images that don't convey any meaningful content. This can help users with disabilities focus on the important content of your website without being distracted by text that at the end of the day doesn't add anything to the document's content.
Final words
Images are a pillar of web design and at the same time a common element for content. Since it's simple to manage them in an accessible way, there's no excuse not do to it properly!
In the next article we'll focus on some advanced (and scarcely used) attributesof <img> element.
Read Images with <img> tag - advanced attributes.