boise state wordpress web accessibility...

©2012BoiseStateUniversity 1

BoiseStateWordPressWebAccessibilityIni;a;ve

COEN,COBE,SPS,COASSiteAdmins


Today’sSession•  Whatiswebaccessibility?•  Bestprac;cesformakingfuturecontentaccessible

•  Media/PDFs•  AssessingwebaccessibilitywithSiteimprove•  Upcomingchanges&websitegovernance


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


UniversalContent

Wemustreconsiderhowwecreatewebcontenttoensureasmanypeopleaspossiblecanuse

ourwebsites.


WebAccessibilityStandards

WCAGLevel2.0AA

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


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

•  Robust-Reliableforthird-partytechnologies.


WCAG2.0Principles

AgoodwebsiteisaPOURwebsite.


Crea;ngCompliantContent

Images


Crea;ngCompliantContent-Images

AvoidGraphicswithText



Excep;onsforGraphicswithText


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

However,youmustalsoprovideanequivalenttextexperience!



ImagesMustHaveAlterna;veText



Alterna;vetextmustprovidethesameinforma;onastheimageitreplaces.



Avoidanyimages(orothercontent)thatscroll,moveorblink.



HeadingsandStructure


Crea;ngCompliantContent-Headings

UsetheThemeHeadings


Crea;ngCompliantContent-Headings

Correct,structuredHeadingsandcontentcanmakethedifferencebetweenpeoplewithdisabili;esunderstandingyour

website,orleavingit.


HeadingsMustBeSeman&cHeading1isalwaysthePageTitle…


HeadingsMustBeSeman&c…soHeading2mustalwaysbethefirstheading

inthecontentarea.


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)



Instruc;onsandDescrip;ons


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”



Hyperlinks


Crea;ngCompliantContent-Links

Linksmustbecontextual



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.!



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!



Linksmustbeunique


Crea;ngCompliantContent-LinksThesamelinksonapagecannothavedifferent

des;na;ons



Watchoutforduplicatelinksintheheader,lelnav,andfooter…

Also,linkstoBoiseStatewebsitesnowmuststartwithh[ps



Tables


Crea;ngCompliantContent-TablesDon’tuseTablesforlayout

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


Crea;ngCompliantContent-Tables

UseTablePressforTables


SeparateStylefromContent

•  Usetheaward-winningBoiseStatethemestyles

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

SeparateStylefromContent

•  DonotcenterHeadings•  Donotunderlinetext•  Donotuseand(useor)•  Avoid<div>andandtagsinWordPress



Media


Videos

•  Allvideosonyourwebsitemustbecap;onedbeforeFallsemester

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

•  Ifthevideocan’tbecap;oned,createatexttranscript

•  Ideally,youcancreatebothatexttranscriptandcap;onatthesame;me


Videos•  Eventually,you’regoingtoneedtohavebothcap;onsandatexttranscripttomeetcompliance.

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

•  Anyvideosthatarenotcap;onedordon’thaveanalterna;vetexttranscriptbeforeFallsemesterwillberemovedfromyourwebsites


PDFs

•  Nearly100%ofPDFsonBoiseStatewebsitesarenotaccessible

•  AvoidorminimizePDFs•  PDFsarecostlytomakeaccessible•  PDFswithmul;plecolumnsaredifficultforpeoplewithmotordisabili;es


Legi;mateUsesforPDFs

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

•  Providingprintmanuals,contracts,and/orar;clesinformatsyouareunabletoedit


Recommenda;onsforPDFs

•  IfaPDFisofabrochure/poster/complexgraphic,theinforma;onmustbemadeavailableinanaccessibleformat

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

•  IfyoumustuseaPDF,itmustbeaccessible


PDFs

•  TomakeaPDFaccessibleistorepairit•  SiteimproveassessesPDFcompliance•  RepairingPDFsrequiresAdobeAcrobatDC(purchaseonlineviaAdobeCrea;veCloud)

•  Google“AcrobatProDCPDFAccessibilityRepairWorkflow”tolearnhowtorepairPDFs



GoingForward…

Crea;ngCompliantContent•  Separatestylefromcontent•  Allimagesrequiredescrip;vealt-text•  Linksmustbeunique•  Arenewvideosbeingcap;oned?•  Donotunderlinetext•  Donotuseand(useor)•  Avoid<div>andandtagsinWordPress•  UseconsistentHeadingstyles•  Separatenaviga;onfromcontent



Siteimprove


Outcomes

•  AllBoiseStatewebsiteswillcomplywithWCAG2.0AAstandards

•  Mandatoryaccessibilitytrainingwillberequired•  UniversityPolicyforwebaccessibility•  Siteownersareresponsibleforensuringcontentisaccessible

•  OITwillprovisionnewWordPressaccounts•  RemovalofSuperAdminrole


YourRole

•  Developabasicunderstandingofwebaccessibility•  Disseminatethisinforma;ontoyourCollegewebadmins/authors

•  Beawareofcontentonyoursites,andlookforaccessibilityimprovements

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


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


THANKYOU

ShadJessen,AssociateDirectorOfficeofInforma;onTechnologyEmail:[email protected]

boise state wordpress web accessibility...

Documents