Web Accessibility Overview
Jeremy Bock
Web Developer
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
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
• Co-author of a white paper: “Monitoring for
Accessibility and University Websites” in 2013
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Session Goal
Increase awareness of web accessibility
standards and practices
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Session Objectives
• Define 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
formulas
• Provide tools and resources for accessible web
development
• Answer questions pertaining to web accessibility
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
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 Nevile
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Why do we care?
It’s the law.
•
•
•
Section 508
– In 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 Act
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Why do we care?
We can get sued like:
•
Louisiana Tech (2013)
•
New York University (2011)
•
University of Montana (2012)
•
Penn State (2010)
•
Florida State (2012)
•
Arizona State (2009)
•
Northwestern (2011)
*http://blog.lib.umn.edu/itsshelp/news/2013/10/higher-ed-accessibility-lawsuits.html
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Why do we care?
• We are educators.
• We can broaden audience.
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
How do we do it?
• Section 508 Guidelines?
– Eh… Kind of?
– Some of it is still useful
– Section 508 came about in 1998
• The guidelines are old
• <table> layout old
• Section 508 Refresh is coming!
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
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 technologies
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Color Blindness
About 8% of the male population (compared
to 0.5% of females) has some sort of color
blindness
http://empat.io/tim
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Color Blindness
• Consider contrast when it comes to
foreground and backgrounds
• (max(R1, R2) - min(R1, R2)) +
(max(G1, G2) - min(G1, G2)) +
(max(B1, B2) - min(B1, B2)) >= 500
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Color Blindness
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Color Blindness
• Avoid using color as a sole communicator of
information
• If you have to communicate with color,
provide alternate formats like a text
description
• Graphs – be explicit with keys
https://developers.google.com/chart/?csw=1
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Visual Disabilities
• Total (all ages): 6,670,300
– Total (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)
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Low Vision
• Use relative font sizes
• Allow for the functionality of increasing the
size of your fonts
– Consider font resizing widgets Text+ Text-
• Don’t disable pinch zoom functionality
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Blindness
• Screen readers
– Freedom Scientific’s JAWS
– GW Micro Window-Eyes
– Apple Voiceover (native on all iDevices)
– Android Talk Back
• Refreshable Braille display
• http://empat.io/arend
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Blindness
• Begins with intent
• Avoid flooding your pages with too much
information
• Specify the “lang” attribute your html tag
• Don’t automatically play anything with audio
on the page load
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Blindness
• Consider your navigation
• Keyboard accessible
– Source order matches reading order
– tabindex html attribute
• Provide “skip links”
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Blindness
• <section> the content source into logical reading
order
• Use 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 HTML5
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
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>
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering Blindness
• Consider the intent of images on your pages
– Do they convey information?
– Purely decorative?
• “alt” HTML attribute for <img />
• Background images that convey information
should have text equivalent
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Hearing Disabilities
• Provide text alternatives to audio content
• Transcripts
• Closed Captioning for videos
–
–
–
–
Consider positioning
16pt font with high contrast
YouTube Captioning
MagPie
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/Dexterity Disabilities
• Unable to use a mouse
• Compensate with Assistive Technology
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/dexterity Disabilities
One hand keyboard
Eye Tracking
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/Dexterity Disabilities
Mouth Stick
Puff and Sip Device
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/Dexterity Disabilities
• Web pages and applications need to be keyboard
accessible
• Source order is reading order
• Provide Visual cues
– When you use “hover” use “focus” as well
– Consider contrast for color blindness
• Test it manually
• http://webstandards.wvu.edu
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Vestibular Disabilities
• Vestibular system is comprised of pieces of
the nervous system and the inner ear
• Symptoms are dizziness, feelings of vertigo,
imbalance, vision/hearing impairment
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Vestibular Disabilities
• Avoid creating visual noise
• Animation (if used) should be smooth and the
focus of the content
• No moving pieces peripheral of the content
• Background video
– Provide controls to stop the video
– Avoid overlaying any widgets on top of the video
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Accessible Math
• Word and PDF are not screen reader friendly
when creating math formulas
• Plain text is fine for simple formulas: (2a+3b) = x
• High resolution (SVG) images with simple alt
text
• More complex formulas use: MathML and
MathJax
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Accessible Math
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
<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>
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
•
•
•
•
•
•
•
a11yproject.com
Free QA Software
Screen Readers
Books
Blogs
Guidelines
Tutorials
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
•
•
•
•
•
•
webaim.org
WAVE
Services
Training
Surveys
Other Tools
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
• tenon.io
• Karl Groves
• Tests for Section 508 and
WCAG 2.0 compliance
• Robust API works with all
server side languages
• Works with Gulp and
Grunt task runners
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
•
•
•
•
•
•
•
#a11y
@karlgroves
@pauljadam
@feather
@jfc3
@marcysutton
@jbockcet
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
webstandards.wvu.edu
jmbock@hsc.wvu.edu
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
For more Information
304-293-4692
www.cedwvu.org
Providing leadership in the development of services
and supports for persons with disabilities.
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
References
Watson, 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 23rd). Higher Ed Accessibility Lawsuits. Retrieved from
http://blog.lib.umn.edu/
Colblindor. (2006, April 28th). 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
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
References
World 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/understandingvestibular-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
WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES