Infogram is officially compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 AA, ensuring you can create content that is inclusive and user-friendly for all individuals. For detailed information on Infogram's accessibility features, see our Accessibility Conformance Report (VPAT) here. With Infogram, you can:
- Make content visible to screen readers
- Navigate published content with keyboard controls
- Apply a few simple design principles to improve readability
Make content accessible to screen readers
Screen readers help people who are visually impaired use a computer, rendering text into audible speech. By enabling the Visible to screen readers option in your project settings, you will be able to add a label and description to charts, maps, images or icons, as well as your custom logos and grouped objects. This description will then be rendered from text to speech.
- Create a new project or select one of your existing ones. Click to select an object on the canvas.
- From the settings panel on your right, open the Accessibility tab. Enable Visible to screen readers (the option is enabled by default).
- Insert a Label so people understand what the particular piece of content is. For example, a bar chart for an income statement, a regional map of Norway, an image of a mountain, etc.
-
Provide a meaningful 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 your project language in the settings panel on the right. This will indicate what kind of voice the screen reader should use. You can also find this option in your Account's project settings, where you can set the default language.
-
All content will be read from top to bottom, left to right.
Navigate 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 blue square. When you open a project in webview, or embed it online, use the following keyboard shortcuts to navigate and interact:
- Move forward: Tab
- Move backward: Tab + Shift
- Select/deselect: Enter
- Scroll: ▲, ▼, ►, ◄
- Move forward: Tab
- Move backward: Tab + Shift
- Select/deselect: Enter or Space bar
- Scroll: ↑, ↓, →, ←
Design principles for improving 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. -
Use the colorblind-friendly theme and color combinations
Create contrast between objects and the background. Use the Contrast Tracker 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 theme that can be found in the settings panel on your right.
-
Create designs for all viewport sizes
If you plan on embedding your content, think about which devices your content will be viewed on – laptops, tablets, or mobile phones. Use the URL code or the responsive and async embed codes in the HTML editor of your webpage. This guarantees your content will adapt to the screen size, offering a seamless viewing experience. When designing for mobile, avoid objects that are too small.
To learn how to embed and what codes we offer, head over to our article about Embedding a project.
-
Make sure interactive elements are easy to find
Use the interactivity hints option in your project settings. Hints pop up when the viewer scrolls through your content to highlight interactivity. For more on how to enable this option, head over to the article about Enhanced chart and map interactivity and animated data storytelling.
-
Include image and media alternatives in your design
Complement your text with icons, images, videos or voice recordings. Use the panel to the left of the editor to add images/icons from the graphics gallery, as well as videos and sound embeds using Infogram’s many integrations. If you're using mostly video and image content, add captions or transcripts for multimedia.
Enable the show values option inside charts to convey information. -
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 link text meaningful