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