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