Available on the following Venngage subscription plans: Premium, Business and Enterprise.

Manage Reading Order in your design to ensure it is accessible to screen readers and keyboard focus:


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
You can also access the Reading Order in the Accessibility Checker; either from the

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

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

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

Back to top

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

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.

Back to top

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

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

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.

Back to top

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

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

Back to top


Related Articles:

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

Did this answer your question?