Often overlooked by novice web designers, the humble "alt" attribute on your
<img> may not seem all that important at first glance, but it really is. Read on to find out how to use this attribute and 3 of the main reasons why you should.
The markup is extremely simple, just add it to any
<img> tag (as below) and describe the contents or text contained with that image. If the image is purely for decorative purposes, use
alt="" as we don't need screenreaders to pay attention to this.
<img src="puppies.jpg" alt="A group of small labrador puppies">
Visually impaired users can still read (or listen to) your website's text copy thanks to the quality screen reading software which is available, but how do you expect them to see your images? While they may never be able to literrally see them, their screen reader will read out the alt text of your image instead, giving them the additional context which they may otherwise lack. For this reason it's important to make your alt attribute as concise and descriptive as possible.
This one is anecdotal as it's difficult to get hard evidence about this stuff, but in my experience alt text is crawled by search engines and is a great way to naturally increase the amount of your target keywords on a page. Keep the above point about accessibility in mind though - the text should still read naturally and be as short as possible.
Even a good connection can sometimes drop out and cause a full page to render minus a couple of images. Now imagine using that same site on choppy 3G (or worse). Today's internet is better than ever, but also more variable than ever due to the plethora of devices and connection qualities. If one of your images doesn't load, the alt text will be visible instead, giving your users vital context even on a poor connection.
Hopefully this article has helped you gain a full understanding of alt text and why it's so important, so that you can start using it in all of your websites straight away.