Support Centre

Tag and add alt text to elements in your design

Renée Meloche
Renée Meloche
  • Updated
Available on the following Venngage subscription plans: Premium, Business and Enterprise.

 

Alternative (alt) text is descriptive text that identifies non-text content for visually impaired readers and is legible to accessibility tools like screen readers. Use alt text to identify decorative and informative elements in your accessible designs.

Use the Alt Text tool in the Venngage Editor

Select any non-text element on the design canvas. This could be something like an icon, a shape, a photo or a chart.

Screenshot 2024-03-14 at 4.43.09 PM.png

Click or use the spacebar (for keyboard users) on Alt Text in the top toolbar. This will open the "Add Alt Text" pop-up modal (box).

From here, you can indicate whether an image is decorative or add a description for visually impaired readers or screen reader users.

Describe a non-text element with alt text

Enter a description of the non-text element you selected into the Description text field in the Add Alt Text modal (box).

Screenshot 2024-03-14 at 4.44.00 PM.png

 

Expand the section above the text field, "Tips for writing good alt text", for guidance on writing helpful alt text, or check our article on writing helpful alternative (alt) text for non-text content for more tips and examples.

Click the "Save" button at the bottom of the modal when you're done. You can always come back and edit the text before you download or share your design.

 

Non-text elements that convey additional information about the content of your design should have simple, straightforward descriptive alt text. Complex non-text elements like charts or other graphs presenting dense information require longer descriptions.

Mark a non-text element as decorative

Non-text elements in your design that don't convey crucial information should be marked as decorative so that the screen reader skips over them and doesn't disrupt the flow of reading the content.

 

 

Check your Alt Text with the Accessibility Checker

Open the Accessibility Checker from the File menu above the top toolbar.

 

Under "Check Accessibility", scroll down the list and open the "Alternative Text" heading. The Accessibility Checker highlights all the non-text elements on your design canvas, and flags non-text content that has no alt text and is not marked as decorative.

Every piece of non-text content should either have alt text or be marked as decorative.

Screenshot 2024-03-15 at 11.33.05 AM.png

 

Add alt text to flagged elements by clicking “Add alt text” on the flagged element in the accessibility checker, or clicking on the element on the design canvas to select it and using the "Alt Text" button in the top toolbar.

On the design canvas, elements missing alt text (and not marked decorative) will appear with a grey "ALT" tag rather than a blue one (which displays when alt text is entered).

 

Enter the alt text and save it, or mark the element as decorative; when you do this, the Accessibility Checker will update automatically to reflect the change.

A user scrolls through their design in the Venngage Editor, checking to ensure all of the non-text elements are correctly tagged or described with alt text. The user clicks the checkbox at the bottom of the 'Alternative Text' heading in the 'Check Accessibility' list, as described below.

 

Check the box at the bottom of the "Alternative Text" heading in the Accessibility Checker when your manual check of the document is complete, to confirm that "Decorative non-text content is marked as decorative".

Note: When you add descriptions to non-text element, use the Edit Reading Order tool to ensure that they appear in a logical reading order.

 

Non-text elements will appear in the Reading Order list in the Accessibility Checker, labelled according to the element (e.g., 'icon', 'shape', 'chart') and with the text entered in the Alt Text Description text field. Elements marked as decorative with the Alt Text tool will not appear in the Reading Order list.
 

Venngage Logo

 

Start designing!

Curious about upgrading? Compare our plan features side by side.

 

Was this article helpful?

0 out of 1 found this helpful

Have more questions? Submit a request