Support Centre

Manage Reading Order in your Venngage design

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

Venngage's upgraded Editor automatically tags all text boxes and displays them in the Accessibility panel, for you to check the logical flow of the text in your design.

 

Check the Reading Order

Open the Reading Order in the Accessibility panel by clicking on File next to the Venngage logo, above the top toolbar.

Under "Accessibility", select "Edit reading order."

The File menu in the top navigation menu is selected, overlaying part of the Venngage design Editor, with the Accessibility submenu open; a list under this menu includes three options: Check Accessibility, Edit reading order, and Set document language. 'Edit reading order' is highlighted.
 
 
You can also access the Reading Order in the Accessibility Checker; either from the 'Set Reading Order' button under Logical Reading Order, or by accessing the Edit Reading Order tab, directly at the top of the Accessibility panel.
 

Select the Page you want to work on; a list of all text elements on the page will appear underneath it.

A design canvas open in the Venngage Editor shows a colorful 4-column with text and icons. The user opens the Accessibility panel following the steps described above; the user clicks 'Page 1' in the Accessibility panel, under the 'Edit reading order' tab. This reveals a list of all text boxes and non-text elements tagged with alt text on the design canvas.
 

Click on items in the list to highlight the corresponding text box or non-text element on the design canvas.

A user clicks on items listed under Page 1 on the 'Edit Reading Order' tab in the Accessibility panel. Each time the user selects an item on the list, a bounding box appears around a corresponding text box on the design canvas (meaning it is selected).

When an item is selected in the list, the text box or graphic element it corresponds to is highlighted on the design canvas.

 

Change or update the Reading Order

Consider how Reading Order will change when you move a text box or a non-text element to another location on your design canvas.

Update the Reading Order easily from the "Edit Reading Order" tab in the Accessibility panel.

A closeup of the Accessibility panel open in the Venngage Editor. A list of items (with the tags 'text' and 'image') appears under the heading Page 1, under the 'Edit Reading Order' tab.
 

Move any item in the list into its logical position with your mouse or keyboard

  • With a mouse, click and drag the item to the correct position in the list.

  • With a keyboard, tab to select the item, hit the spacebar to select, and use the arrow keys to reposition it in the list.

A user makes design changes on a canvas in the Venngage Editor as described below.

The above GIF shows an example scenario of updating Reading Order on a design:

  • A user selects an item in the Reading Order list labelled "Image: Venngage logo".

  • On the design canvas in the Editor, the Venngage logo that appears at the bottom of the page is selected, with the bounding box around it visible.

  • The users clicks and holds the Venngage logo, dragging it from the bottom of the design page to the top, where the user positions it above the title block.

  • In the Reading Order list, the user clicks and holds the item labelled "Image: Venngage logo" and drag it to the top of the list, to reflect its new position on the canvas.

Non-text elements tagged with alt text will appear with the text boxes in the page's Reading Order list, if you have already entered alt text. Non-text elements are marked "decorative" by default; you can change a non-text element from decorative and add alt text to it to get it to appear in the Reading Order list.

 

Add non-text elements to Reading Order list

Non-text elements, like icons, graphics or other visual elements in your design, are automatically marked as decorative on the design canvas in the upgraded Editor.

Change a non-text element from decorative and add alt text to add it to the Reading Order list.

A user selects an icon that appears at the top of the first column, above the column title. The icon is a number 1 in a circle. In the top toolbar, the user clicks Alt text and brings up the Add Alt Text modal (box). The user unchecks a box at the bottom of the modal, Mark as Decorative. When the box is unchecked, a text field above it becomes active. The user clicks into it in order to type an alt text description of the icon.
 

Select the non-text element on the design canvas. In the top toolbar, select "Alt Text" and open the Add Alt Text pop-up modal (box).

Uncheck the box next to "Mark as Decorative"; this will identify the item in the Reading Order list.

A user types '1.' into the text field of the 'Add Alt Text' modal (box) and clicks 'Save'. The 'Add Alt Text' modal closes. The item now appears in the list under the Reading Order, labelled 'Icon: 1.' The user clicks and holds the item in the Reading Order list, and drags it to third position in the list, reflecting its position on the design canvas and the sequence it should be read in.
 

Type the alt text description of the non-text element in the text field, then click Save.

Find the element in the Reading Order list: it will appear with a label (e.g., "Icon") and the alt text you have entered.

Click or select the item and move it into the correct position in the Reading Order list.

 

Confirm Reading Order in the Accessibility Checker tool

Click on the "Check Accessibility" tab in the Accessibility panel.

Expand the Logical Reading Order heading by clicking on it or selecting it and pressing the spacebar.

A user clicks the 'Check Accessibility' tab in the Accessibility panel and scrolls down to the 'Logical Reading Order' heading. The user clicks the heading, and clicks the checkbox at the bottom of the heading.
 

Click or select the checkbox at the bottom of the "Logical Reading Order" heading to confirm that "The document has a logical reading order."

 

Venngage Logo

 

Start designing!

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

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request