Intro to Accessibility

Transcript

1. accessibility
2. We’ll cover: What accessibility is, and why it’s important 1 2 3 A brief overview of accessibility standards Basic accessibility testing
3. What is accessibility?
4. What is it? Accessibility refers to the design of products, devices, services, or environments for people with disabilities. Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia: ‘Accessibility’ and ‘Web Accessibility’
5. Not clear... Disability is not binary.
6. … rather a spectrum. “We are all at the most temporarily abled, moving in and sometimes out of states of disability throughout our lives.” - David Perry: 'Disabilities and Identity'
7. Globally relevant 15% of the world’s population have some form of disability - WHO: 'Disability and Health'
8. Universal and indiscriminate 285 million people are estimated to have disabilities adversely affecting their vision. - WHO: 'Visual Impairment and Blindness'
9. Why care?
10. Human rights The Internet is “increasingly an essential resource for many aspects of life: education, employment, government, commerce, health care, recreation, social interaction, and more. The Web is used not only for receiving information, but also for providing information and interacting with society.” - W3C: 'Overview'
11. Social factors It’s a social issue, affecting: • the aging community • people with low literacy or lack of fluency • people with low bandwidth connections, or using older technologies • mobile access - W3C: 'Social Factors'
12. Business case • Without considering accessibility, you may be disregarding 15% of your potential audience • Accessible websites benefit from: ◦ Better SEO (search engine optimization) ◦ Reduced legal risk ◦ Demonstration of corporate social responsibility (CSR) ◦ Increased customer loyalty ◦ Reduced tech debt and easier maintenance - W3C: 'Developing a Web Accessibility Business Case'
13. Better product - Image
14. Accessibility standards overview
15. Section 508 • Section 508 mandates that all website content be accessible to people with disabilities. • Part of a 1998 amendment to the Rehabilitation Act of 1973. • “Applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology.”
16. Federal efforts - 18f.gsa.gov - playbook.cio.gov/designstandards
17. WCAG (Web Content Accessibility Guidelines) • Developed through the W3C with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. - WCAG: 'Overview' The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’ s mission is to lead the Web to its full potential.
18. WCAG (Web Content Accessibility Guidelines) • Main principles: ◦ Perceivable ◦ Operable ◦ Understandable ◦ Robust - WCAG: 'Understanding the Four Principles of Accessibility'
19. Intro to accessibility testing
20. Basic accessibility testing • The 60-second test: ◦ Headings ◦ “No styles” ◦ Focus styles - David A Kennedy: 'Web Accessibility in 60 Seconds'
21. Content scan and “no styles”
22. Focus styles and keyboard access
23. Other places to start: • Skip links ⇒ • Buttons • Links • Font Sizing • Mobile Menus • Forms
24. ARIA ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The ‘role’ attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar. - MDN: 'An overview of accessible web applications and widgets'
25. ARIA - MDN
26. ARIA - MDN
27. ARIA - MDN
28. Color: Meaning - Paletton
29. Color: Meaning - Paletton
30. Color: Meaning - Paletton
31. Color: Legibility
32. Color: Legibility - NCSU Contrast Tool
33. Color: Legibility - NCSU Contrast Tool
34. Color: Legibility - NCSU Contrast Tool
35. ✓ ✓ We covered: What accessibility is, and why it’s important ✓ An overview of accessibility standards Basic accessibility testing
36. Summing up...
37. Remember: Accessibility isn’t a checkbox or a checklist -- it’s part of the holistic approach to what we do, requiring a shift of perspective and priorities.
38. Remember: We need to stop thinking about accessibility as a feature, or as a constraint.
39. “Good accessibility is undetectable.” - David A Kennedy
40. Testing tools / assistive tech • WAVE - Web Accessibility Evaluation Tool • NC State University Color Contrast Checker • Paciello: Color Contrast Checker • VoiceOver - OS X Screen Reader • Tota11y - An accessibility visualization toolkit • Paletton - Color perception simulation • Juicy Studio: Readability
41. Resources & blogs • W3C: Web Accessibility Initiative (WAI) Resources • WebAIM: Resource List • Teach Access: Tutorial • Web Accessibility for Designers (Infographic) • a11y.me • davidakennedy.com • marcozehe.de • karlgroves.com
42. Standards • Section 508 • WCAG (Web Content Accessibility Guidelines) • U.S. Web Design Standards
43. Social Join the conversation online: #a11y
44. Thanks! Questions? - Amberley Romo | @amberleyjohanna