What is Alt Text (alternative text)?

According to WhatIs.com, Alt text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML document to tell website viewers the nature or contents of an image.

Alternative text has several roles:

  • It makes the content or function of the image accessible to users with visual or cognitive impairments.
  • It is displayed by default to replace the image when it can not be displayed on a web page or e-mail.
  • Finally, it contributes to the SEO of a page by adding a semantic content to the images.

Alternative text can be used in two different ways:

  • In the alt attribute of the <img tag>
  • In the context and content present around the image itself.

Alt Text Vs. Image Title: What's the Difference?

The alt attribute must be present on all images, even if it may remain empty in some cases, as for purely decorative images. It is used to transfer the information contained in the image (usually the text it contains) into the code of the page, so that it remains available when the image can not be loaded or can not be viewed by search engines or visually impaired persons.

The title attribute pops-up when you mouseover an image. It is an optional attribute that often feels redundant with information already present.

Writing Good Alt Attributes for Your Images

  • The alternative text should be short and descriptive. No need to put a whole paragraph or an endless succession of keywords. The longer your alternative text, the more difficult it will be to read by text browsers. A good rule of thumb for alternative text is to keep it between 5 and 15 words total.
  • Always use keywords related to the image.
  • Put the most important information first in the attribute.
  • Do not stick the words to each other.
  • Do not use uppercase, special or accented characters.
  • Don't include introductory phrases like "An image of…" or "Here you can see".

How To Insert an Alt Attribute into tyl.io?

  1. Insert your images.
  2. Click on an image to insert the title / alt attributes.
  3. If you wish, you can also insert an hyperlink on the image. 
this is how you can insert image alt tags into tylio