Create Accessible Infographics
-
Upload
ted-drake -
Category
Technology
-
view
3.205 -
download
0
description
Transcript of Create Accessible Infographics
![Page 1: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/1.jpg)
Accessible Infographics
CSUN 2013Ted Drake, Intuit Accessibility
Test pages and sample code:last-child.com/accessible-infographics
Slides: Slideshare.net/7mary4/
Twitter: @ted_drake
Wednesday, March 6, 13
Many of these slides will have cute images of otters. You won’t be missing anything if you are not able to see the slide.I will announce anything that is important.I am interested in meeting with Intuit users to get your feedback. What works, what doesn’t? Otter images are available via creative commons and Flickr.
![Page 2: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/2.jpg)
What is an infographic?
Wednesday, March 6, 13
![Page 3: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/3.jpg)
Wednesday, March 6, 13
“Even as a tree has a single trunk,but many branches and leaves, there is one religion, but many faiths” - Mahatma Gandhi
![Page 4: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/4.jpg)
Wednesday, March 6, 13
http://venturebeat.com/2013/02/05/sprinklr-funding/the social media map as defined by sprinklr
![Page 5: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/5.jpg)
Wednesday, March 6, 13
http://www.disabled-world.com/disability/statistics/american-disability.php
![Page 6: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/6.jpg)
Wednesday, March 6, 13
![Page 7: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/7.jpg)
Goals
“otter” by Sodaro,k Wednesday, March 6, 13
This presentation will cover the following topics The Audience Longdesc attribute Using ARIA Including the transcript Linking to the transcript Recommendations“otter” by Sodaro,k
![Page 8: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/8.jpg)
Audience“otters” by Adrian Maidment
Wednesday, March 6, 13
These solutions do not consider the screen reader user as the only audience. They place equal importance on developers, including bloggers, as well as marketing teams that hope to generate publicity by creating engaging infographics. They were tested against the following criteria:
• Browsers and screen reader support• The viewers ability to copy/paste the content• Ease of coding and sharing
![Page 9: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/9.jpg)
Longdesc“Otters!” by ianbckwltr
Wednesday, March 6, 13
The longdesc attribute allows developers to connect an image to a description.It is not fully supported and has been targeted for deprecation in HTML5It’s easy to code.
![Page 10: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/10.jpg)
<img src=”otter.jpg” alt=”wild otter” longdesc=”otter.html”>
Wednesday, March 6, 13
The longdesc attribute contains a reference to a web page with the full description of the image. The description can be located on the same page as the image.
![Page 11: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/11.jpg)
Wednesday, March 6, 13
This video shows JAWS announcing an image with a long description and subsequently navigating to the page with the long description. http://www.youtube.com/watch?v=vXF7JwY3rxI
![Page 12: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/12.jpg)
ARIA
“Otter” by Stephen & Claire Farnsworth
Wednesday, March 6, 13
The ARIA standard allows developers to make interactive, application-like web sites accessible. ARIA attributes allow developers to define roles, states, and labels. There are two attributes that could be used for making infographics accessible.
![Page 13: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/13.jpg)
Wednesday, March 6, 13
Tweet conversation Feb. 13@ted_drake: From a purely semantic standpoint. What should replace longdesc: aria-labelledby or aria-describedby? What about user expectation? #a11y@Jennison: @ted_drake Re user expectation, I bet if you asked the "average" user, they wouldn't care which one, so long as the info is there.
![Page 14: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/14.jpg)
webaxe@ted_drake Also, the main problem with replacing #longdesc is that aria alternatives strip out all structural markup, no? @Jennison
Wednesday, March 6, 13
While the longdesc allowed the user to navigate to a page with the description, the aria-describedby attribute causes the screen reader to grab that content and announceit as a single text string. The user cannot stop, rewind, or navigate the description.
Tweet from WebAxe about the stringification of the description.
![Page 15: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/15.jpg)
aria-describedby<img src=”otter.jpg” alt=”wild otter” aria-describedby=”otter”>
Wednesday, March 6, 13
The aria-describedby attribute points to content on the same page that provides a secondary description. It over-rides the title attribute.Support is inconsistent
![Page 16: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/16.jpg)
Wednesday, March 6, 13
This video shows VoiceOver and Safari announcing an infographic with aria-describedby.Notice there is a short delay before the description is announced. The user may not know the description is available.http://www.youtube.com/watch?feature=player_embedded&v=fdv8lXN5amo
![Page 17: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/17.jpg)
aria-labelledby<img src=”otter.jpg” alt=”wild otter” aria-labelledby=”otter”>
Wednesday, March 6, 13
aria-labelledby is normally used for form inputs. It allows the user to define a label via content on the page.aria-labelledby over-rides the alt attribute on an image. The user may not know they have landed on an image, they are immediately presented with the description as a text string.
![Page 18: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/18.jpg)
Wednesday, March 6, 13
This short video shows how VoiceOver announces an image with aria-labelledby.Notice VoiceOver does not announce the image has focus.http://www.youtube.com/watch?v=If3pBxuHGVg
![Page 19: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/19.jpg)
Include the Transcript
Otter Creek Used Book Sign from benjamin_scott_florinWednesday, March 6, 13
Longdesc allows the user to navigate to a transcript.Aria attributes trigger the screen reader grab that content and announce it.Including the transcript makes it accessible to everyone, regardless of devices.Long transcripts can be distracting when the infographic is shared.
![Page 20: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/20.jpg)
Wednesday, March 6, 13
This short video shows VoiceOver announcing an infographic and its transcript. http://www.youtube.com/watch?v=_6i4Z2nRYLs
![Page 21: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/21.jpg)
Hide the transcript
Peek-A-Boo by Rega PhotographyWednesday, March 6, 13
Hide the transcript visually, yet make it available to screen readers with the clip patternhttp://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/This is great for screen reader users, but sighted users are not able to copy/paste content.Hidden links will receive focus, which can be confusing for sighted keyboard users.
![Page 22: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/22.jpg)
Wednesday, March 6, 13
This video shows how a screen reader announces the hidden content. Visually there is not much change on the page as the screen reader moves through the hidden description. http://www.youtube.com/watch?v=iA-xVkY5_ys
![Page 23: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/23.jpg)
Toggle the Transcript
Otter Love part deux by markspokes49
Wednesday, March 6, 13
Give everyone the ability to read and interact with the transcript by hiding it initially and providing a toggle button. Using display:none will hide the content completely. It’s important to control focus when toggling visibility to make sure screen reader users know the page has changed.Iframes may not expand to include the new content. This will generate scroll bars in some browsers.
![Page 24: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/24.jpg)
Accessible Toggles1.Visible with JavaScript disabled. 2.JS hides transcript & gives header
tabindex=”-1”3.Make the transcript visible, set focus on
header, hide the “show” button.4.Hide the transcript, display the show
button, set focus back on the show button.
Wednesday, March 6, 13
1. The toggle behavior depends on JavaScript, so on page load we will hide the transcript and give the header tabindex="-1" for future focus.
2. The show button will make the transcript visible, set focus on the transcript’s first header, and hide the show button.3. The hide buttons will close the transcript, make the show button visible, and set focus back on the show button
![Page 25: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/25.jpg)
Wednesday, March 6, 13
This video shows how the transcript can easily be toggled. It also shows how focus is moved to the relevant areas. http://www.youtube.com/watch?v=wZuNBe5DK6M
![Page 26: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/26.jpg)
Transcript LinksNew Forest otters by Prince Heathen
Wednesday, March 6, 13
Adding a link to the transcript allows everyone to view an accessible description.Sharing the links can improve SEO[d] or descriptive links were not well adapted and the abbreviation is confusing.Add a standard text link or wrap the infographic in a link.
![Page 27: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/27.jpg)
Wednesday, March 6, 13
This video shows a screen reader announcing the various transcript link options. http://www.youtube.com/watch?v=350NeoM203M
![Page 28: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/28.jpg)
Sharing the infographic
Otter mom and pup by mikebaird
Wednesday, March 6, 13
Many infographics are created to promote a company, campaign, or organization. Their power increases as individuals spread the message by reposting the infographic.It’s easy to share an image. It’s not easy to share the extra code needed to make it accessible. iframes allow developers to place infographic and transcript on their servers and provide a simple method for sharing.photo title: This image is honored as Wikipdia Picture of the Day 28 July 2009 (Best of 3) Sea Otter (Enhydra lutris) mother with nursing pup in the Morro Bay harbor
![Page 29: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/29.jpg)
Sharing the infographic link
<a href=”http://otters.com”> <img src=”otters.jpg” alt=”otter sports”></a>
Wednesday, March 6, 13
![Page 30: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/30.jpg)
Using iFrames
Here I am by alumroot
Wednesday, March 6, 13
iframes allow us to easily embed content from other sites. YouTube’s use of iframes has forced blog and other publishing platforms to accept iframed content.iframes are sandboxes and are not affected by CSS or JS on host page.
![Page 31: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/31.jpg)
<iframe seamless="seamless" src="http://otters.com" title="Otter diets" height="100" width="600"></iframe>
Wednesday, March 6, 13
The seamless attribute, not fully supported, allows iframes to expand to content and inherit stylesiframes require a title for accessibility
![Page 32: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/32.jpg)
Final Sharing Recommendations
• Wrap your infographic in a link that points to a page that includes the infographic and visible transcript.
• Use an iframe and offer a page with visually hidden or toggled transcript.
Wednesday, March 6, 13
![Page 33: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/33.jpg)
More Options
• HTML5 contextual menu
• Display descriptive link on hover/focus
• Accessible-Longdesc JavaScript
• epub:describedAt, aria-describedat
• Image Description Service: Poet
Wednesday, March 6, 13
the HTML5 menu allows developers to modify the browser’s contextual menu.Accessible Longdesc takes the longdesc source and makes it navigable by any user.THe Diagram Center is researching methods to increase image descriptions within e-bookshttp://diagramcenter.org/development/poet/image-description-process.html
![Page 34: Create Accessible Infographics](https://reader034.fdocuments.us/reader034/viewer/2022052505/554beba3b4c9055a368b4e8e/html5/thumbnails/34.jpg)
Questions
I don’t trust you, otter by splityam
Wednesday, March 6, 13