A11Y and Guru: Adding Alt Text to Guru Cards

Last verified Sep 14, 2023

We've all heard the saying "A picture is worth a thousand words." Nothing could be more accurate than when it comes to allowing for inclusive images in Guru Cards. This is supported by our belief that the knowledge you need to do your job should find you. This belief applies to users of all cognitive and physical abilities, and we strive to make Guru as accessible and inclusive as possible.

Following the recommendations found in version 2.1 of the Web Accessibility Guidelines, we routinely test our application and conduct accessibility audits every six months or when there's a significant update, such as the ability to add alt descriptions to images found in Cards.

Guru brand image that shows Card with people in Zoom meeting

Why alt descriptions are important

Alt descriptions, or "alt text," impact the user's experience. Sighted readers can see the image and understand how it's related to the content. Alt descriptions are important because they help provide context for anyone who uses assistive technology such as screen readers or refreshable braille displays. They also benefit readers who may not have access to fast internet by allowing them to turn off images to improve page loading without sacrificing context. 

How alt text works in Guru

Adding appropriate descriptions also helps to comply with accessibility laws globally. These laws reference the Web Content Accessibility Guidelines, which state that text alternatives should be provided for any non-text-based content. 

The Guru Card Editor supports a couple of methods for adding alt descriptions to images in Guru Cards. One method is by using markdown, which involves writing a few lines of code to complete the task. The other method is by using the integrated popup modals. There will be a popup menu when adding an image to your Guru Card. In that menu, you will see the "Alt text" button. Click it, and a modal will appear, allowing you to add an alt description.

An animation that shows how to add alt text to images in Guru Cards

Why alt descriptions enhance shared knowledge 

Alt descriptions can be seen as a universal tool that not only empowers people with disabilities to access digital content seamlessly but also enhances the usability and discoverability of information for a more inclusive experience. When you create Cards with alt descriptions for images, you ensure that you're creating inclusive content that's also as informative as possible. The descriptive text you write can give people additional context around Card content, which can help improve knowledge comprehension and readability. 

There’s also something to be said about the level of trust people can have in Cards with alt text. You’re not only adding trusted knowledge to your Card, you’re also signaling to people that your information is as inclusive as possible. Adding alt descriptions to verified Cards helps validate your information and signal that it’s ready for everyone to benefit from. 

Tips for writing effective alt descriptions

Creating effective alt descriptions for images is an important part of making a Guru Card accessible to all users. Here are some best practices to keep in mind when crafting these descriptions:

  • Avoid the practice of keyword stuffing to boost SEO for public Guru Cards. 

  • Consider the purpose of the image. Ask yourself why the image is included on the page and what information it conveys. This will help guide you in writing an effective alt description.

  • Since screen readers announce that an image is present, phrases such as "Image of" or "Picture of" should be avoided, as they are redundant and add unnecessary clutter. 

  • Make sure descriptions are concise and precise, usually no more than a sentence or two, while providing enough detail to paint an accurate picture of the image's subject matter, such as colors and other relevant information.

  • Avoid subjective language and unnecessary details that don't add value. Moreover, the filename of an image should not be used as it may not provide any useful information or be descriptive.

  • Lastly, as a final step, test your alt text to ensure it is read aloud correctly and conveys the intended meaning.