web accessibility overview

WEST VIRGINIA UNIVERSITY

CENTER FOR EXCELLENCE IN DISABILITIES

Web Accessibility Overview

Jeremy BockWeb 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

• Co-author of a white paper: “Monitoring for

Accessibility and University Websites” in 2013



Session Goal

Increase awareness of web accessibility

standards and practices



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



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



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



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



Why do we care?

• We are educators.

• We can broaden audience.



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!



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



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

http://empat.io/tim



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



Considering

Color Blindness



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

https://developers.google.com/chart/?csw=1



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)



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



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



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




• Consider your navigation

• Keyboard accessible

– Source order matches reading order

– tabindex html attribute

• Provide “skip links”




• <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

Considering Blindess<ul role="menubar">



<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel">

<span id="fileLabel">File</span>

<ul role="menu">



<li role="menuitem">New</li>

<li role="menuitem">Open…</li>

…

</ul>

</li>

…

</ul>




• 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



Considering

Hearing Disabilities• Provide text alternatives to audio content

• Transcripts

• Closed Captioning for videos

– Consider positioning

– 16pt font with high contrast

– YouTube Captioning

– MagPie



Considering

Mobility/Dexterity Disabilities

• Unable to use a mouse

• Compensate with Assistive Technology



Considering

Mobility/dexterity Disabilities

One hand keyboard Eye Tracking



Considering

Mobility/Dexterity DisabilitiesMouth Stick Puff and Sip Device



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

http://webstandards.wvu.edu



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



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



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



Accessible Math



Tools and resources

• a11yproject.com

• Free QA Software

• Screen Readers

• Books

• Blogs

• Guidelines

• Tutorials



Tools and resources

• webaim.org

• WAVE

• Services

• Training

• Surveys

• Other Tools



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



Tools and resources

• #a11y

• @karlgroves

• @pauljadam

• @feather

• @jfc3

• @marcysutton

• @jbockcet



Tools and resources

webstandards.wvu.edu

[email protected]



For more Information

304-293-4692www.cedwvu.org

Providing leadership in the development of services

and supports for persons with disabilities.



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



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

web accessibility overview

Technology

successful web accessibility

web axs

accessibility apis

fellow web users

disabilities act

university websites

university of montana

math formulas accessible