1. Accessible Infographics CSUN 2013

   Ted Drake, Intuit Accessibility
   Test pages and sample code: Accessible Infographics
   Slides: Slideshare.net/7mary4/
   Twitter: @ted_drake
   Otter images are available via creative commons and Flickr.

2. What is an infographic?

3. “Even as a tree has a single trunk,but many branches and leaves, thereis one religion, but many faiths”
   – Mahatma Gandhi

4. Social media map as defined by sprinklr , this image has no text and uses only color, icons, and arrows.
5. Disability in America infographic by Disabled World
6. Travel in America infographic from MapQuest. This is the infographic used in all testing. It is very long.
7. 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

8. Audience “otters” by Adrian Maidment
   The solutions in theis presentation 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 togenerate 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
9. Longdesc “Otters!” by ianbckwltr
   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.

10. 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.

11. This video shows JAWS announcing an image with a long description and subsequently navigating to the page with the long description.
12. ARIA “Otter” by Stephen & Claire Farnsworth
    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.
13. Tweet conversation Feb. 13
    

    @ted_drake: From a purely semantic standpoint. What should replace longdesc: aria-labelledby or aria-describedby? What about userexpectation? #a11y

    @Jennison: @ted_drake Re user expectation, I bet if you asked the “average” user, they wouldnt care which one, so long as the info is there.

14. aria-describedby

    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

15. Tweet from WebAxe about the stringification of the description.
    

    webaxe
    @ted_drake Also, the main problem with replacing #longdesc is that aria alternatives strip out all structural markup, no? @Jennison

    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.

16. 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.
17. aria-labelledby

    aria-labelledby is normally used for form inputs. It allows the user to define a label viacontent 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 withthe description as a text string.

18. This short video shows how VoiceOver announces an image with aria-labelledby. Notice VoiceOver does not announce the image has focus.
19. Include the Transcript Otter Creek Used Book Sign from benjamin_scott_florin
    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.
20. This short video shows VoiceOver announcing an infographic and its transcript.
21. Hide the transcript Peek-A-Boo by Rega Photography Hide the transcript visually, yet make it available to screen readers with the clip pattern: 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.
22. 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.
23. Toggle the Transcript Otter Love part deux by markspokes49 Give everyone the ability to read and interact with the transcript by hiding it initially andproviding 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. brs may not expand to include the new content. This will generate scroll bars in some browsers.
24. Accessible Toggles
    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
25. This video shows how the transcript can easily be toggled. It also shows how focus is moved to the relevant areas.
26. Transcript Links New Forest otters by Prince Heathen 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 adopted and the abbreviation is confusing. Add a standard text link or wrap the infographic in a link.
27. This video shows VoiceOver announcing the various link options.
28. Sharing the infographic link

29. Sharing the infographic Otter mom and pup by mikebaird 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. brs 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) motherwith nursing pup in the Morro Bay harbor
30. Using brs Here I am by alumroot brs allow us to easily embed content from other sites.YouTube’s use of brs has forced blog and other publishing platforms to accept brd content. brs are sandboxes and are not affected by CSS or JS on host page.

31.  The seamless attribute, not fully supported, allows brs to expand to content and inherit styles. brs require a title for accessibility

32. More Options
    • HTML5 contextual menu. The HTML5 menu allows developers to modify the browser’s contextual menu.
    • Display descriptive link on hover/focus
    • Accessible-Longdesc JavaScript takes the longdesc source and makes it navigable by any user.
    • epub:describedAt, aria-describedat
    • Image Description Service: Poet is researching methods to increase image descriptions within e-books
33. Questions I don’t trust you, otter by splityam

Specialized terms for ASL interpreters

The following are non-standard terms used in this presentation.

Travel infographic: MapQuest

Coding terms:

• longdesc
• ARIA
• aria-labelledby
• aria-describedby
• br
• seamless
• attribute
• JavaScript
• CSS
• Search Engine Optimization (SEO)
• Contextual
• describedat

People:

• Mahatma Gandhi
• Jennison Assuncion
• webaxe

Corrections

Thank you to Jared Smith for finding an error in the ARIA examples. I had included the “#” within the attribute values. I’ve removed them and uploaded a new version of the presentation to SlideShare.

Ian Pouncy published his notes from this presentation: Infographics – Making Images Speak.