Hello, welcome to this tutorial!
Today, I'm going to be explaining how to use alt text for your images.
<img src="https://image_link" alt="image_attributes"/>
First of all, what is "Alt Text"?
Alt Text which is also known as Alt Attributes, are used within an HTML code to describe the appearance and function of an image on a page.
They describe the image to screen readers and other users. Also, when the user is experiencing a poor network that prevents the images from showing, alt attributes are shown instead to the users.
That was just a little introduction to Alt Text.
Back to How To Write Good Alt Text for your Images
The Number 1 rule for every image on a website is to always have an alt attributes.
When writing Alt text that includes abbreviation, always use uppercase. For example : MIT, WHO, etc. They are pronounced letter by letter by screen readers.
If you don't want your image to be read by screen readers, that is the image is not relevant, you may use an empty string as the alt attribute.
<img src="https://image_link" alt=""/>
When writing an alt text for an image, avoid the use of "image of" or "graphic of", it will just be a repetition.
Let me explain better,
<img src="https://dog.jpg" alt="Image of a German Shepherd dog"/>
Screen readers read this code as, "Image of a German Shepherd dog image", but if written as:
<img src="https://dog.jpg" alt="German Shepherd dog"/>
It is read as "German Shepherd dog, image"
Make sure your alt texts describes the image clearly or creates a picture of the image in the mind of your readers.
Be brief and concise when describing your images.
Did you enjoy this blog post?
Follow me not to miss any, we can also hangout on Twitter my DM is widely open.