Accessibility for Digital Storytelling

1. Accessibility and Storytelling October 26, 2016

2. • 40 minute webinar + 15 minutes for questions and answers • Ask questions through the Zoom Control Panel • Tweet during the webinar with #mStonerNow • Please fill out the post-webinar evaluation • Check your inbox early next week for the webinar recording and slide deck The Plan

3. Voltaire Santos Miran Co-FounderandCEO @vsantosmiran Greg Zguta TechnicalLead @gzguta

4. Accessibility acronyms …. for two books, please.

5. The Question: Whatdoesthe“WCAG”standforinWCAG2.0AA?

6. The Goal Wewantyoutounderstandfactorsinfluencingthe accessibilityofyourdigitalstoriesforreaderswith disabilities,andempoweryousharethebeststories withallofyouraudiences.

7. Agenda 1. Five Components 2. Storytelling in Action 3. Key Issues 4. Fundamentals 5. Questions

8. 1. Visual Design 2. Structured Content 3. Integrated Multimedia 4. Engagement Opportunties 5. Technology Five Components

9. Visual Design • Beautiful interfaces that encourage reading • Thoughtful consideration of layout flexibility in regard to viewport size and content load times • Touch-optimized content interactions • Micro-interactions • Sufficient clear space to allow focus on the text Component 1:

10. Structured Content • Atomic units of information • Metadata and keyword plan to support search engine optimization (SEO) • Tagging and taxonomy • Associated social posts and promotions Component 2:

11. Integrated Media • Photography • Video • Audio • Data visualization (infographics) Component 3:

12. Engagement Opportunities • Calls-to-action (CTA) • Commenting/reader contributions • Ability to share and amplify through social media • Opportunities to follow the story through mobile push alerts and email updates • Subscription opportunities (podcasts, playlists) Component 4:

13. Technology • Content management system (CMS) • Cloud-based collaboration tools • Experimentation capability to optimize content based on audience behavior • Analytics framework Component 5:

14. Frank Rose, “TheArtofImmersion” “Stories themselves are universal. The way we tell them changes with the technology at hand. Every new medium has given rise to a new form of narrative … people want to be immersed.”

15. Storytelling in Action

16. Key Issues

17. 18 56 Million  Americans with disabilities

18. 19 Disabilities You may know: • Visionimpairment • Hearingimpairment • Motordisabilities • Cognitiveimpairment But also consider: • Colorblindness • Lowvision • Dyslexia • Memoryloss • Attentiondisorders • Short-termdisabilityduetoinjuryorillness

19. Why? It is required by law. 20 The Rehabilitation Act of 1973 The Reauthorized Rehabilitation Act of 1998 (a.k.a. Section 508) “... individuals with disabilities who are members of the public seeking information or services from a Federal department or agency to have access to and use of information and data that is comparable to the access to and use of the information and data by such members of the public who are not individuals with disabilities.”

20. 21 Americans with Disabilities Act (1990) *Note:theADAdoesnotprescribehowtonotdiscriminate.Thereisnotechnicalwaytobe“ADAcompliant.” “...prohibits discrimination on the basis of disability by public accommodations and requires places of public accommodation and commercial facilities to be designed, constructed, and altered in compliance with the accessibility standards established by this part.”

21. 22 Section 508 • Undergoinga“refresh”duenow(October2016) • ExpectedtoalignwithWCAG2.0“AA”standards http://www.section508.gov/sites/default/files/access-board-proposed-rule-2015-accessible-final.pdf

22. 23 Web Content Accessibility Guidelines 2.0 (updated 2008) Theinternationalbestpracticestandardsforwebcodeandcontent.WCAG2.0isbased aroundfourprinciplesofaccessibility.ItdescribesWHAT,notHOW. POUR • Perceivable • Operable • Understandable • Robust https://www.w3.org/TR/WCAG20/

