flyers & infographics accessibility · large infographics as they cannot be properly displayed...
TRANSCRIPT
Flyers & Infographics Accessibility (A11y)
What is Assistive Technology?Assistive Technology (AT) are “products, equipment, and systems that enhance
learning, working, and daily living for persons with disabilities.”
Screen Readers Magnification Software
Speech Recognition Trackball Mouse Keyboard
Zoom Text Braille Computer Keyboard Captions/Subtitles Captioned Telephone
Video Relay Services
What are Screen ReadersScreen 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.
• Provides access to someone who is visually impaired, mobility or has a learning disability to access text on the screen.
• Offers same level of independence and privacy as anyone else.
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.
Flyers Examples
What are Infographics?
• A picture is worth a thousand words
• Use pictures to represent words
• A picture that blends data with design to communicate their ideas
• Group information by colors
• Use extreme color contrast
Infographics Challenges
• Can you use infographics?
• What are the challenges with creating infographics?
o Text is not recognized
o Layers may interfere with Adobe Acrobat PDF tagging of infographics
Major Challenges• Software like Adobe Photoshop used to
create the infographic is text on image, therefore, text is not being recognized by screen readers.
• Adobe Illustrator have multiple layers and may make it a challenge to tag content in PDF. Content may “disappear” when tagging it.
Best conversion software and alternatives
• Create from accessible document (Word, InDesign, Publisher, or Canva)
• Use software that can make selectable text
• Instead of a PDF Flyer/Infographic make an infographic into a webpage. Adding flyers & infographics to Calendar Event
Flatten multilayers objects into one imageRecommend to flatten all multilayered objects into one image (PNG, JPG, or SVG) or use SnagIt screen capture to import image into Word, InDesign, Publisher, or Canva software. Image should have meaningful alternative text. Add selectable text in this software instead of text on image.
Learn more about Infographics Best Practices
Your creativity is worth millions as long as
you consider the following accessibility
best practices
Textdisplay
• 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)
Document StructureAn 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.
Visual Challenge
Normal vision Low vision Color blindness Blind or deaf-blind
What’s the best way to make images accessible to everyone?
Image Alternative or Alt Text• The purpose of alt text is to allow low vision or
blind users to understand the purpose of the image. Describe only how image relates to content. What is its purpose? Why the image there?
• 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.
• Keep alt text short 8 to 120 characters or less.
• Alt text should be very brief, no more than a sentence or two.
• Best practices for accessible images
When screen readers encounter an image, they read out the word “image” or “graphic”
and then read the alt text: “Three plants going through transformation with text quote Accessibility user-friendly
document for CSUN student success.”
How to Describe Images?
A stair chase leading up to an entryway is painted yellow with bold black text that reads
museums are now.
A hand reaches out of a computer screen giving the hand gesture for stop. The screen reads
‘access denied!’
On the left is the book cover for Haben The Deafblind Woman Who Conquered Harvard Law, and on the
right is the quote: “In the Tigrinya language of Eritrea and Ethiopia, Haben means 'pride.’”
Michelle Obama claps and Barack waves. Student holds a diploma hardcover up in the air during CSUN commencement. Caption text "and together, as Matadors, we will move mountains."
More examples of How to Describe Images
• Document Learning Tools: Describing images
• How to Describe Images (Art, Chemistry, Diagrams, Flow Charts, Formatting & Layout, Graphs, Maps, Mathematics, Page Layout, Tables, Text-only images)
• Periodic Table of the Elements
• UDC Best Practices for Describing Images
Infographics Format• Image
• Requires a transcript (text alternative)• Display 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• Web-One custom elements
• Webpage• Follow web best practices
• PDF• Follow PDF best practices
Flyers & Infographics Examples
Can we publish text on image on a webpage?
Infographic Format: ImageThe 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 PracticesRequires 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
Infographic Format:Event Page Text Alternative
Best Practices1. 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 image.HTML Alt is “Web Accessibility Principals Part 1 Event 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
Infographics WebpageImage upload and HTML Alt is “A graph describing steps How To Apply to CSUN”Note: If there is a title or header, use as alt text. Brief describe what is going on in the image not the details. Keep alt text short 8 to 120 characters or less. Short URL is ok for printing/handouts. On a webpage, cloaking it so less confusing for screen readers.
Body pageFor CSUN
Step 1: Check out our 65+ majors and 55+ master’s degrees
Step 2: Go to Cal State Apply
.
For NCOD
Step 4: Complete “NCOD Supplemental Application”
.
SAVE THE DATE
…
THRIVE at CSUN!
Infographics Image: Toggle Show/HideContent 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.
Text Alternative Webpage: Google Translate
Text alternative/descriptive benefit users to use language
translation tools/app.
Infographic Format: PDFEmbedding a PDF format of an infographic or flyer is also an excellent alternative. However, when adding links to PDF’s on the web, content creators must ensure the PDF document adheres to all PDF accessibility requirements.
Best Practices• Accessibility markup (tags)• Structure that can easily read by screen
readers• Selectable text• Sharable and consistent across platforms
(mac, pc, mobile, tablet)
Adding flyers & infographics to Calendar Event
PDF Infographic with Accessibility Markup
Email Text-based equivalent
Outlook Client: Alt Text to Images
Outlook 20161. Right-click on the
image, select Format Picture, select Layout & Properties, and then select Alt text.
2. Add a detailed description of the image, and why the image is important to your message.
Outlook 3651. Right-click on the
image, select Edit Alt Text.
2. Add a detailed description of the image, and why the image is important to your message.
Office 365 Outlook Web App (Alt Text)
• Insert Image• Right click on image to
select Insert alt text• Run Accessibility Check
Descriptive Hyperlinks, 1 of 2Not Accessible – vague and redundant Accessible – descriptive and unique
Full URL text https://www.csun.edu/universal-design-center(raw URL may not make sense to screen reader users or others, so make the link text descriptive i.e. Universal Design Center)
Descriptive Hyperlinks, 2 of 2When creating hyperlinks, make sure the text associated with the link is understandable out of context.
• Avoid this: You may find this tutorial here.
• Do this: You may find this tutorial on creating accessible Word document on our website.
For Printing• If the document is likely to be printed, include
the full URL. If the URL is long, consider creating a shorten URL (tiny.cc or bitly.com or other URL services)You may find this tutorial on creating accessible Word document on our website(www.csun.edu/udc/word)
• Do not use click here or here or read moreor continue or email me.
• 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.
• Be unique for unique destinations.
• Best practice is to bold or underline links.
• Do not use color links as the only method to convey important information.
• Tab order should read from the upper left to the lower right, and make sense to both sighted and visually impaired users.
Web-One Hyperlinks
Provide meaningful link text
Color Contrast
Check Color Contrast
People who have low vision or colorblind could encounter some difficulty distinguishing text color from a background color if the contrast is insufficient contrast ratio 1.5:1.
This example has a great color contrast ratio of 8.7:1. The contrast is sufficient for those who have color deficiencies
• 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 regular sized text (12 or 14 pt. font) and 3:1 for large text (18 pt. font).
• Coblis Color Blindness Simulator
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)
Provide descriptions if using color to convey meaningExample 1: Inaccessible color highlights in red
May 11-17, 2019
Example 1: Accessible with a descriptionMay 11-17, 2019* (final exams)
Example 2: Inaccessible table
Example 2: Accessible table
Example 3: Inaccessible color shape
Color identical may not be recognized by colorblind users
Example 3: Accessible color and number
Mobile DisplayPreview your email, 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
Learn more about Infographics Best Practices
Your creativity is worth millions as long as
you consider the following accessibility
best practices
How can we help you make a difference?
Universal Design means design for everyone
Universal Design Center Offers• Online, self-paced training• In-person training each semester• Consultations• Tools and Services