Contact us

Video demonstrates Adee alternative text (alttext) generator in action.

Alt text main goal

Alt attribute, commonly referred to as alt text, is an essential element of an accessible presence. Alt text are important because:

  1. One of the main reasons alt text was created is to help people with visual impairments. If you don’t write alt text, some of the screen readers read the file name to the users and this could be the worst experience you can provide for Assistive Technology (AT) users on your website.

  2. If images fail to load on your website, users will be able to get some idea what your web page is about by reading alt text.

  3. It will help search engines to understand what the image is about and to rank them in the image search results. According to google "Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image."

How to add alt text from selected items

Not all web developers take the time to caption all their images. Adee free alt text generator is an easy to use tool for designers for creating and generating Alt text and sharing it with developers in order to help their end users to understand what an image actually contains.

Here are the steps you need to follow

  1. Selecting an image/images: There are a number of way you can choose images in the alt text section.

  • select your intended image before opening Adee plugin

  • select images from multi selection field

  • click on any image when the plugin is open and it will showup. You can only select 4 images at once.

  1. Image format: Since any shape created on the figma environment are also considered as svg, you can exclude this format from the selection menu to make your life easier if you are only using png/jpg image formats. In addition, in Adee when you select an image, it automatically detect and display format of the image whether it’s svg, png or jpg.

  2. Image type: There are two types of images to consider when creating alternative text. These types are including decorative or informative. Informative images add important information to a page while decorative images don’t. At the end, this is a judgment that only the designer/author can make. In order to edit image type in Adee, after selecting an image, click on edit icon and from the drop down menu choose your intended type of image. Your selection will determine the other fields display next.

Add attributes to the image

And finally, some important points to remember

  1. For svg images, instead of alt text, you need to use description and title. Description: The < desc> element provides a longer human-readable description of the element that contains it. A description should be provided for complex svg content, or where the svg fulfils a particular function or purpose.

Title: The <title> element provides a short human-readable name for the element that contains it. At least one title should be provided for every svg image.

  1. role=”img” attribute, describes the role of an element in programs that can make use of it, such as screen readers.
  2. aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list.
  3. alt=”” . A “null” alt attribute is not the same as having no alt attribute. The purpose of this technique is to show how images (i.e. decorative images) can be marked so that they can be ignored by Assistive Technology.