Create Accessible Content for an Inclusive Experience

Accessible content refers to digital materials, such as websites, documents, videos, audio files, and multimedia presentations designed and created in a way that ensures individuals with disabilities can access, understand, and engage with them effectively. It involves implementing inclusive design principles and incorporating features that accommodate various disabilities, impairments, or limitations. Accessible content aims to remove barriers and provide equal access to information, communication, and entertainment for individuals with disabilities. It goes beyond mere compliance with legal requirements and embraces the principles of inclusivity, diversity, and equal opportunity.

Yes, Infogram is officially compliant with the Web Content Accessibility Guidelines (WCAG 2.0). This ensures that you can create content that's accessible to people with various disabilities, such as vision impairment, limited movement, and cognitive limitations.

With Infogram, you can:

• Make your Infogram content easily interpretable by screen readers.
• Navigate through published content using keyboard controls.
• Apply straightforward design principles to enhance readability.

Infogram's accessibility features benefit people with disabilities, including those with vision impairment, limited mobility, cognitive challenges, and more. These features make it easier for a wider range of users to engage with your content.

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 your project settings, you’ll 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.

1. Create a new project or select one of your existing ones. Click to select an object on the canvas.
2. From the settings panel on your right, open the Accessibility tab. Enable Visible to screen readers (the option is enabled by default).
3. 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.
4. 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.
5. 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.

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’ll 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: This support article from Infogram will help you understand keyboard shortcuts better.

1. 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.
2. 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. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. When using hyperlinks, make link text meaningful.