Hi!We’reheretotalkabouttabs,accordions,andaccessibility.MyteamrecentlydevelopedaWordPressthemeforNorthernArizonaUniversity.Thepagetemplatesincludedtabsandaccordions.

1

ThereweretwobighurdlesweneededtopassforoursitetobeacceptedbyNAU–WCAG2.0AAautomatedtesKng,andpracKcalscreenreadertesKng.WebContentAccessibilityGuidelinesdefinehowtomakeWebcontentavailabletopeoplewithabroadrangeofvisualandphysicalabiliKes.WCAGtes)ngwillspotissuesrelatedtothereadabilityoftext,andthepropercap)oningofimagesandmedia.Second—screenreaders.Thereareafew,includingtheMac’sVoiceOver.ButthegoldstandardisJAWS,ascreenreaderforWindowsthat—forourconcerns—funcKonsasabrowserplugin.ThisisthesoSwarethatmany(ifnotmost)ofyourscreen-reader-usingaudienceisusing,andyoursiteneedstobeusableinJAWStobeconsideredscreen-reader-accessible.Andhere’swherewerunintotrouble.It’stotallypossibletopassWCAGtes)ng,ands)llcompletelyfailprac)caltes)nginJAWS.Why?

2

First:hiddencontent.Screenreaderstrytheirbesttoemulatetheintendedexperience.Basically—ifcontentishidden(display:none,visibility:hidden),thescreenreaderwillignoreit.And,asyoucansee,mostofourcontentiscurrentlyhidden.WCAGtesKngtoolswon’tflagyouforthis.

3

Second,theorderofthecontentoftabs.Accordionsareactuallynotthatbad.SemanKcally,whatyouhave—hopefully—isgroupingsofheadersandcontentblocks.Tabspresentagreaterchallenge.Theyhavehiddencontent,andtheassociaKonbetweenlabelsandcontentblocksisremote.Thetabcontrol,strippedtotheskeletonofitspresentaKonlayer,doesnothaveasequenKalrelaKonshipbetweenlabelsandtheircontent.

4

Withregardtoscreenreaders,correctlydiagnosingtheexistenceofissueswasapre_ybigchallenge.Howmanyofusregularlyuseascreenreader,orwouldconsiderourselvesascreen-readerpower-user?[showofhands]Learningtouseascreenreaderishard.Ifyouhaveanin-houseexpert—that’sgreat!Butifyoudon’t,andyou’reunderacrunch,learningtouseascreenreadermaytakemoreKmethanyouhave.

5

Wheredoesthatleaveus?Thereisahugeoverlapbetweentherequirementsforscreenreaderaccessibilityandkeyboardnavigability.IfyoucantabthroughyourenKrepage,you’reinverygoodshapeforscreenreadercompliance.So...Wespentalotof)medoingkeyboardnaviga)ontes)ng.Youdon’tneedtoinstallanyspecialsoSwaretodoit,andthere’snolearningcurve.Asforthescreenreaders—ifyou’renotcomfortableusingascreenreader,Istronglyrecommendyouhireaspecialist.WeworkedwithacompanycalledULTRATesKng,whoassignedusatesterwhospecializesinJAWS.HewrotebrilliantKcketsthatsavedushoursandhours.

6

jQueryUIcomesvery,veryclosetoworking.Andithasafewkeyadvantages.Forone,itwantsyourstarKngpointtobeclean,semanKcHTML.Yourtabscompriseabulletedlistoflinkstocontentregions,andthenthescriptinsertsabunchofstuffintotheDOMaroundit.Theaccordionsareevensimpler—alternaKngheadersanddivs.They’rebothkeyboardnavigable,buttheyfailedourpracKcalscreenreadertesKng.CaliforniaStateUniversityhasawholewebsitededicatedtotheirapproachtoaccessibility,includinglinkstodownloadsthatdescribehowtocreateaccordionsthatpasstheirtesKngcriteria.Nottabs,butitgotusthinkingintherightdirecKon.Bootstrapfallsshort.It’sapopularframeworkandtherearemanyverygoodthingsaboutit.Butitstabsandaccordionsdidn’tpassJAWStesKng.So!Let’stalkaboutsomepracKcalapproachestousingthesecontrolsinaWCAGandscreen-readercompliantenvironment.

7

OneofthereasonsIlovethejQueryUItoolisthatitoffersa“destroy”method.AllofthejQueryUIwrapperstuffgetsdeleted,andyou’releSwiththeHTMLthatyouwroteinthefirstplace.Bulletedlistoflinkstodivs,andsubheadswithcontentblocks.Nohiddencontent.

8

