Skip to main content

katlynn sverko headshot

Katlynn Sverko
2018-05-26 17:01:45

Alt-text for Developers

old type press letters


Alt-text refers to alternate text for images, frequently used by individuals living with sight loss that use screen readers or alternate assistive technology for web browsing and computer or mobile-related work. By providing alt-text for images you are allowing someone to understand what is happening on a page, whether or not they are able to see it. If for some reason your image fails to load, alt-text is used in its place. Alt-text also improves your website’s SEO and brings more organic traffic to your site, company, and products.

Depending on how your startup is structured, the marketing and graphic design team may be required to implement alt-text on images. If you use Shopify, Weebly, Wix, WordPress, or any other similar website builder you can hard code the alt-text in, or your marketing and graphic design team can implement alt-text using specific tools available on these platforms. For more information on how to implement alt-text for marketers and graphic designers click here.

Okay, let’s get started:

Alt-text is created within HTML code to describe what is going on in an image or photo. Alt-text may also be known to you as alt descriptions or alt attributes.

Streetcar driving through snowstorm

Code sample for the above image:

<img src="file_streetcar_snow.jpg" alt="Streetcar driving through snowstorm">

Code samples demonstrating various standards and differences:

Alt-text has to make sense. It cannot be a series of keywords or tags. It is used to describe an image and give context to what may or may not be seen by your website visitors. Describe what is in the image, and if necessary describe what is happening. If someone is throwing a ball, make it known that someone is throwing a ball. If someone is falling, let it be known that someone is falling. Make it clear to your visitors what is going on, and why an image is included, even if it cannot be seen.

Alt-text Tips and Tricks

  1. Keep alt-text a max of 125 characters, if you are looking to have a longer description feel free to use the long description attribute, longdesc= “Longer description text goes here”. Some screen readers stop at 125 characters when reading alt-text.

  2. Buttons should also feature alt-text. This is to make sure that everyone understands the purpose or function of the button, rather than simply being provided with a description of “button”. Use the text that is on the button as the alt-text attribute to increase understanding, such as “Submit” or “Learn More”.

  3. It is known to the user that the content they are being provided is alt-text and therefore describing an image, there is no need to write “picture of” or “photo of” in your alt-text description.

If you found this article helpful, give us a like to let us know.

Select the to like article.

Thank you for the like

This article has been liked 260 times.