Download to read offline
More Related Content
Similar to Web Accessibility Overview
More from cedwvugraphics
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Web Accessibility Overview
- 1. WEST VIRGINIA UNIVERSITY CENTERFOR EXCELLENCE IN DISABILITIES Web Accessibility Overview Jeremy Bock Web Developer
- 2. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Session Goal Increase awareness of web accessibility standards and practices
- 4. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Why do we care? • We are educators. • We can broaden audience.
- 9. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Considering Color Blindness
- 14. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Considering Mobility/Dexterity Disabilities • Unable to use a mouse • Compensate with Assistive Technology
- 25. WEST VIRGINIA UNIVERSITY CENTERFOR EXCELLENCE IN DISABILITIES Considering Mobility/dexterity Disabilities One hand keyboard Eye Tracking
- 26. WEST VIRGINIA UNIVERSITY CENTERFOR EXCELLENCE IN DISABILITIES Considering Mobility/Dexterity Disabilities Mouth Stick Puff and Sip Device
- 27. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Accessible Math
- 32. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Tools and resources • a11yproject.com • Free QA Software • Screen Readers • Books • Blogs • Guidelines • Tutorials
- 34. WEST VIRGINIA UNIVERSITY CENTERFOR EXCELLENCE IN DISABILITIES Tools and resources • webaim.org • WAVE • Services • Training • Surveys • Other Tools
- 35. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR EXCELLENCE IN DISABILITIES Tools and resources • #a11y • @karlgroves • @pauljadam • @feather • @jfc3 • @marcysutton • @jbockcet
- 37. WEST VIRGINIA UNIVERSITY CENTERFOR EXCELLENCE IN DISABILITIES Tools and resources webstandards.wvu.edu jmbock@hsc.wvu.edu
- 38. WEST VIRGINIA UNIVERSITY CENTERFOR 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 CENTERFOR 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 CENTERFOR 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
Editor's Notes
- #3 Published by the Association on Higher Education and Disability in the Journal of Postsecondary Education on Disability
- #5 Introduction – What is web axs? Why do we care? Consider Different Disabilities – What obstacles do people with disabilities have when browsing the web? How do they overcome them with AT? What can we do as developers to make it easier? Math – How to make math formulas accessible? What tools are out there for us. Tools and Resources – References for more a11y content and what tools we can use to QA our own design and code Q & A – If you came in with a question, please hold it until the end. Feel free to speak up if you need something that I’m trying to communicate clarified.
- #6 Does this sound like UX principles? If it does, it’s because this is where web accessibility starts. If a page is truly accessible then it’s good for everyone regardless of ability.
- #7 ----- Meeting Notes (3/25/15 15:35) ----- Section 508 federal dollars CED Title II - Web is a communication tool Title III - Ecommerce/building analogy/Target
- #8 LA Tech – Course materials Montana – class assignments, live chat, discussion board, registration system Florida State – E-Learning Northwestern – Google Apps Penn State – Web site and course materials AZ State - Kindle
- #9 Educators – As developers, we disseminate the necessary information for people to get an education. No one receiving that information should be discriminated against. When we remove that discrimination from our work… we can broaden our audience.
- #10 Section 508 Universe Training still uses table layouts. Public hearings were held on March 5 in San Diego and DC on March 11. Public Webinar on March 31 to review the proposal. The guidelines will be available for public comment until May 28. Implementation… ?? At the speed of the Federal Government.
- #11 UDL – Web design starts with content first. Designing accessible courses is no different. Flexible and accessible course content is where it begins and this is where we can advocate for people with disabilities first to the instructors and the course creators. Is the content understandable to everyone regardless of ability? If not, is the material/course requirements adaptable to accommodate someone with a disability? WCAG 2 – This is where we get into how we structure our code. Necessary attributes for our HTML tags, design requirements etc. WAI ARIA – Not going to get into it too much. But with these tools we do not have to limit design. We like nuances in our apps, subtle transitions different easing, etc. Good design does not have to be sacrificed in the name of accessibility. We can have it all. I promise.
- #12 http://empat.io/tim
- #13 W3Cs Tools to give Color blindr
- #15 Bargraphs – label under the bar Piecharts – hover animation that adds the key Line charts – multiple labels; broken lines
- #16 These estimates (for adults age 16 and older reporting significant vision loss, who were in the non-institutionalized, civilian population) are all derived from the American Community Survey results for 2012, as interpreted by Cornell University's Employment and Disability Institute (EDI). Show video here http://empat.io/arend
- #17 Don’t forget to consider your containers. Font size should not break your design/usability Show video here http://empat.io/arend
- #18 Our job as designers and developers concerned with accessibility to alter our design and code to play well with these AT
- #20 Keyboard – quick custom navigation for screen readers to pull all desired content by section, heading order, or they may ‘tab’ through it
- #21 Mention flexbox and source order WAI-ARIA roles will only act on ‘focusable’ content for IE. Need more planning for this last bullet Roles: widget roles, document structure, landmark roles
- #22 Example is from the WAI-ARIA guidelines
- #23 Automatic alt attributes for CMS
- #24 Access for All: Public Television for Boston
- #31 MathML is a markup language that’s native to Firefox and can be extended to all browsers with MathJax. MathJax JS plugin.
- #33 Mi = math identifier
- #35 WAVE is an automated checker
- #37 Karl Groves (Tenon) Paul J. Adam (Deque) Derek Featherstone (W3C WAI simplyaccessible.com) John F. Croston III (WebDev Department of Labor) Marcy Sutton Accessibility advocate and developer for axs tools for Angular.js
- #38 Adam Glenn
- #39 Key Talking Points: How to contact the program, Center, make a referral, etc.