If the HTML and CSS are developed using custom codes to include accessibility, then the infographic becomes accessible to screen readers. HTML/CSS infographics embed the infographic content directly on a webpage. This method also gives all users the opportunity to access the transcript information.Īdvanced developers and designers can create infographics using HTML and CSS. Advanced designers with web development skills can create a new page with the transcript and provide a link to the transcript directly above or below the image infographic. An example of this method is available in WebAim’s infographic accessibility tutorials. Displaying the description under the infographic gives all users access to the information.

A transcript can be displayed below an image infographic.

However, precaution must be taken when using this approach to avoid inadvertently causing a new accessibility concern. Advanced designers with web development skills can hide the text description of an image using a variety of HTML and CSS methods.

A transcript can be hidden behind an image.

When an image is displayed on a website, a transcript can be presented in the following ways: A transcript is simply a full-text version of the infographic that screen readers recognize and is therefore accessible to all users. Image infographics require an alternative text description in the form of a transcript. An image Infographic, therefore, requires an alternative method to ensure accessibility. A screen reader cannot recognize the content (text) within an image infographic because it is an image. Image infographics are the most popular infographic format, however this format is also the least accessible.

The following resource provides an overview of approaches to creating an accessible infographic and accessibility best practices to keep in mind when designing an infographic. Learn more about Canva vs PowerPoint Design.

Microsoft PowerPoint offers a quicker way to create accessible event flyers, infographics, posters, or newsletters that include image description (Alt Text), capability to re-arrange logical reading order, built-in accessibility checker, and retains all the structure when exporting to PDF. Adding flyers & infographics to Calendar Events.Flyers & Infographics in the Panopto video training (use your CSUN username and password to log in).Therefore, infographic designers must design accessibility into an infographic to ensure the content is recognizable to screen readers. However, because infographics are visual informational material, they inherently present accessibility barriers to users with visual or many cognitive disabilities. Infographics can be designed as images, websites, print material and PDFs and are known for these design features: An infographic is a visual representation of complex data that allows users to interact with the content.

Ideas for a social science infographic