Web-One Infographics

Transcription

1 Web-One Infographics

2 Goals Understand Accessibility best practices Where to get more information Be able to Conduct a four-point accessibility evaluation Communicate Provide equal access to information and communications

3 When creating an infographic, designers should always consider the following accessibility best practices Format Text display Structure Images Links Color contrast Mobile display Learn more about Infographics Best Practices

4 What are Screen Readers Screen readers are a form of assistive technology (AT) software that enables access to a computer, and all the things a computer does, by attempting to identify and interpret what is being displayed on the computer screen using text-to-speech. Screen readers can only access and process live text. Normally used by someone who is visually impaired.

5 Types of screen readers Screen reader program for Microsoft Windows that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a refreshable Braille display. NVDA screen reader can be downloaded free of charge by anyone. Provides auditory descriptions of each onscreen element using gestures, a keyboard, or a braille display. Adds spoken, audible, and vibration feedback to your device. Screen magnifier for Microsoft Windows that allows you to see and hear everything on the computer.

6 Benefits of using a screen reader provides access to someone who does not have useful vision, mobility or has a learning disability to access text on the screen offers same level of independence and privacy as anyone else

7 Infographics What are infographics? Use pictures to represent words, freestyle design An image is worth a thousand words Group information by colors Cluster information in a static order Use extreme color contrast

8 Infographics Challenges Can you use infographics? What are the challenges with creating infographics?

9 Text display Clear and easy to read and understand Avoid using difficult-to-read fonts and small text Divide large blocks of text into smaller sections Avoid overly complex sentences Provide adequate whitespace San-serif fonts are more suited to electronic formats (Arial, Calibri, Verdana or Franklin Gothic Book)

10 Structure An infographic must always have a logical structure that includes titles and heading levels Headings: Heading 1, 2, 3, etc., or <h1>, <h2>, <h3>, etc. Lists: bullets, numbered, outline Strong <strong> is the new bold Emphasis <em> is the new italic Organize content with descriptive title, headings, subheadings, lists, images, and footer are important for usability and accessibility.

11 Visual Challenge Normal vision Low vision Color blindness Blind or deaf-blind What s the best way to make images accessible to everyone?

12 Alternative or Alt Text A written description of images and/or objects that can be read by a blind or low vision using screen reader technology. Screen readers and other assistive technologies can t convert images into words/texts. Captions are universal and accessible for everyone. Image of, photo of is not needed. Recommend brief descriptive text within 8 to 80 characters long. Tiny turtle eating a ripe strawberry. Best practices for accessible images

13 Image, 1 of 2 Can we publish an event as image only?

14 Image, 2 of 2 The problem with flyers and infographics are generally published on event pages as image files where all text and hyperlinks are part of the image. Screen readers and other assistive technologies can t convert images into words/texts. Best Practices Requires a transcript (text alternative) Display text below or next to the infographic Link to the transcript (to an accessible file or web page) Hidden (accessibly) in the web page or file containing the infographic (Full HTML Access in Web-One) Web-One custom elements Adding flyers & infographics to Calendar Event

15 Text Alternative Best Practices 1. Enter all of the event information into the Web-One post. 2. If the flyer is an image, add descriptive text display below the infographic. i.e. image alt= Web Accessibility Principals Part 1 flyer 3. Add descriptive link text (avoid generic phrases like read more, click here, next page ) 4. Text alternative/descriptive benefit users to use language translation tools/app. Adding flyers & infographics to Calendar Event

16 Text alternative/descriptive benefit users to use language translation tools/app. Text Alternative: Google Translate

17 Infographics Image: Toggle Show/Hide Content that requires longer text to explain and provide more information about Infographics. This is preferred method if you have Full HTML Access in Web-One using UDC Custom Elements.

18 Descriptive Hyperlinks, 1 of 2 Not Accessible vague and redundant Accessible descriptive and unique Read more, click here, me, or continue is vague and redundant Full URL text (raw URL may not make sense to screen reader users or others, so make the link text descriptive i.e. Universal Design Center)

19 Descriptive Hyperlinks, 2 of 2 Link text should clearly identify the target of each link. Good link text should not be overly general. Make sense when read out of context. Describe the destination (document name, website). Be unique for unique destinations. Do not use click here or read more or continue. Do not use different link text to refer to the same resource. Do not to use the same link text to refer to different resources. Best practice is to bold or underline links. Do not use color links as the only method to convey important information.

20 Color Contrast

21 Meaning without Color color vs black & white Color is not the sole means of conveying important information (i.e. avoid color-coding) Use color with pattern fill to provide accessible version (Charts & Accessibility by Penn State)

22 Provide descriptions if using color to convey meaning Example 1: Inaccessible color highlights in red May 11-17, 2019 Example 1: Accessible with a description May 11-17, 2019 (final exams) Example 3: Inaccessible color shape Color identical may not be recognized by colorblind users Example 2: Inaccessible table Example 2: Accessible table Example 3: Accessible color and number

23 Check Color Contrast Download Colour Contrast Analyser onto your computer (PC/Mac) to ensure accessible contrast or use an online contrast checker from WebAIM. WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal sized text (12 pt. font) and 3:1 for large text (14 pt. font). Coblis Color Blindness Simulator

24 Reading Order Screen readers read a document from left-to-right and up-to-down. That means reading order is important for users with visual impairments. When content, tables, images or charts is out of order or a document is poorly organized, the reader can become confused to the meaning of the information. The reading order should be the same as visual order for English language. Left Right Up Down

25 Mobile Display Preview your , flyer or infographic on one or more mobile devices. Avoid making large infographics as they cannot be properly displayed on mobile devices. Best practices for infographic sizing When the flyer/infographic is zoomed in, the content resizes appropriately. The flyer/infographic is readable using a mobile device screen reader (Voiceover for ios and Talkback for Android) Credit by Visually Blog Designing Infographics for Mobile

26 Four-point Accessibility Evaluation FONT COLOR TAB ENLARGE Is the font styling easy to read? Is the font color easy to read? Can a user tab through the functions? Can a user make the font bigger? (ctrl +)

27 Resources Creating Accessible Infographics Flyers and Infographics in Calendar Events Infographics Checklist Web Accessibility Criteria Best practices for infographic sizing

28 Reflection Creating accessible digital content can t happen overnight. Accessibility is for everyone. How can we you make a big difference Accessibility Modules with Canvas Courses Universal Design Principles Instructional Materials Web Accessibility Accessibility FAQs