This document provides an overview of web accessibility from a presentation given at West Virginia University. It defines web accessibility and why it is important, discusses considerations for various disabilities, and provides tools and resources for creating accessible content. The speaker aims to increase awareness of standards and best practices for developing websites that are usable by all people, including those with disabilities.

1. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Web Accessibility Overview
Jeremy Bock
Web Developer

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

3. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Session Goal
Increase awareness of web accessibility
standards and practices

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

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

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

7. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
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.html

8. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Why do we care?
• We are educators.
• We can broaden audience.

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

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

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

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

13. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Color Blindness

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

15. 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)

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

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

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

19. 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”

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

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

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

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

24. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/Dexterity Disabilities
• Unable to use a mouse
• Compensate with Assistive Technology

25. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/dexterity Disabilities
One hand keyboard Eye Tracking

26. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Considering
Mobility/Dexterity Disabilities
Mouth Stick Puff and Sip Device

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

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

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

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

31. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Accessible Math

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

33. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
• a11yproject.com
• Free QA Software
• Screen Readers
• Books
• Blogs
• Guidelines
• Tutorials

34. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
• webaim.org
• WAVE
• Services
• Training
• Surveys
• Other Tools

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

36. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
• #a11y
• @karlgroves
• @pauljadam
• @feather
• @jfc3
• @marcysutton
• @jbockcet

37. WEST VIRGINIA UNIVERSITY
CENTER FOR EXCELLENCE IN DISABILITIES
Tools and resources
webstandards.wvu.edu
jmbock@hsc.wvu.edu

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

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

40. 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/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