If you want to reach a wider audience with your message, it's essential to create content that is accessible. Prezi Design allows you to do just that, as it is compliant with the Web Content Accessibility Guidelines (WCAG 2.0). You can create content that is accessible to people with disabilities, including vision impairment, limited movement, cognitive limitations, etc.
Making content visible to screen readers
Screen readers help people who are visually impaired use a computer, rendering the text into audible speech. By enabling the Visible to screen readers option in the settings panel, you will be able to add a label and description to charts, maps, images, or icons, as well as grouped objects. The description will then be rendered from text to speech.
- When working on a design, click on an object to select it.
- From the settings panel on your right, open the Accessibility tab. Enable Visible to screen readers (the option is enabled by default).
- Add a Label so people understand what the particular piece of content is. For example, you could write one of the following: a bar chart on monthly sales, a regional map of Finland, an image of the ocean, etc.
- Provide a coherent text alternative to the visual in the Description field. Be short, concise, and express the summary in a way that brings the visual to life.
- Select the language of your design—this will indicate what kind of voice the screen reader should use. The language dropdown menu is available in the settings panel on the right. To view the settings of the whole design, click outside of any of the objects located on the canvas.
All content will be read from top to bottom, left to right. This may not be perfect in some instances. In the example on the left, the reading order will be mixed up since the screen readers primarily use the direction from top to bottom. However, you can group objects so that they are read together, like in the example on the right.
Navigating published content with keyboard controls
Keyboard shortcuts provide an alternative way to navigate and interact with charts, maps, text, videos, and integrations. Navigation is possible with tabs, legends, table search bars, hyperlinked text/images/icons, map icons, and video play buttons.
When a piece of content is selected, it will be highlighted with a rectangle. When you open a design online, use the following keyboard shortcuts to navigate and interact:
Tab | Move forward |
Tab + Shift | Move backward |
Enter | Select / deselect |
▲, ▼, ►, ◄ | Scroll |
Tab | Move forward |
Tab + Shift | Move backward |
Enter | Select / deselect |
↑, ↓, →, ← | Scroll |
Design principles for improved readability
Use titles and subtitles to create groups of related content
Grouped content reduces clutter, makes it easier to scan, and gives structure. Think about clear and concise sentences. Headers and sub-sections make it easier for screen readers to jump between sections.
Use the colorblind-friendly palette and color combinations
Create contrast between objects and the background. Use the Contrast Checker to check whether your colors meet the accessibility criteria in WCAG. Avoid bright colors and very faded colors (see the image above). To make sure your content is accessible for the vision impaired, use the colorblind-friendly color palette that can be found in the settings panel on your right.
Make sure interactive elements are easy to find
Use interactivity hints. This way, hints encouraging interaction with the objects on the canvas will pop up as the viewer will be scrolling through your content. You can find this option under the Project viewer experience tab in the settings panel on the right.
Include image and media alternatives in your design
Complement your text with icons, images, videos, or voice recordings. Use the toolbar on the left of the editor to add images/icons from the graphics gallery, as well as videos and sound embeds using Prezi Design’s many integrations. If you're using mostly video and image content, add captions or transcripts for multimedia.
Create a meaningful structure and add a summary for easy navigation
To learn about linking your summary to pages within the project, head over to the tutorial article about page linking.
When using hyperlinks, make the link text meaningful