Download to read offline
Uploaded byMike Wilcox
Accessibility for Fun and Profit
The document discusses web accessibility, highlighting the various disabilities it addresses and the importance of compliance with standards like WCAG 2.1. It outlines the legal landscape surrounding accessibility, emphasizing that while specific regulations may be pending, the need for accessible web design remains critical. Additionally, it provides a checklist for developers to implement best practices in web accessibility and references various resources and tools to assist in compliance.
More Related Content
Similar to Accessibility for Fun and Profit
![How Big Brands are Taking Your Traffic in Alberta [Data Inside].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/howbigbrandsaretakingyourtrafficinalbertadatainside-260123180142-42d276f3-thumbnail.jpg?width=640&height=640&fit=bounds)
Accessibility for Fun and Profit
- 2. by Mike Wilcox,March 2019 Website Accessibility for Fun and Profit
- 3.
- 4. What is Accessibility? •Visual: Blindness, low vision and poor eyesight, color blindness • Auditory: Deafness or hearing impairments • Motor/mobility: Difficulty or inability to use the hands • Cognitive and intellectual: affecting memory, attention, developmental "maturity", problem-solving and logic skills, etc. • Seizures: Photo epileptic seizures The needs that Web accessibility aims to address include: * In order of difficulty https://en.wikipedia.org/wiki/Web_accessibility 1 in 5 people have a disability
- 5. Lack of Adoption •Incorrect perceptions • Lack of a free screenreader • Lack of social pressure • Lack of financial return • Lack of immediate visual gratification • Get-it-Done management • Laws are not clear • W3C docs are large and fragmented • Testing is hard
- 6. Justification • It's theright thing • It's the law or will be • An aging population • An increased audience reach • A better understanding of HTML semantics • Google will reward you
- 7. Acronyms • a11y: Abbreviationfor accessibility (a + 11 letters + y) • ADA: Americans with Disabilities Act • signed into law on July 26, 1990 • WAI: The W3C Web Accessibility Initiative • Develops standards and support materials to help you understand and implement accessibility. • ARIA: (WAI-ARIA): The Accessible Rich Internet Applications suite of web standards. • The way to provide proper semantics for custom widgets to make them accessible with assistive technologies. • WCAG: Web Content Accessibility Guidelines • Provides a single shared standard for web content accessibility
- 8.
- 9. Free Screen Readers •Windows NVDA • OSX Apple VoiceOver • Linux Orca • Chrome/ChromeOS ChromeVox https://usabilitygeek.com/10-free-screen-reader-blind-visually-impaired-users/
- 10. ChromeVox Demo • Designedfor use on ChromeBooks, but works as a browser extension for all OS’s • Keyboard shortcut instructions
- 11.
- 12.
- 13. Legal Conformity 1. ADAonly applies to physical places 2. The website has a connection to a physical location (such as a store website) 3. All commercial Websites US Courts have essentially taken three positions: * The company must have 15 or more employees
- 14. Legal Conformity • Thecurrent federal administration has placed the Department of Justice’s rulemakings around web accessibility on an inactive list • No regulations can be expected anytime soon • Putting those regulations on hold won’t stop lawsuits and complaints of discrimination • Your best bet is to refer to the most up-to-date technical requirements available. And that (as of 2018) is WCAG 2.1
- 15. Legal Conformity • Legalityis not whether a site conforms to WCAG, but whether a user can achieve the call to action • The DOJ still believes the ADA applies to websites, even if it is not acting to issue regulations • The lack of regulations doesn’t release anyone from the need to make their websites accessible • Litigation will likely continue to increase. As of Oct 2018: https://www.adatitleiii.com/2018/10/doj-says-failure-to-comply-with-web-accessibility-guidelines-is-not-necessarily-a-violation-of-the-ada/ https://www.levelaccess.com/doj-reaffirms-position-that-ada-applies-to-websites/
- 16.
- 17. WCAG 2.1 ata Glance Perceivable (visual, auditory) • Provide text alternatives for non-text content. • Provide captions and other alternatives for multimedia. • Content can be presented in different ways , including by assistive technologies, without losing meaning. • Make it easier for users to see and hear content . Operable (motor/mobility, seizures) • Make all functionality available from a keyboard . • Give users enough time to read and use content. • Do not use content that causes seizures or physical reactions. • Help users navigate and find content . • Make it easier to use inputs other than keyboard . Understandable (cognitive) • Make text readable and understandable. • Make content appear and operate in predictable ways. • Help users avoid and correct mistakes. Robust (mobile and future devices) • Maximize compatibility with current and future user tools. • https://www.w3.org/WAI/standards-guidelines/wcag/glance/
- 18. Basic Checklist • Keepnavigation the same on each page • Test on scrollable pages (both vertically and horizontally) • Have a high enough contrast between background color and text color • Alt text for images and charts • Captions and/or transcripts for videos • Have links that make sense. Avoid icon-only-links and “click here” as link text • Forms and tables should be properly formatted and labeled with the correct HTML
- 19. Basic Checklist • Relevantcontent for the page • Relevant page titles • Heading markup • Correct HTML markup for relevant content • Have an alternative way to access the information • Offer information in plain text format when possible; PDFs are not easily accessible • Do not use different colored text to convey meaning
- 20. Basic Checklist • Everythingaccessible without a mouse • Errors are read by the screen reader • New content (dialogs, tooltips) are announced
- 21. Official Checklists • https://www.wuhcag.com/wcag-checklist/ •https://webaim.org/standards/wcag/checklist • https://a11yproject.com/checklist
- 22.
- 23. Tools Chrome Inspector WAVE EvaluationTool PayPal Automated Accessibility Tool W3C Web Accessibility Evaluation Tools List Firefox Inspector
- 24. The Ultimate a11yReference https://www.w3.org/WAI/WCAG21/quickref/
- 25.
- 26.
- 27.
- 28. Dev Tips • Propera11y needs to happen at project start • It’s much more difficult to “bolt on” later • Focus on high quality UX and valid and semantic HTML markup • Skip navigation • User should not have to tab through the navigation on every page • Widgets should be intuitive like native controls • Use arrow keys when appropriate, search keys for lists, etc.
- 29. Dev Tips -HTML • Landmark Elements ( header, nav, main, and footer ) • Allow a screen reader to jump to important sections in the design. • Use landmark roles if semantic HTML does not work • Headings ( h1 → h6 ) • Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading. • Lists ( ul and ol ) • Screen readers will announce these items; ergo: “one of three” • Links vs Buttons ( <a/>, <button/> ) • Links are for navigation, buttons are for actions
- 30. More Dev Tips •Do not remove focus ( outline ) styles ( it can be replaced ) • In apps, make sure every page title is meaningful • Ensure to notify of both page and field errors • Use aria-live to notify screen reader of changing content • Use aria-expanded for popups and modals • Get to know all the Aria roles and properties
- 31.
- 32.
- 33.