Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility for Digital Storytelling

835 views

Published on

Download this webinar for free: http://mstnr.me/2hDaQwW

One of the greatest benefits of digital storytelling is the ability to create an immersive experience for your audiences. Beautiful images, exciting and inspirational videos, motion and microinteractions, and audio all work together to bring a story alive. How do we create a captivating experience for people who are using screen readers and other assistive devices? Join us for this webinar to learn more about accessibility and storytelling.

What You Will Learn

• Accessibility requirements you must consider
• Challenges and solutions for creating accessible digital stories
• Tools, techniques, and best practices for accessible design and multimedia

Published in: Education
  • Be the first to comment

Accessibility for Digital Storytelling

  1. 1. Accessibility and Storytelling October 26, 2016
  2. 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. 3. Voltaire Santos Miran Co-FounderandCEO @vsantosmiran Greg Zguta TechnicalLead @gzguta
  4. 4. Accessibility acronyms …. for two books, please.
  5. 5. The Question: Whatdoesthe“WCAG”standforinWCAG2.0AA?
  6. 6. The Goal Wewantyoutounderstandfactorsinfluencingthe accessibilityofyourdigitalstoriesforreaderswith disabilities,andempoweryousharethebeststories withallofyouraudiences.
  7. 7. Agenda 1. Five Components 2. Storytelling in Action 3. Key Issues 4. Fundamentals 5. Questions
  8. 8. 1. Visual Design 2. Structured Content 3. Integrated Multimedia 4. Engagement Opportunties 5. Technology Five Components
  9. 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. 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. 11. Integrated Media • Photography • Video • Audio • Data visualization (infographics) Component 3:
  12. 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. 13. Technology • Content management system (CMS) • Cloud-based collaboration tools • Experimentation capability to optimize content based on audience behavior • Analytics framework Component 5:
  14. 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. 15. Storytelling in Action
  16. 16. Key Issues
  17. 17. 18 56 Million
 Americans with disabilities
  18. 18. 19 Disabilities You may know: • Visionimpairment • Hearingimpairment • Motordisabilities • Cognitiveimpairment But also consider: • Colorblindness • Lowvision • Dyslexia • Memoryloss • Attentiondisorders • Short-termdisabilityduetoinjuryorillness
  19. 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. 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. 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. 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. 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. 24. Katie Sherwin, UserExperienceSpecialist,NielsenNormanGroup “Compliance with accessibility guidelines is not the end goal: usability is.”
  25. 25. Design 1 Text Size LinksColors 2 3 26
  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. 27. 28
  28. 28. 29 Color Indications • Ensureallinformationconveyedwithcolorisavailablewithoutcolor • Consideradditionalcuessuchasshape,linetexture,size,orlabel • Reduceinformationdensity • Testusinggrayscalemonitor
  29. 29. 30 Links • Don’tusecoloralonetodistinguishlinksunlessthereissufficientcontrast betweenthelinktextandsurroundingtext • Provideanalternatestateforlinksusingavisualchange(underlineorhighlight)for amousehoverorkeyboardfocus • Usehidden“skipnavigation”linkforheadersandgroupsoflinks • Avoidjavascriptlinksthatdon’tworkinscreenreaders
  30. 30. Code 1 Content areas ValidationText alternatives 2 3 31
  31. 31. 32 Form and table labeling • Formsareacommonsourceofeasilycorrectable HTMLerrors • UseLABELtagstodescribefields • UseFIELDSETtagstogroupfieldssuchasradio buttonstogether • Settaborderforfieldswhennecessarytoaidkeyboard navigation • HTMLtablesshouldhaveheadingsandcaptions • Breakupcomplextablesintomultipletables Examplefrom:http://accessibility.psu.edu/tableshtml/
  32. 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. 33. 34 Navigation • Properhierarchicalheadingstructureaidsscreenreadernavigationwithinpages • Useofalttagsoniconsassociatedwithnavigationiscritical • SkipnavigationlinksarenecessaryofHTML5orARIArolesarenotused • Maintainconsistencyofnavigationelementsinpresence,appearance,andorder • Payattentiontodropdownmenufunctiononscreenreadersandusingkeyboard navigation • Ensureobviouskeyboardfocushighlightforelements
  34. 34. 35 Automated Validation Tools AutomatedtoolvalidationDOESNOTmeanapageisaccessible! • HTMLvalidationtoolscanverifyHTMLsyntaxandthepresenceofrequiredelements • Differentvalidationtoolsproducedifferentresults • Onlyaportionofaccessibilityconcernscanbecaughtbyanautomatedtestingtool • Alttagsmayexist,butaretheyinformativeandaccurate? • Richmediasuchasvideo,docaptionsexist? • Doesformvalidationcomply? • Canavisitornavigateviaakeyboard? Manycontentissuesaredifficultforanautomatedtooltodetect.
  35. 35. Content 1 Click here! Navigation and headingsRich media 2 3 36
  36. 36. 37 Audio and Video Content • Providecaptionsforvideo • Offer text transcriptsforaudioandvideo • Describe visualswithinvideointextonthe page. • Ensureaudioandvideoplayersfunction usingkeyboard navigation
  37. 37. 38 Infographics Visitorswithdisabilitiesneedawaytoconsumetheinformationinaninfographic. Generally,thismeans: • Considerationofcolor contrastwhencreatingimageorSVGinfographics. • Providetext alternatives for content.Thismayrangefromasentenceortwoto severalparagraphsofdescriptionaboutthecontent. • Whencreatinginfographicsincode(HTML/CSS),followaccessibility guidelines for HTMLcodeasyouwouldforregularwebpages.Thisincludeskeyboardaccess andtextalternativesforscreenreaders.
  38. 38. Accessibility
  39. 39. 40 Click here, read more • Ensureeachlinkisdistinguishablebythelinktextandsurroundingcontext • AvoidaURLaloneasthelinktext • Avoidextremelylongorextremelyshortlinktext • ImagesorSVGiconswithinlinksshouldhaveanchortext • Avoidchangesthatdon’trequireuserinput(autoplaymedia,carousels)
  40. 40. Example • No“clickhere”
  41. 41. 42 Headings • Usesemanticmarkup(H1-H6tags)for pageheadings • UseH1-H6headingsinhierarchicalorder onpages • Avoidheadingsinsidebarsandspecial featuresthatarenotpartofthetypical readingorderforthepage • Tooltoviewheadinghierarchy:
 https://gsnedders.html5.org/outliner/
  42. 42. Experience 1 Screen readers Testing toolsKeyboard navigation 2 3 43
  43. 43. 44 Keyboard navigation • Criticalformanytypesofvisitors • Automatedvalidationtoolscan’ttestforusabilitywithakeyboard • Ensurevisitorscanaccessallelementsusingkeyboardalone • Allowelementstoshowfocuswhentheyareselected • Youmayneedtoadjustkeyboardsettingstoallowthekeyboardto access“allelements”onyourcomputertotest
  44. 44. 45 Screen reader usability • Justlikewebbrowsers,allscreenreadersdonotinterpretHTMLthesameway • Screenreadersalsohavesupportedbrowsers • Usabilitytestingwithuserswhousescreenreadersisagreatwaytotest http://webaim.org/articles/screenreader_testing/
  45. 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. 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. 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. 48. Questions & Answers
  49. 49. m storytellers, experience crafters, brand builders

×