快活林性息

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

Image Infographics

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

1. A transcript can be hidden behind an image.听Advanced designers with web development skills can hide the text description of an image using a variety of HTML and CSS methods. However, precaution must be taken when using this approach to avoid inadvertently causing a new accessibility concern. 听
2. A transcript can be displayed below an image infographic.听Displaying the description under the infographic gives all users access to the information.听 An example of this method is available in听.
3. A transcript can be linked.听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. This method also gives all users the opportunity to access the transcript information.听听

HTML and CSS Infographics

Advanced developers and designers can create infographics using HTML and CSS. HTML/CSS infographics embed the infographic content directly on a webpage. 听If the HTML and CSS are developed using custom codes to include accessibility, then the infographic becomes accessible to screen readers. In addition, an HTML infographic increases Search Engine Optimization (SEO) whereas an infographic that is an image does not, view听.听

PDF Infographics

Infographics as PDFs are becoming widely popular thanks to their ability to be easily shared across multiple platforms. A PDF infographic can be made accessible if all听document accessibility听best practices for PDFs are followed. 听To make an accessible PDF infographic, users require Adobe Acrobat Professional (Pro). Adobe Acrobat Pro allows users to add accessibility markup (tags) and structure that can easily be read by screen readers. For a tutorial on creating accessible PDF through Adobe Acrobat Pro go to听UDC鈥檚 PDF Documents page. 听

The example below demonstrates a PDF infographic with appropriate accessibility markup. As rule of thumb, a PDF infographic must never be an image and should always have selectable text. This will allow users to accurately markup the PDF with appropriate accessibility tags.听听

听When creating an infographic, designers should always consider the following accessibility best practices:

• Text display: Text should always be clear and easy to understand for maximum reader comprehension. Avoid using difficult to read font, small text and ensure the language and tone in written text is appropriate to ensure the audience remains engaged.
• Images: When images or graphics are included within an infographic, those images must also be described if they convey important meaning or message. 听For additional support about how to write text descriptions for images, please review听Best Practices for Accessible Images.
• Links:听If there are links in an infographic, the link text must clearly describe where the link is going to take a user. Do not use link phrases such as 鈥渃lick here鈥� or 鈥渞ead more鈥� and always ensure the link can be easily distinguished to users.听Please note: links in an image infographic are not accessible. 听
• Color contrast:听When using color in an infographic, always make sure there is enough color contrast between the foreground content and background content. When the foreground and background colors are too similar, users will have a hard time understanding the information.
• Structure:听an infographic must always have a logical structure that includes titles and heading levels.
• Mobile Display:听Avoid making large infographics as they cannot be properly displayed on mobile devices.听听

Also consider the following criteria when creating an infographic, courtesy of WebAIM:

• Describing Images
• Best Practices for Accessible Images
• Web Accessibility Criteria