23. 24 WCAG 2.0 • Level A:AWebcontentdevelopermustsatisfythischeckpoint.Otherwise,oneormoregroups willfinditimpossibletoaccessinformationinthedocument.Satisfyingthischeckpointisabasic requirementforsomegroupstobeabletouseWebdocuments. • Level AA:AWebcontentdevelopershouldsatisfythischeckpoint.Otherwise,oneormore groupswillfinditdifficulttoaccessinformationinthedocument.Satisfyingthischeckpointwill removesignificantbarrierstoaccessingWebdocuments. • Level AAA:AWebcontentdevelopermayaddressthischeckpoint.Otherwise,oneormore groupswillfinditsomewhatdifficulttoaccessinformationinthedocument.Satisfyingthis checkpointwillimproveaccesstoWebdocuments.

24. Katie Sherwin, UserExperienceSpecialist,NielsenNormanGroup “Compliance with accessibility guidelines is not the end goal: usability is.”

25. Design 1 Text Size LinksColors 2 3 26

26. 27 Color Contrast • WCAGguidelinesspecifycontrastratiosfortext • Useacolorcontrastcheckertoverifydesigns • http://webaim.org/resources/contrastchecker • https://www.paciellogroup.com/resources/contrastanalyser • Considertextsizealongwithcolor • Bemindfuloftextplacedoverimages • Useoverlaystoincreaseopacityofallorportionsofimages • Bluroruseothertechniquestoensuretextisreadable • Considerimageselectionandwhencontenteditorsmayselectimageswithtextoverthem Examplefrom:http://storytelling.voxmedia.com/2016/8/23/12556848/accessibility-presentation-design-engineering

27. 28

28. 29 Color Indications • Ensureallinformationconveyedwithcolorisavailablewithoutcolor • Consideradditionalcuessuchasshape,linetexture,size,orlabel • Reduceinformationdensity • Testusinggrayscalemonitor

29. 30 Links • Don’tusecoloralonetodistinguishlinksunlessthereissufficientcontrast betweenthelinktextandsurroundingtext • Provideanalternatestateforlinksusingavisualchange(underlineorhighlight)for amousehoverorkeyboardfocus • Usehidden“skipnavigation”linkforheadersandgroupsoflinks • Avoidjavascriptlinksthatdon’tworkinscreenreaders

30. Code 1 Content areas ValidationText alternatives 2 3 31

31. 32 Form and table labeling • Formsareacommonsourceofeasilycorrectable HTMLerrors • UseLABELtagstodescribefields • UseFIELDSETtagstogroupfieldssuchasradio buttonstogether • Settaborderforfieldswhennecessarytoaidkeyboard navigation • HTMLtablesshouldhaveheadingsandcaptions • Breakupcomplextablesintomultipletables Examplefrom:http://accessibility.psu.edu/tableshtml/

32. 33 HTML5 and ARIA Landmarks HTML5andARIALandmarkRolesprovidecontextforscreen readerstounderstandtheprimarycontentareasofapage andmakethemmoreusable. • UsesemanticHTML5tagswhenpossibletodefinecontext • AddROLEattributetoelementswithinHTMLwhen HTML5tagsarenotpresent(usuallyDIVtags) https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html

33. 34 Navigation • Properhierarchicalheadingstructureaidsscreenreadernavigationwithinpages • Useofalttagsoniconsassociatedwithnavigationiscritical • SkipnavigationlinksarenecessaryofHTML5orARIArolesarenotused • Maintainconsistencyofnavigationelementsinpresence,appearance,andorder • Payattentiontodropdownmenufunctiononscreenreadersandusingkeyboard navigation • Ensureobviouskeyboardfocushighlightforelements

34. 35 Automated Validation Tools AutomatedtoolvalidationDOESNOTmeanapageisaccessible! • HTMLvalidationtoolscanverifyHTMLsyntaxandthepresenceofrequiredelements • Differentvalidationtoolsproducedifferentresults • Onlyaportionofaccessibilityconcernscanbecaughtbyanautomatedtestingtool • Alttagsmayexist,butaretheyinformativeandaccurate? • Richmediasuchasvideo,docaptionsexist? • Doesformvalidationcomply? • Canavisitornavigateviaakeyboard? Manycontentissuesaredifficultforanautomatedtooltodetect.

35. Content 1 Click here! Navigation and headingsRich media 2 3 36

