{"id":895,"date":"2022-05-20T13:38:59","date_gmt":"2022-05-20T13:38:59","guid":{"rendered":"https:\/\/web.tarleton.edu\/accessibility\/?page_id=895"},"modified":"2023-05-09T18:23:53","modified_gmt":"2023-05-09T18:23:53","slug":"infographics-fliers","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/accessibility\/infographics-fliers\/","title":{"rendered":"Infographics &#038; Fliers"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<h2 class=\"wp-block-heading advgb-dyn-970bdc3a\">Cool Tools!<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is it too much text? Check with\u00a0<a href=\"https:\/\/www.facebook.com\/business\/help\/980593475366490?id=1240182842783684\">Facebook&#8217;s Text Overlay Tool<\/a>.<\/li>\n\n\n\n<li>Poor contrast between background color and text? Use&nbsp;<a href=\"http:\/\/www.brandwood.com\/a11y\/\">Brandwood&#8217;s Text on background image a11y check<\/a>.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<h2 class=\"wp-block-heading advgb-dyn-c715140c\">Defining the Scope<\/h2>\n\n\n\n<p>Infographics include graphs, charts, diagrams and any other text and\/or graphic heavy image. Fliers, posters, digital advertising, and other text heavy images are included in this category due to the flatness of these images (i.e. nothing can be highlighted or copied\/pasted into another application).<\/p>\n\n\n\n<p>If alternative text for the image exceeds 125 characters, a different solution must be made to provide the same message and experience for all<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-e49120f6\">Importance of Graphical Content and Accessibility<\/h2>\n\n\n\n<p>Infographics include&nbsp;<a href=\"https:\/\/www.tarleton.edu\/accessibility\/standards\/infographics.html#data\">data visualizations<\/a>&nbsp;(e.g. graphs, charts, diagrams) and any other graphic and\/or&nbsp;<a href=\"https:\/\/www.tarleton.edu\/accessibility\/standards\/infographics.html#print\">text heavy image<\/a>. Fliers, posters, digital advertising, and other text heavy images are included in this category due to the flatness of these images (i.e. nothing can be highlighted or copied\/pasted into another application).<\/p>\n\n\n\n<p>Visual users often respond to graphical content more than textual content, but the message and importance is too often lost on the visually impaired or disabled when viewing electronic and information resources (EIR) as well as mobile video users viewing the content on small screen sizes. It is vitally important, as we observe the future trends of graphical content, that our message is still accessible.<\/p>\n\n\n\n<p>If alternative text for the graphic exceeds 125 characters, a different solution must be made to provide the same message and experience for all users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-f83ee27a\">Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-2e19987b\">Web, Documents &amp; Email<\/h3>\n\n\n\n<p>Web content, electronic documents and email messages function in similar manners regarding embedded images.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Graphics, and their embedded alternative text, should be strategically placed around textual content (see&nbsp;<a href=\"http:\/\/webaim.org\/resources\/designers\/\">Web&nbsp;<abbr title=\"Accessibility in Mind\">AIM<\/abbr>&nbsp;example of accessible webpage infographic<\/a>).<\/li>\n\n\n\n<li>Link to a&nbsp;<a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H45.html\">long description<\/a>&nbsp;on a webpage.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-e6781580\">Lecture &amp; Test Materials<\/h3>\n\n\n\n<p>See&nbsp;<a href=\"http:\/\/ncam.wgbh.org\/file_download\/159\">National Center for Accessible Media (NCAM)&nbsp;<em>Item Writer Guidelines for Greater Accessibility<\/em><\/a>&nbsp;for examples and instructions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-8c030e80\">Social Media<\/h3>\n\n\n\n<p>Social media platforms have varying accessibility regarding alternative text for graphics. Where you cannot provide alternative text,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>include the alternative text directly in the post&nbsp;<\/li>\n\n\n\n<li>linking to a &#8220;long description&#8221;&nbsp;can mean a link to a webpage or event page<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-5a4abdc1\">Print material versus digital material<\/h2>\n\n\n\n<p><strong>Digital materials must be planned out and designed for each channel or platform.<\/strong>&nbsp;One size does not fit all. Consider the following when converting your print materials to digital.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Challenge<\/th><th>Solution<\/th><\/tr><tr><td>Electronic media is viewable on multiple video operating systems, browsers, email clients, and screen sizes.<\/td><td>Design with a text-first strategy of including all important content in textual form and embellishing with images where important content is not lost.<\/td><\/tr><tr><td>Video\/clients show the same colors differently, and visually impaired users will see different colors based on their needs (e.g. redefining the colors for readability) or impairment (e.g. color blind).<\/td><td>Stick to basic\/defined color sets on text, and don&#8217;t worry about the color being slightly off. Make sure the color of text in the foreground of a graphic does not clash (e.g. not too low contrast, not too bright contrast) with the graphics in the background.<\/td><\/tr><tr><td>Text on images do not wrap on any screen, forcing horizontal scrolling which is frustrating for able users and for users with visual impairments or motor function disabilities.<\/td><td>If you use text on graphics, make it large (12 point or higher), legible (e.g. thickness), readable (e.g. good spacing between characters, words, and phrases), and succinct.<\/td><\/tr><tr><td>Images of text do not improve legibility by zooming in for the visually impaired because the text is a part of the image, not separate from the image as highlightable (the ability to copy and paste).<\/td><td>Use text instead of images of text, then spice them up with some basic colors and other legible styles.<\/td><\/tr><tr><td>It is impossible to highlight text off an image and paste it into an application, like a calendar app. You must type it all out which is a burden for many users with or without impairments or disabilities.<\/td><td>Use text instead of images of text, or link to more information, such as a calendar system where the event information can be easily added to your calendar app.<\/td><\/tr><tr><td>If graphical buttons or text of web addresses in the image, they are inaccessible to interaction (e.g. click, swipe, touch).<\/td><td>Make each button a separate image, and use a call to action or recognizable icon instead of a web address for the text on the image.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-e2bb0858\">Data Visualizations<\/h2>\n\n\n\n<p>Digital visualizations are just that: the&nbsp;<em>visualization<\/em>&nbsp;of data.&nbsp;The alternative for screen readers to the visual is available in the tabular&nbsp;<em>data<\/em>. This can be done with a table near the graph or a link to the table on another page or spreadsheet document, along with a summary or conclusions the visualization was supposed to bring across.<\/p>\n\n\n\n<p>However, accessibility of data visualizations is not just a screen reader challenge. Tips for making data usable for visually able and impaired users:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide a&nbsp;<strong>summary or conclusions<\/strong>&nbsp;in textual form near the data visualization, like a figure caption.<\/li>\n\n\n\n<li>When using colors to distinguish different data (e.g. bar graphs), use&nbsp;<strong>contrasting colors<\/strong>&nbsp;or shades of a color with reasonable variance (e.g. three bars could be 100% gray, 75% gray and 50% gray to still distinguish themselves from a white background).<\/li>\n\n\n\n<li>When using color to indicate different data (e.g. line graphs), include&nbsp;<strong>another visual indicator<\/strong>&nbsp;(e.g. labels next to lines, symbols on data points, different patterned lines\/shapes). They are helpful when color is reduced to black and white.<\/li>\n\n\n\n<li>When providing percentages or quantities, make sure they are&nbsp;<strong>proportionally correct visually<\/strong>&nbsp;(e.g. 25% occupies a quarter of the data set, symbols\/icons are of equal size and value when repeated to represent their quantities).<\/li>\n\n\n\n<li>Provide&nbsp;<strong>just enough labels<\/strong>&nbsp;to indicate the conclusion found in the data. Too little provide few answers. Too much creates confusion.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading advgb-dyn-9a908e3e\">References<\/h2>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-182172a7\">Guides and How-To&#8217;s<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webstandards.hhs.gov\/guidelines\/\">Usability.gov&#8217;s Web Standards and Usability Guidelines<\/a>\n<ul class=\"wp-block-list\">\n<li>Chapter 1: Optimizing the User Experience<\/li>\n\n\n\n<li>Chapter 3: Accessibility<\/li>\n\n\n\n<li>Chapter 11: Text Appearance<\/li>\n\n\n\n<li>Chapter 14: Graphics, Images, and Multimedia<\/li>\n\n\n\n<li>Chapter 16: Content Organization<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Web Accessibility Initiative (WAI)\n<ul class=\"wp-block-list\">\n<li>Tutorials\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\">Images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/content\/\">Content Structure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/\">Carousels (Slideshows)<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Designing and Developing\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#use-headings-to-convey-meaning-and-structure\">Use headings to convey meaning and structure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#make-link-text-meaningful\">Make link text meaningful<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#write-meaningful-text-alternatives-for-images\">Write meaningful text alternatives for images<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#provide-clear-instructions\">Provide clear instructions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#keep-content-clear-and-concise\">Keep content clear and concise<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#provide-sufficient-contrast-between-foreground-and-background\">Provide sufficient contrast between foreground and background<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#dont-use-color-alone-to-convey-information\">Don\u2019t use color alone to convey information<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#ensure-that-interactive-elements-are-easy-to-identify\">Ensure that interactive elements are easy to identify<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#use-headings-and-spacing-to-group-related-content\">Use headings and spacing to group related content<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#create-designs-for-different-viewport-sizes\">Create designs for different viewport sizes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#include-image-and-media-alternatives-in-your-design\">Include image and media alternatives in your design<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/developing\/#use-mark-up-to-convey-meaning-and-structure\">Use mark-up to convey meaning and structure<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading advgb-dyn-fd42bc38\">Data Visualizations<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/stephanieevergreen.com\/508-compliance-data-visualization\/\">Evergreen Data: 508 Compliance &amp; Data Visualization<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading advgb-dyn-20c1d407\">Infographics<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webaim.org\/resources\/designers\/\">WebAIM: How to create an accessible infographic<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.interactiveaccessibility.com\/blog\/creating-accessible-infographic\">Interactive Accessibility: Creating an Accessible Infographic<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-d3aba5b2\">Guidelines<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#content-structure-separation\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.3 &#8211; Adaptable<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation.html\">Understanding&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.3<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\">1.3.1 Info and Relationships Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-sequence.html\">1.3.2 Meaningful Sequence Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-understanding.html\">1.3.3 Sensory Characteristics Level A<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#visual-audio-contrast\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.4 &#8211; Distinguishable<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast.html\">Understanding&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.4<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\">1.4.1 Use of Color Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\">1.4.3 Contrast (Minimum) Level AA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-presentation.html\">1.4.5 Images of Text Level AA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-presentation.html\">1.4.6 Contrast (Enhanced) Level AAA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-visual-presentation.html\">1.4.8 Visual Presentation Level AAA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-images.html\">1.4.9 Images of Text (No Exception) Level AAA<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G96.html\">Techniques for&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 G96: Providing textual identification of items that otherwise rely only on sensory information to be understood<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G117.html\">Techniques for&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 G117: Using text to convey information that is conveyed by variations in presentation of text<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-61e594f0\">Simulations<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=d5oZf9ULAyw\">User Simulation: Through Eyes of a Screen Reader<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=EEN79RRvKqE\">LevelAccess<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=EEN79RRvKqE\">Simulation: ZoomText Demo<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=fCrZhnFrxjk\">Simulation: Screen Magnification &amp; Reflow in Acrobat Reader<\/a>&nbsp;(also example of horizontal scrolling issues)<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=45R0pb8YwFE\">Simulation: Screen Reader Language Support<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=QP1rzxMRap4\">Simulation: Web Headings for Screen Readers<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=L-99RfyMCVU\">Simulation: Effective Color Contrast<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=kJKQmTumFP0\">Simulation: Dragon NaturallySpeaking Demo<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=KsxFsPmA4RY\">Simulation: Using Microsoft Word with Dragon NaturallySpeaking<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=RMuQq7C5i48\">Simulation: On-Screen Keyboard Demo<\/a>&nbsp;(also example of time limit issue)<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=mUdrWQMgcSI\">Simulation: Visual Focus Indication<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=6dFakpCp7S8\">Simulation: Readability<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=KmDGvquzn2k\">User Simulation: Carly&#8217;s Caf\u00e9 &#8211; Experience Autism Through Carly&#8217;s Eyes<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=ycCN3qTYVyo\">The National Autistic Society Simulation: Autism and sensory sensitivity<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Cool Tools! Defining the Scope Infographics include graphs, charts, diagrams and any other text and\/or graphic heavy image. Fliers, posters, digital advertising, and other text heavy images are included in &#8230;<\/p>\n","protected":false},"author":3,"featured_media":580,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-895","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/accessibility\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 4 years ago","modified":"Updated 3 years ago"},"absolute_dates":{"created":"Posted on May 20, 2022","modified":"Updated on May 9, 2023"},"absolute_dates_time":{"created":"Posted on May 20, 2022 1:38 pm","modified":"Updated on May 9, 2023 6:23 pm"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=895"}],"version-history":[{"count":0,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}