Alternative descriptions (or "alt text") are essential to ensuring that images on the web are accessible to all users, including those with visual impairments who use screen readers. Below are guidelines for when and how to enter these descriptions.

When to Include Alternative Descriptions

1. Informative Images:

   • What are they: Images that contain essential information, such as graphs, diagrams, maps, etc.
   • To do: Provide a description that conveys the information presented in the image.
   • Example: For a bar chart showing quarterly sales: “Bar chart showing that sales in the first quarter were 10,000 units, in the second quarter 12,000 units, in the third quarter 8,000 units, and in the fourth quarter 15,000 units ”.

2. Functional Images:

   • What are they: Images that act as links, buttons or other interactive elements.
   • To do: Describe the function of the element.
   • Example: For a search button with a magnifying glass: “Search Button.”

3. Decorative Images:

   • What are they: Images that do not provide information or have a specific function, they only improve the visual design.
   • To do: Use an empty alt (alt="") so that screen readers ignore them.
   • Example: If a page has a decorative flower border, the alt text would be alt="".

4. Text Images:

   • What are they: Images that contain relevant text.
   • To do: Include the text present in the image in the alternative description.
   • Example: If an image contains a sign that says “50% sales on all clothes”, the alt text would be: “50% sales on all clothes”.

5. Complex Images:

   • What are they: Images that contain complex information that cannot be fully described in a short alt text (for example, detailed infographics).
   • To do: Provide a long description on the page itself or link to a separate page with the full description.
   • Example: For an infographic about the water cycle: “Detailed infographic about the water cycle. More information available at the following link: [link to detailed description].”

How to Write Alternative Descriptions

1. Be Concise and Clear:

   • Descriptions should be brief and direct, describing the content and function of the image.

2. Avoid Redundancies:

   • Do not repeat information already present in the context close to the image.

3. Be Accurate:

   • Make sure the description accurately reflects the content of the image.

4. Use Neutral Language:

   • Avoid assumptions about the context or interpretation of the image.

Practical examples

1. Image of a Person Reading:

   • Description Alt: “Person reading a book in a park.”

2. Buy Button:

   • Description Alt: “Buy button”.

3. Diagram of a Solar System:

   • Description Alt: “Diagram of the solar system showing planets orbiting the sun.”

4. Background Decoration:

   • Description Alt: alt="".

5. Complex Infographic:

   • Description Alt: “Detailed infographic on climate change. More information at the following link: [link to detailed description].”

Conclusion

Including alternative descriptions on images is not only an essential practice for web accessibility, but also improves usability for all users. By following these guidelines, you can ensure that your content is inclusive and accessible to a broader audience.

For more details and examples, you can consult the Web Content Accessibility Guidelines (WCAG) at: https://www.w3.org/WAI/tutorials/images/decision-tree/