Making Images Respect Accessibility Norms

Example of image alt
Example of image alt

In Web Accessibility, there are a lot of best practice we must respect to make the HTML elements and tags more accessible to different type of users and devices.

Images must have text alternatives that describe the information or the purpose of them. This ensures that images can be readable by different type of users and machines they are using.

In this post I will present an important element in web integration and I will try to give you the best norms and tips that you should respect to get it right. This HTML element is image <img> and his attribute (alt=””).

If the image is only for decoration

In this case you are not forced to give it an alternative description because it will won’t add anything.
So this line of code will do the work.

 <img src="header-image.jpg" alt=""> 

Informative image

Image that transfer a simple information that is represented on the page. The alt description should be brief

Example

<span>
    <img src="address-image.jpg" alt="Address: " /> Rabat - Morocco - APP 3
</span>

Complex image

Is an image that give us more detailed information. These images would include graphs, rating.. and like that. The alt description in this case should be more detailed.

Example

<span>
 <img src="top-player.kpg" alt="Top football players by this year, including worldwide players">
</span>

Final words

Web accessibility is simple as that, but it’s very important, it makes user very comfortable with you presented data and make your users interact more happily with your app or website.. HOPE IT HELP.

HAPPY CODING

Leave a Reply

Your email address will not be published. Required fields are marked *