Jeremy Bock Web Developer About me Web Developer for 8 years Worked at the CED for last 5 focusing on Web Accessibility Led task force to define WVU Web Accessibility requirements Coauthor of a white paper Monitoring ID: 614841
Download Presentation The PPT/PDF document "Web Accessibility Overview" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Web Accessibility Overview
Jeremy Bock
Web DeveloperSlide2
About meWeb Developer for 8 years
Worked at the CED for last 5 focusing on Web AccessibilityLed task force to define WVU Web Accessibility requirementsCo-author of a white paper: “Monitoring for Accessibility and University Websites” in 2013Slide3
Session Goal
Increase awareness of web accessibility standards and practicesSlide4
Session ObjectivesDefine web accessibility and why it’s important
Consider different disabilities, the obstacles they create and solutions to overcome those obstacles.Provide resources for creating accessible Math formulasProvide tools and resources for accessible web developmentAnswer questions pertaining to web accessibilitySlide5
What is web accessibility?
Web accessibility is about people. Successful web accessibility is about anticipating the different needs of all sorts of people, understanding your fellow web users and the different ways they consume information, empathizing with them and their sense of what is convenient and what frustratingly unnecessary barriers you could help them to avoid.
–
Accessibility APIS: A Key to Web Accessibility By Leonie Watson &
Chaals
McCathie
NevileSlide6
Why do we care?
It’s the law. Section 508In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.
Americans with Disabilities Act (1990)
Title II
, which states that communications with persons with disabilities must be "as effective as communications with
others” and
Title III
, which deals with public accommodation of people with
disabilities.
Section 255 of Telecommunications ActSlide7
Why do we care?
Louisiana Tech (2013)University of Montana (2012) Florida State
(
2012
)
Northwestern (2011)
New
York University (2011
)
Penn State (2010
)
Arizona State (2009)
We can get sued like:
*http://
blog.lib.umn.edu
/
itsshelp
/news/2013/10/higher-
ed
-accessibility-
lawsuits.htmlSlide8
Why do we care?
We are educators.We can broaden audience.Slide9
How do we do it?
Section 508 Guidelines?Eh… Kind of?Some of it is still usefulSection 508 came about in 1998The guidelines are old<table> layout oldSection 508 Refresh is coming!Slide10
How do we do it?Universal Design for Learning (UDL)
: design of instruction to be usable for all students without the need for adaptation or specialized design.WCAG 2.0: a formal set of guidelines for developing accessible web content, made by the W3C’s Web Accessibility Initiative (WAI)
WAI
-
ARIA
: suite that
especially helps with dynamic content and advanced user interface controls developed with
AJAX,
HTML, JavaScript,
JS Frameworks and
related
technologiesSlide11
Considering Color Blindness
About 8% of the male population (compared to 0.5% of females) has some sort of color blindness http://empat.io/timSlide12
ConsideringColor BlindnessConsider contrast when it comes to foreground and backgrounds
(max(R1, R2) - min(R1, R2)) +
(max
(G
1
,
G
2
) - min
(G
1
,
G
2
)) + (max(B1, B2) - min(B1, B2)) >= 500Slide13
Considering Color BlindnessSlide14
ConsideringColor BlindnessAvoid using color as a sole communicator of information
If you have to communicate with color, provide alternate formats like a text descriptionGraphs – be explicit with keys https://developers.google.com/chart/?csw=1Slide15
Considering Visual Disabilities
Total (all ages): 6,670,300Total (16 to 75+): 6,211,700
Women: 3,411,000
Men: 2,800,700
Age 18 to 64: 3,412,900
Age 65 and older:
2,724,600
-
Cornell University's Employment and Disability Institute
(2012)Slide16
Considering Low Vision
Use relative font sizesAllow for the functionality of increasing the size of your fontsConsider font resizing widgets Text+ Text-Don’t disable pinch zoom functionalitySlide17
Considering Blindness
Screen readersFreedom Scientific’s JAWSGW Micro Window-EyesApple Voiceover (native on all iDevices)
Android Talk Back
Refreshable Braille display
http://
empat.io
/
arendSlide18
Considering Blindness
Begins with intentAvoid flooding your pages with too much informationSpecify the “lang” attribute your html tagDon’t automatically play anything with audio on the page loadSlide19
Considering Blindness
Consider your navigationKeyboard accessibleSource order matches reading ordertabindex html attributeProvide “skip links”Slide20
Considering Blindness
<section> the content source into logical reading orderUse proper <h*> tags don’t use them in place of CSS<h1> has some
reseblence
<title>
<h1>…<h2>…<h3>
Use role, aria-label and aria-
labelledby
attributes when not using semantic HTML5Slide21
Considering Blindess
<ul role=
"
menubar
"
>
<
!-- Rule 2A: "File" label via aria-
labelledby
-->
<
li role=
"
menuitem
"
aria-
haspopup
=
"true"
aria-
labelledby
=
"
fileLabel
"
>
<
span id=
"
fileLabel
"
>
File
</span>
<
ul
role=
"menu"
>
<
!-- Rule 2C: "New" label via
Namefrom:contents
-->
<
li role=
"
menuitem
"
>
New
</li>
<
li role=
"
menuitem
"
>
Open…
</li>
…
<
/
ul
>
<
/li
>
…
<
/
ul
>Slide22
Considering Blindness
Consider the intent of images on your pagesDo they convey information?Purely decorative?“alt” HTML attribute for <img />
Background images that convey information should have text equivalentSlide23
Considering Hearing Disabilities
Provide text alternatives to audio contentTranscriptsClosed Captioning for videosConsider positioning16pt font with high contrastYouTube CaptioningMagPieSlide24
Considering Mobility/Dexterity Disabilities
Unable to use a mouseCompensate with Assistive TechnologySlide25
Considering Mobility/dexterity Disabilities
One hand keyboardEye TrackingSlide26
Considering Mobility/Dexterity Disabilities
Mouth StickPuff and Sip DeviceSlide27
Considering Mobility/Dexterity Disabilities
Web pages and applications need to be keyboard accessibleSource order is reading orderProvide Visual cuesWhen you use “hover” use “focus” as wellConsider contrast for color blindnessTest it manuallyhttp://webstandards.wvu.eduSlide28
Considering Vestibular Disabilities
Vestibular system is comprised of pieces of the nervous system and the inner earSymptoms are dizziness, feelings of vertigo, imbalance, vision/hearing impairmentSlide29
Considering Vestibular Disabilities
Avoid creating visual noiseAnimation (if used) should be smooth and the focus of the contentNo moving pieces peripheral of the contentBackground videoProvide controls to stop the videoAvoid overlaying any widgets on top of the videoSlide30
Accessible Math
Word and PDF are not screen reader friendly when creating math formulasPlain text is fine for simple formulas: (2a+3b) = xHigh resolution (SVG) images with simple alt textMore complex formulas use: MathML and
MathJax
Slide31
Accessible MathSlide32
<math
> <mrow>
<
mi
>
x
</
mi
><
mo
>
=
</
mo
>
<
mfrac
>
<
mrow
>
<
mo
>
−
</
mo
><
mi
>
b
</
mi
><
mo
>
±
</
mo
>
<
msqrt
>
<
mrow
>
<
msup
>
<
mi
>
b
</
mi
><
mn
>
2
</
mn
>
</
msup
>
<
mo
>
−
</
mo
><
mn
>
4
</
mn
><
mi
>
a
</
mi
><
mi
>
c
</
mi
>
</
mrow
>
</
msqrt
>
</
mrow
>
<
mrow
>
<
mn
>
2
</
mn
><
mi
>
a
</
mi
>
</
mrow
>
</
mfrac
>
</
mrow
>
</
math
>Slide33
Tools and resourcesa11yproject.comFree QA Software
Screen ReadersBooksBlogsGuidelinesTutorialsSlide34
Tools and resources
webaim.orgWAVEServicesTrainingSurveys
Other ToolsSlide35
Tools and resourcestenon.io
Karl GrovesTests for Section 508 and WCAG 2.0 complianceRobust API works with all server side languagesWorks with Gulp and Grunt task runnersSlide36
Tools and resources#a11y@
karlgroves@pauljadam@feather@jfc3@marcysutton@jbockcetSlide37
Tools and resources
webstandards.wvu.edujmbock@hsc.wvu.eduSlide38
For more Information
304-293-4692www.cedwvu.org
Providing leadership in the development of services and supports for persons with disabilities.Slide39
ReferencesWatson, L., and McCathie
Nevile, C., (2015, March 16th). Accessibility APIS: A Key To Web Accessibility. Retrieved from http://www.smashingmagazine.com WebAIM. (2007). Web accessibility in mind. Retrieved from http://webaim.org
/
University of Minnesota Duluth.( 2013, October 23
rd
).
Higher Ed Accessibility Lawsuits
. Retrieved from http://
blog.lib.umn.edu
/
Colblindor
. (2006, April 28
th
). Colorblind Population. Retrieved from http://color-blindness.com World Wide Web Consortium, W3C. (2007). Introduction to web accessibility. Retrieved from http://www.w3.org/WAI/intro/accessibility.php Slide40
ReferencesWorld Wide Web Consortium, W3C. (2008).
Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved from http://www.w3.org/TR/2008/RECWCAG20-20081211 Section 508. (n. d.). Section 508.gov: Opening doors to IT. Retrieved from http://www.section508.gov Center for Excellence in Disabilities. (2011). Higher education access: On-site training manual. Morgantown, WV. Retrieved from http://
wvats.cedwvu.org
/
National Federation of the Blind. (2012).
Blindness Statistics
. Retrieved from http://
nfb.org
/blindness-statistics
Vestibular Disorders Association. (2015).
About Vestibular Disorders
. Retrieved from http://
vestibular.org
/understanding-vestibular-disorder Averitt, CB., Bahram, S., and MacDonald D. (2015). Enabling math on the Web, in Word & PDF, emerging solutions & overcoming issues. Retrieved from http://davidmacd.com/mathml/making-math-accessible-CSUN-2015L.pdf