36. 37 Audio and Video Content • Providecaptionsforvideo • Offer text transcriptsforaudioandvideo • Describe visualswithinvideointextonthe page. • Ensureaudioandvideoplayersfunction usingkeyboard navigation

37. 38 Infographics Visitorswithdisabilitiesneedawaytoconsumetheinformationinaninfographic. Generally,thismeans: • Considerationofcolor contrastwhencreatingimageorSVGinfographics. • Providetext alternatives for content.Thismayrangefromasentenceortwoto severalparagraphsofdescriptionaboutthecontent. • Whencreatinginfographicsincode(HTML/CSS),followaccessibility guidelines for HTMLcodeasyouwouldforregularwebpages.Thisincludeskeyboardaccess andtextalternativesforscreenreaders.

38. Accessibility

39. 40 Click here, read more • Ensureeachlinkisdistinguishablebythelinktextandsurroundingcontext • AvoidaURLaloneasthelinktext • Avoidextremelylongorextremelyshortlinktext • ImagesorSVGiconswithinlinksshouldhaveanchortext • Avoidchangesthatdon’trequireuserinput(autoplaymedia,carousels)

40. Example • No“clickhere”

41. 42 Headings • Usesemanticmarkup(H1-H6tags)for pageheadings • UseH1-H6headingsinhierarchicalorder onpages • Avoidheadingsinsidebarsandspecial featuresthatarenotpartofthetypical readingorderforthepage • Tooltoviewheadinghierarchy:  https://gsnedders.html5.org/outliner/

42. Experience 1 Screen readers Testing toolsKeyboard navigation 2 3 43

43. 44 Keyboard navigation • Criticalformanytypesofvisitors • Automatedvalidationtoolscan’ttestforusabilitywithakeyboard • Ensurevisitorscanaccessallelementsusingkeyboardalone • Allowelementstoshowfocuswhentheyareselected • Youmayneedtoadjustkeyboardsettingstoallowthekeyboardto access“allelements”onyourcomputertotest

44. 45 Screen reader usability • Justlikewebbrowsers,allscreenreadersdonotinterpretHTMLthesameway • Screenreadersalsohavesupportedbrowsers • Usabilitytestingwithuserswhousescreenreadersisagreatwaytotest http://webaim.org/articles/screenreader_testing/

45. 46 Tools • WAVEbyWebAIM:http://wave.webaim.org/ • WAVEColorContrastChecker:http://webaim.org/resources/contrastchecker • WAVEWCAG2.0Checklist:http://webaim.org/standards/wcag/checklist • WAVESection508Checklist:http://webaim.org/standards/508/checklist • SortSitebyPowerMapper:http://www.powermapper.com/products/sortsite • AdobeAcrobatPro(PDFs):https://acrobat.adobe.com/us/en/products/acrobat-pro.html • AChecker:http://achecker.ca/checker/index.php • Anothergreatcontrasttool:http://leaverou.github.io/contrast-ratio/

46. Our Storytelling Series Team Ben Conley Visual/UXDesigner   ben.conley@mstoner.com Abby McLean Visual/UXDesigner   abby.mclean@mstoner.com Fran Zablocki InformationArchitect   fran.zablocki@mstoner.com Soni Oliver Visual/UXDesigner   soni.oliver@mstoner.com Joel Pattison DirectorofStrategy   joel.pattison@mstoner.com Greg Zguta Technologist   greg.zguta@mstoner.com

47. Voltaire Santos Miran ChiefExecutive Officer   @vsantosmiran 312.420.6778 voltaire.miran@mstoner.com Mallory Wood DirectorofMarketing   @mallorywood 802.457.9234 mallory.wood@mstoner.com  Resources • Download:   Visual Design for Storytelling http://mstnr.me/ VisualDesignStorytelling • Register:   Structure and Content: Helping You Live Your Brand Promise   http://mstnr.me/ LiveYourBrandPromise Greg Zguta TechnicalLead @gzguta 314.884.1803 greg.zguta@mstoner.com

48. Questions & Answers

49. m storytellers, experience crafters, brand builders