Letyourvisitorssaveapreferencefor“EnhancedUsabilityMode”thatdestroysyourtabsandaccordions,orevenpreventsthetab()oraccordion()methodsfrombeinginvokedinthefirstplace.Everybodywins.Allyourvisitorsgettointeractwithyourcontentthewaytheywantto,andyousavedozensofhoursofdevelopmentKme.It’stotallyaccessible,andfasttoimplement.And,let’skeepinmind–“tab”isavisualmetaphorfortheorganizaKonofchunksofcontent.Ifyourvisitorhasneverseenone,orfindstabbedfoldersdifficulttomanipulateinphysicalspace,whyintheworldwouldyouburnhoursofprogrammingKmetopreservethatmetaphor?Finally…evenwhenyou’vegotthisimplementedandworking,andtheinstrucKonsareclear,yourvisitorswhoarenotmousingaroundthepagearegoingtohavedosomepre_ynimbleKonami-codehopscotchtomovebetweentabs,andfromtabstocontent.I’mjustnotsureit’sworthit.So-destroyingtheelement.It’sanopKon.Andhonestly,it’smyfirstrecommendaKon.But,yourstakeholdersmaydecidethatamoreuniformexperienceisrequired—solet’slookathowweimplementedaccessibletabs.

9

WestartwiththejQueryUItabcontrol,andthenwestartaddinginhelperfeatures.OuridealsoluKonaffordsusspokeninstrucKons,keyboardnavigaKon,andobviousfocusindicaKon.

10

WewrappedtheenKreelementinadivwiththeclass“tab-instrucKons”andplacedaspantagwiththeclass“instrucKons”immediatelyinsideofthat.RememberthatJAWSa_emptstohonorthedisplay/donotdisplayrulesinyourCSS?Apparently,itdoesn’tgetclipping.So,ourspanwithinstrucKonstobespokengetsclippedtosinglepixel.Now,whenyourusertabstoit,anditreceiveskeyboardfocus,thisinstrucKonwillbereadaloudbyourscreenreader.

11

Thenweneedtoaddinsomeextrahandlingbasedonkeyboardinput.jQueryUIhandlestheactualhiding,showing,andstatesevng;butitdoesn’tactuallymovekeyboardfocus,whichisacrucialindicatorofwhereyouareonthepage.Remember—thissoluKonisn’tjustforuserswhogetzerovisualinput.LotsofpeopleacrossawiderangeofmotorabilityandvisualacuityuseassisKvetechnology,andobviouskeyboardfocusisvitalfortheseusers.Speakingof…

12

Obviouskeyboardfocusindica)on.Inmyexperience,somedesignersreallyhateit,butifyouwantanaccessibleexperience,fightforit.GoingbacktoourmodificaKons:

13

InourpracKcaltesKng,keyboardfocusdidn’tmovecorrectlyfromthetabtotheassociatedcontent,andbackagain.OursoluKoninvolvedplacingaclippedH4elementinthecontentpanel,givingitanegaKvetabindex(whichremovesitfromthenaturaltabindexflow),butdoesallowustoprogrammaKcallyforcefocus.Theresultisthatourvisitorfocusesatab,hitstheirspacebar,andtheirfocusissenttotheappropriatecontentpanel.

14

Finally,weneedtoaddressthetabindexofthetabsthemselves.jQueryUI’sdefaultbehavioristosettheinacKvetabs’tabindextonegaKveone;butthisremovesthemfromthedocumentflow.TheysKllperform,butthingsgetweirdwhenyoutrygoingbackwardsthroughthetabs,andperformancegetsreallyinconsistentwhenyoutrytomoveenKrelypastthetabcontrol,andthenbackintoit.Weresolvedthoseinconsistenciesbyforcingthetabstoalwayshaveatabindexofzero,keepingtheminthetabindexflowofthedocument.

15

Accordionsaresimpler.Again,weneedtoappendinstrucKonsandtomanagethetabindexofourcontrols,butbecausethey’realreadysequenKal,theyrequirealotlesshelpercode.

16

Frankly,thisistheeasypart.WediditallwithanAdvancedCustomFieldsRepeater.It’sapre_ysimplesetoffields—aTabLabel,alayoutselector(onecolumnortwo),andoneortwoWYSIWYGeditorsbasedonyourchosenlayout.

17

ThankyousomuchforsKckingaroundforthispresentaKon.IfIhaveaclosingthought,it’sthis:WhatI’vepresentedgotourwebsitepastfuncKonaltesKngattheendof2016.Itisnotperfect.ItisnottheendallbeallsoluKonforhowtocodethismodule.I’vetakentheworkofexcellentdevelopersatCaliforniaStateandthejQueryUIproject,andbuiltonthat.ItismysinceresthopethatoneofyoutakeswhatI’vepresentedontodayandcomesbacknextyearandblowsmeoutofthewater.

18