# We are currently experiencing technical issues with Prezi. Please click here for real-time status reports and affected components.
# We are currently experiencing technical issues with Prezi. Please click here for real-time status reports and affected components.

Creating accessible content in Prezi Design

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.

  1. When working on a design, click on an object to select it.
  2. From the settings panel on your right, open the Accessibility tab. Enable Visible to screen readers (the option is enabled by default).
  3. 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.
  4. 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.

    accessible-content__2_.png

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

Project_language.gif

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.

Screen_Readers.png

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

Navigating_with_the_Tab_button.gif

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.

Pro Tip: Use whitespace in between lines, graphics, and margins to give your content space. Negative space can be a powerful design tool.

accessibility-groups-of-objects__1_.png

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.

Interactivity_hints.gif

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

hyperlinks.png 

Was this article helpful?

We're here to help

Reach out to support, find answers in our community, or view tutorials in the workshop.