Adding Alt Descriptions (Alt Text)

Alt descriptions (alt text) are essential in ensuring images are accessible, and compliant with web standards. By providing descriptive and meaningful alt descriptions for images, Cards have improved accessibility, provide a better user experience, and comply with current Web Content Accessibility Guidelines.

Udate!!

We have added the ability to add alt text to images in the Editor! It's pretty straight forward. When you add an image to your Card, there will be a popup-menu. In that menu you will see the "Alt text" button. Click it and a modal will appear that will allow you to add an alt description.

Using Markdown to Add an Alt Description

In the Guru Editor, you have the ability to add an alt description to images using the Markdown feature. Commonly used for creating web content, documentation, and notes, Markdown is a lightweight language used for formatting text in a simple and readable way. It uses plain text with symbols and patterns to indicate formatting elements such as headings, lists, links, and even alt descriptions.

You can add Markdown to your Guru Card by selecting the "Markdown" icon button in the top menu bar located on the right side.

When you select the Markdown button, an empty grey code box will be inserted into your Card at the current cursor position.

The syntax pattern for adding alt descriptions to images consisting of an exclamation point followed by open and closed brackets and open and closed parentheses. The open and closed brackets contain the alt description, and the open and closed parentheses contain the path to the image.

![]()

Add Your Image

Following the Markdown syntax pattern, add your alt description and the path to the image.

![Type alt description here](place/path/to/image/here.jpg)

After adding your code, you can preview the image by clicking on the "Preview" icon button in the top-right corner of the Markdown code box.

If your image path is correct, you will see the image only. The alt description is rendered in the HTML code. However, if the image is broken, the alt description will appear where the image is located.

Troubleshooting

What if you don't know the path of your image? Follow these steps

1. Add an image to your Card using the Image icon button in the top toolbar or by pasting the image into the Card.
2. Right Click on the image to reveal the system menu
   
   
   
3. Select "Copy Image Address"
4. Delete the image from your Card
5. Click on the Markup icon button in the top nav bar
6. In the Markup code box, type the code to add your image and paste the image address between the parentheses

![Type alt description here](paste the image address here)

7. Done!

Accessibility

• https://www.w3.org/TR/WCAG21/#text-alternatives
• https://www.w3.org/WAI/tutorials/images/