Optimize your Knowledge Base for enhanced accessibility by adding alt tags for images

Optimize your Knowledge Base for enhanced accessibility by adding alt tags for images

Let's learn why alt tags are crucial for your articles.


You can add alternative tags (alt tags) and alternative text (alt text) to the images you share on your community forums or when embedding them in articles. Alt tags refer to the HTML attribute, while the alt tag is the written description you provide. This allows members using voice-over screen readers to understand what's in the image (the alt tag won't be visible to members not using screen readers).
Info
  • There is no need to include "image of," "picture of," "screenshot of," or similar designations. 
  • When inserting alt tags in images, it is essential to provide a clear and descriptive summary of the image content so that those using screen readers or experiencing visual difficulties can understand the context. 

Example of an alt tag

Alt tag: Sunset over the ocean with waves crashing against cliffs.

Description: A picturesque view of a sunset over the ocean, with waves crashing against rocky cliffs.



In this example, the alt tag "Sunset over the ocean with waves crashing against cliffs" describes what the image shows and conveys the scene's essence. This information helps make the content accessible to all users.

Importance of alt tags and texts

Accessibility: The alt tag provides a textual description of images, making them accessible to individuals using screen readers. This ensures that visually impaired users can understand the content and context of the images.

SEO benefits: Search engines use alt tags to understand the content of images. Including relevant keywords can improve the article's search engine ranking, helping users find the content more easily.

Context and clarity: Alt tags help clarify the purpose of an image within the article. This is especially important if the image conveys information that complements the text.

Fallback content: If an image fails to load, the alt tag will be displayed instead, providing users with a basic understanding of what the image was intended to convey.

Improved user experience: The alt tag enhances the overall user experience by ensuring all users can fully engage with the content regardless of their abilities.

Best practices for including alternate tags/texts in documentation

Be descriptive: Write clear and concise descriptions of what is depicted in the image. For example, instead of "image1.jpg," an appropriate alt tag could be "A group of diverse people collaborating around a table in a modern office."

Context matters: Consider the context in which the image is used. If the image supports a specific point or content, include details explaining its relevance.

Limit redundancy: Avoid phrases like "image of" or "picture of." Instead, start directly with the description. For example, use "Smiling child holding a colourful kite in a park."

Use keywords wisely: If relevant, you can include essential keywords in the alt tag, but avoid keyword stuffing. It should sound natural.

Keep it simple: The alt tag should be clear and direct. Focus on creating a brief image tag, which is typically most effective for screen readers.

Decorative images: For purely decorative images that do not add meaningful content, you can use an empty alt tag (alt="") so that screen readers ignore them.

Takeaway

Optimizing your knowledge base for enhanced accessibility by adding alt tags and text for images is a necessary practice that benefits all users, particularly those with visual impairments. 

Please watch this space for more detailed use cases of SEO tags that you can apply to your organisation's knowledge base.


Cheers,


Kavya Rao,

The Zoho Desk Team