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="">
Image that transfer a simple information that is represented on the page. The alt description should be brief
<span> <img src="address-image.jpg" alt="Address: " /> Rabat - Morocco - APP 3 </span>
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.
<span> <img src="top-player.kpg" alt="Top football players by this year, including worldwide players"> </span>
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.