Accessibility planning for web based products

An introductory level overview that breaks down WCAG2.0 and accessibility planning to a focus more on design and product considerations.

Transcript

1. ©Jason Markle Accessibility Planning for web based products
2. ©Jason Markle What is accessibility? • How users with disabilities access electronic information, • and how designers and developers enable web sites or apps to function with assistive devices used by individuals with disabilities.
3. ©Jason Markle Are there even that many people with disabilities? 15% (about 1.14 billion people) of the world's population live with some form of disability, of whom 2-4% (22-45 million) experience significant difficulties in functioning. http://www.who.int/disabilities/world_report/2011/report/en/
4. ©Jason Markle What are some common disabilities Visual Blindness Cataract Bright sunny day Aural Deafness Ear infection Loud ambiance Mobile Amputee Sprained ankle Large crowd Mental ADHD Migrain Squabbling brats
5. ©Jason Markle Disabilities vary greatly There are 3 categories we typically group disabilities in to. Permanent Temporary and Situational
6. ©Jason Markle Disabilities categorized Permanent Temporary Situational Visual Blindness Cataract Bright sunny day Aural Deafness Ear infection Loud ambiance Mobile Amputee Sprained ankle Large crowd Mental ADHD Migrain Squabbling brats
7. ©Jason Markle As designers, what do we consider in our work?
8. ©Jason Markle Compliance guidelines and levels WCAG (Web Content Accessibility Guidelines) • Specification create by the World Wide Web Consortium (W3C) • Largest proponent of accessibility on the web • US, Canada, UK, and others directly refer to the spec for guidelines on accessibility over their own outdated mandates and laws. ◦ If their standards aren’t directly tied to WCAG then they are based on WCAG. – https://www.powermapper.com/blog/government-accessibility-standards/ • Australia and Norway make commercial sites comply as well.
9. ©Jason Markle Let’s start simple These are just some common things we see a lot: • Color contrast ◦ Contrast ratios for text or images of text on backgrounds should always be at a ratio of 4.5:1 • Properly nest heading levels ◦ Nest heading levels by their rank from H1 to H6 • Location ◦ Make sure the user’s location is always available to them, ex: breadcrumbs
10. ©Jason Markle More difficult issues These require a little more thought: • Time If you limit time, give users a way to extend sessions or turn session expiration off in the UI. • Error suggestion When input errors are made, show the user with suggestions of how to fix the error.
11. ©Jason Markle Navigation Consider the different ways a user can navigate through your application • Keyboard and mouse/trackpad • Keyboard only (consider tab order) ◦ Always design for a focus style, but never take the focus style away! • Assistive technology ◦ Head wands ◦ Foot mouse ◦ Screen reader software
12. ©Jason Markle Language Keep it short and sweet. • Avoid abbreviations unless you have a way to identify their meaning to users • Reading level ◦ Use tools that allow for testing your written content, like the Flesch-Kincaid scale
13. ©Jason Markle Audio and Video • Video should always have captioning • Audio should always have space designed for a full transcript • You should not rely on auto captioning or transcription software ◦ Ok to use, but not 100% accurate. ◦ Need to have a human being check the content and manually adjust.
14. ©Jason Markle Print version Most governments want you to also have a print friendly version of a screen or page. (more a marketing /resource site thing) • It’s dumb • It’s hard • It’s a giant time sink • You literally just hide 90% of the elements so only the context of what you have on screen is there
15. ©Jason Markle Tools and reference materials Contrast checker http://accessible-colors.com/ WCAG Quick reference https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0 Content Analysis Tool https://www.content-insight.com/ Siteimprove https://siteimprove.com/
16. ©Jason Markle Thank you! Twitter: @jason_markle LinkedIn: /in/jasonamarkle