1 / 40

Web Accessibility Overview

Increase awareness of web accessibility standards and practices, covering different disabilities and solutions to overcome obstacles. Provide tools and resources for accessible web development.

aimeew
Télécharger la présentation

Web Accessibility Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Accessibility Overview Jeremy Bock Web Developer

  2. 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. Session Goal Increase awareness of web accessibility standards and practices

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

  6. 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. Why do we care? We can get sued like: • Louisiana Tech (2013) • University of Montana (2012) • Florida State (2012) • Northwestern (2011) • New York University (2011) • Penn State (2010) • Arizona State (2009) *http://blog.lib.umn.edu/itsshelp/news/2013/10/higher-ed-accessibility-lawsuits.html

  8. Why do we care? • We are educators. • We can broaden audience.

  9. 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. 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. 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. ConsideringColor 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. Considering Color Blindness

  14. ConsideringColor 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. 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. 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. 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. 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. Considering Blindness • Consider your navigation • Keyboard accessible • Source order matches reading order • tabindex html attribute • Provide “skip links”

  20. 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. 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. 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. 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. Considering Mobility/Dexterity Disabilities • Unable to use a mouse • Compensate with Assistive Technology

  25. Considering Mobility/dexterity Disabilities One hand keyboard Eye Tracking

  26. Considering Mobility/Dexterity Disabilities Mouth Stick Puff and Sip Device

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

  32. <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. Tools and resources • a11yproject.com • Free QA Software • Screen Readers • Books • Blogs • Guidelines • Tutorials

  34. Tools and resources • webaim.org • WAVE • Services • Training • Surveys • Other Tools

  35. 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. Tools and resources • #a11y • @karlgroves • @pauljadam • @feather • @jfc3 • @marcysutton • @jbockcet

  37. Tools and resources webstandards.wvu.edu jmbock@hsc.wvu.edu

  38. For more Information304-293-4692www.cedwvu.org Providing leadership in the development of services and supports for persons with disabilities.

  39. References Watson, L., and McCathieNevile, 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. 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

More Related