boise state wordpress web accessibility...

©2012BoiseStateUniversity 1

BoiseStateWordPressWebAccessibilityIni;a;ve

COEN,COBE,SPS,COASSiteAdmins

©2016BoiseStateUniversity 2

Today’sSession•  Whatiswebaccessibility?•  Bestprac;cesformakingfuturecontentaccessible

•  Media/PDFs•  AssessingwebaccessibilitywithSiteimprove•  Upcomingchanges&websitegovernance

©2016BoiseStateUniversity 3

©2016BoiseStateUniversity 4

©2016BoiseStateUniversity 5

WebAccessibilityIssues•  Sightdisability-e.g.,blind,par;ally-sighted,orcolorblind

•  Hearingdisability-e.g.,deaf,orhardofhearing•  Motordisability-e.g.,problemswithmotorskills,orslowmovement

•  Cogni4vedisability-e.g.,learningdifficul;es,orproblemswithconcentra;onorreading

©2016BoiseStateUniversity 6

UniversalContent

Wemustreconsiderhowwecreatewebcontenttoensureasmanypeopleaspossiblecanuse

ourwebsites.

©2016BoiseStateUniversity 7

WebAccessibilityStandards

WCAGLevel2.0AA

h[p://www.w3.org/WAI/WCAG20/quickref/

©2016BoiseStateUniversity 8

WCAG2.0Principles•  Perceivable-Sight,soundandtouch.•  Operable-Ac;onstakenduringbrowsing.•  Understandable-Clearterms,explana;ons,andinstruc;ons.

•  Robust-Reliableforthird-partytechnologies.

©2016BoiseStateUniversity 9

WCAG2.0Principles

AgoodwebsiteisaPOURwebsite.

©2016BoiseStateUniversity 10

Crea;ngCompliantContent

Images

©2016BoiseStateUniversity 11

Crea;ngCompliantContent-Images

AvoidGraphicswithText

©2016BoiseStateUniversity 12

Crea;ngCompliantContent-Images

Excep;onsforGraphicswithText

©2016BoiseStateUniversity 13

Excep;onsforGraphicswithText•  Charts•  Screencapturesfordocumenta;on•  Flowcharts/Infographics/Diagrams•  Maps•  MathExpressions/MusicNota;on/WorldLanguages

However,youmustalsoprovideanequivalenttextexperience!

©2016BoiseStateUniversity 14

Crea;ngCompliantContent-Images

ImagesMustHaveAlterna;veText

©2016BoiseStateUniversity 15

Crea;ngCompliantContent-Images

Alterna;vetextmustprovidethesameinforma;onastheimageitreplaces.

©2016BoiseStateUniversity 16

Crea;ngCompliantContent-Images

Avoidanyimages(orothercontent)thatscroll,moveorblink.

©2016BoiseStateUniversity 17

Crea;ngCompliantContent

HeadingsandStructure

©2016BoiseStateUniversity 18

Crea;ngCompliantContent-Headings

UsetheThemeHeadings

©2016BoiseStateUniversity 19

Crea;ngCompliantContent-Headings

Correct,structuredHeadingsandcontentcanmakethedifferencebetweenpeoplewithdisabili;esunderstandingyour

website,orleavingit.

©2016BoiseStateUniversity 20

HeadingsMustBeSeman&cHeading1isalwaysthePageTitle…

©2016BoiseStateUniversity 21

HeadingsMustBeSeman&c…soHeading2mustalwaysbethefirstheading

inthecontentarea.

©2016BoiseStateUniversity 22

HeadingsMustBeSeman&c•  Heading3mustbeasub-headingofHeading2(andsoon…)•  Skippingthisseman;corderisanaccessibilityviola;on•  Don’tbold,underlineoritalicizeHeadings•  DonothyperlinkHeadings•  Someassis;vedevicesseeHeading4aslessimportantthanHeading2…

•  …soconsiderHeadingsasstructure,notaesthe;cs(e.g.,“Idon’tlikethewayHeading2looks,soIuseHeading4instead”isavisuallyaesthe;copinionwhichnegatestheen;reissueofwebaccessibility)

©2016BoiseStateUniversity 23

Crea;ngCompliantContent

Instruc;onsandDescrip;ons

©2016BoiseStateUniversity 24

Instruc;onsandDescrip;ons

•  Donotlimitinstruc;onsordescrip;onstovisualcues

•  Someusersdon’tknow“right,”“lel,”“bo[om,”or“top”

•  E.g.,“Clickthe‘Submit’bu[on”ismuchbe[erthan“Clickthebu[onatthebo[omofthepage”

©2016BoiseStateUniversity 25

Crea;ngCompliantContent

Hyperlinks

©2016BoiseStateUniversity 26

Crea;ngCompliantContent-Links

Linksmustbecontextual

©2016BoiseStateUniversity 27

Crea;ngCompliantContent-Links

Incorrect

According to the “Best Education School Rankings” from the 2017 U.S. News and World Report, Boise State University’s College of Education is ranked in the Top 75. !!Click here to view the report.!

©2016BoiseStateUniversity 28

Crea;ngCompliantContent-Links

Correct

According to the “Best Education School Rankings” from the 2017 U.S. News and World Report, Boise State University’s College of Education is ranked in the Top 75. !!View the “Best Education School Rankings” report!

©2016BoiseStateUniversity 29

Crea;ngCompliantContent-Links

Linksmustbeunique

©2016BoiseStateUniversity 30

Crea;ngCompliantContent-LinksThesamelinksonapagecannothavedifferent

des;na;ons

©2016BoiseStateUniversity 31

Crea;ngCompliantContent-Links

Watchoutforduplicatelinksintheheader,lelnav,andfooter…

Also,linkstoBoiseStatewebsitesnowmuststartwithh[ps

©2016BoiseStateUniversity 32

Crea;ngCompliantContent-Links

©2016BoiseStateUniversity 33

Crea;ngCompliantContent

Tables

©2016BoiseStateUniversity 34

Crea;ngCompliantContent-TablesDon’tuseTablesforlayout

Tables for are tabular data. Want columns? !Use column shortcodes (see webguide.boisestate.edu to learn how).!

©2016BoiseStateUniversity 35

Crea;ngCompliantContent-Tables

UseTablePressforTables

©2016BoiseStateUniversity 36

SeparateStylefromContent

•  Usetheaward-winningBoiseStatethemestyles

•  Wanttodomore?Useshortcodes•  WhencopyingfromMicrosolWordorotherwebsites,use“PasteasText”topastecontent

©2016BoiseStateUniversity 37

SeparateStylefromContent

•  DonotcenterHeadings•  Donotunderlinetext•  Donotuse<b>and<i>(use<strong>or<em>)•  Avoid<div>and<span>and<p>tagsinWordPress

©2016BoiseStateUniversity 38

Crea;ngCompliantContent

Media

©2016BoiseStateUniversity 39

Videos

•  Allvideosonyourwebsitemustbecap;onedbeforeFallsemester

•  YouTubehasaneasycap;oningsystem(seeh[ps://support.google.com/youtube/answer/2734796?hl=en)

•  Ifthevideocan’tbecap;oned,createatexttranscript

•  Ideally,youcancreatebothatexttranscriptandcap;onatthesame;me

©2016BoiseStateUniversity 40

Videos•  Eventually,you’regoingtoneedtohavebothcap;onsandatexttranscripttomeetcompliance.

•  Later,you’regoingtohavetohaveanaudio-descrip;vetrackforvideosrequiringcontextualdescrip;ons

•  Anyvideosthatarenotcap;onedordon’thaveanalterna;vetexttranscriptbeforeFallsemesterwillberemovedfromyourwebsites

©2016BoiseStateUniversity 41

PDFs

•  Nearly100%ofPDFsonBoiseStatewebsitesarenotaccessible

•  AvoidorminimizePDFs•  PDFsarecostlytomakeaccessible•  PDFswithmul;plecolumnsaredifficultforpeoplewithmotordisabili;es

©2016BoiseStateUniversity 42

Legi;mateUsesforPDFs

•  Materialusingtechnicalfontsand/orspecializedcharacters(musicnota;on,math,worldlanguages)

•  Providingprintmanuals,contracts,and/orar;clesinformatsyouareunabletoedit

©2016BoiseStateUniversity 43

Recommenda;onsforPDFs

•  IfaPDFisofabrochure/poster/complexgraphic,theinforma;onmustbemadeavailableinanaccessibleformat

•  EnsurealinktoaPDFclearlyindicatesthefiletype(e.g.,“UserGuide(PDF)”)

•  IfyoumustuseaPDF,itmustbeaccessible

©2016BoiseStateUniversity 44

PDFs

•  TomakeaPDFaccessibleistorepairit•  SiteimproveassessesPDFcompliance•  RepairingPDFsrequiresAdobeAcrobatDC(purchaseonlineviaAdobeCrea;veCloud)

•  Google“AcrobatProDCPDFAccessibilityRepairWorkflow”tolearnhowtorepairPDFs

©2016BoiseStateUniversity 45

Crea;ngCompliantContent

GoingForward…

©2016BoiseStateUniversity 46

Crea;ngCompliantContent•  Separatestylefromcontent•  Allimagesrequiredescrip;vealt-text•  Linksmustbeunique•  Arenewvideosbeingcap;oned?•  Donotunderlinetext•  Donotuse<b>and<i>(use<strong>or<em>)•  Avoid<div>and<span>and<p>tagsinWordPress•  UseconsistentHeadingstyles•  Separatenaviga;onfromcontent

©2016BoiseStateUniversity 47

Crea;ngCompliantContent

Siteimprove

©2016BoiseStateUniversity 48

Outcomes

•  AllBoiseStatewebsiteswillcomplywithWCAG2.0AAstandards

•  Mandatoryaccessibilitytrainingwillberequired•  UniversityPolicyforwebaccessibility•  Siteownersareresponsibleforensuringcontentisaccessible

•  OITwillprovisionnewWordPressaccounts•  RemovalofSuperAdminrole

©2016BoiseStateUniversity 49

YourRole

•  Developabasicunderstandingofwebaccessibility•  Disseminatethisinforma;ontoyourCollegewebadmins/authors

•  Beawareofcontentonyoursites,andlookforaccessibilityimprovements

•  AssistWordPressSupportandCommunica;ons&Marke;ngtopriori;zeremedia;on

©2016BoiseStateUniversity 50

Resources•  WCAG2.0QuickReference-h[p://www.w3.org/WAI/WCAG20/quickref/

•  Siteimprove:TheMust-HaveAccessibilityHandbook(PDF)•  WebGuide-webguide.boisestate.edu•  PennState-accessibility.psu.edu/blockers•  AdobePDFAccessibility-h[p://www.adobe.com/accessibility/products/

•  OITWordPressSupportandCommunica;ons&Marke;ng

©2016BoiseStateUniversity 51

THANKYOU

ShadJessen,AssociateDirectorOfficeofInforma;onTechnologyEmail:sjessen@boisestate.edu