Support Centre

Search

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.

The upper half of a design canvas in the Venngage Editor. An icon on the right side of the design canvas is selected: it is a stylised cartoon of a person with a beard and dark hair drawn into a bun, wearing a beige shirt, show from the shoulders up. A blue bounding box is visible around the icon, showing that it is selected.

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).

A close-up of the 'Add Alt Text' modal (box) overlaying a design canvas in the Venngage Editor. The heading on the box reads 'Add Alt Text' and below it, informational text reads 'Adding alternative (alt) text can improve accessibility for users of assistive technologies or those who may have trouble viewing your content.' Below this text is a section highlights in pale blue, with the heading 'Tips for writing good alt text'. It is expandable, with a small down arrow next to it. The text field appears beneath it, under the heading 'Description'. Under the textfield is a checkbox next to the heading 'Mark as Decorative'. The textfield has a word counter (out of 125 words) and there are Cancel and Save buttons at the bottom of the modal.

 

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.

A user selects an icon on a design canvas in the Venngage editor. The user clicks the 'Alt Text' button that appears in the top toolbar. In the 'Add Alt Text' modal, the user writes a description of the icon: 'A young, smiling boy. He is wearing a school uniform with a tie, and a backpack.' The user clicks Save to close the modal and save the alt text.

 

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.

With an image selected on a design canvas in the Venngage Editor, a user clicks 'Alt Text' in the top tool bar, bringing up the 'Add Alt Text' pop-up modal (box).
 

Check your Alt Text with the Accessibility Checker

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

A user clicks 'File' in the bar above the top toolbar in the Venngage Editor. The user navigates to 'Check accessibility' and opens a right side panel over the Editor. The right side panel is titled Accessibility; it is open to one of two tabs: 'Check Accessibility'. The user collapses the heading 'Document title' and clicks on the heading 'Alternative text' beneath it. When this heading is open, visual elements (non-text) on the design canvas are highlighted by bounding boxes and tagged with 'alt text' or 'decorative' labels.

 

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.

A close-up of the 'Alternative Text' heading in the Accessibility panel, under the 'Check Accessibility' tab. It reads: 'Alternative (alt) text is a description of non-text content that can be 'read' by screen readers. Non-text content includes images, icons, logos, shapes, lines and arrows. Make sure informative non-text content has alt text and non-text content that is pure decoration or is used only for visual formatting is marked as decorative; it does not require alt text.' A link at the bottom of the paragraph reads 'Learn more about writing good alt text and determining whether content needs alt text.' Beneath this, a heading reads 'Missing alt text (1)' and shows an icon of a picture next to a label 'Image: Missing alt text'. To the right is a button to 'Add alt text'. The bottom section shows a yellow caution triangle and the heading 'Manual check required for decorative tags.' Text underneath reads 'Check that graphics used decoratively or for visual formatting are marked as decorative.' Beneath this is a box with a light blue background, and a checkbox beside the heading 'Decorative non-text content is marked as decorative'.

 

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).

A user clicks an image on a design canvas in the Venngage Editor to select it, then clicks 'Alt Text' in the top toolbar and types descriptive text into the text field in the 'Add Alt Text' modal (box), then clicks 'Save'.

 

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