WTM19 - Building an Accessible Product That Your Users Will Love by Simone Pereira

It’s about time the digital world started considering accessibility as part of the design & build process instead of an afterthought. I will provide an overview of accessibility terminology, and tips and best practices from my experience building a culture of accessible design.

https://youtu.be/CDplY_nrXic

Transcript

1. BUILDING AN ACCESSIBLE PRODUCT THAT YOUR USERS WILL LOVE Simone Pereira Women TechMakers Montreal | March 2019
2. HI! I'M SIMONE I'm a Product Owner at I live in Turonno where I spend my free time climbing things I love travelling and meeting new people
3. What is accessibility? Accessibility in our physical spaces Accessibility in our digital spaces Building a culture of accessibility Design Development Testing Support and training Calls to action OVERVIEW TODAY'S DISCUSSION
4. WHAT IS ACCESSIBILITY?
5. The design of products, devices, services, or environments for people with disabilities. Wikipedia
6. Initiatives are focused on people who have: Visual impairments Total or partial blindness, colour blindness Hearing impairments Requiring sign language accompaniment or subtitling on video/multimedia content Motor skill impairments Impairments that make it difficult or impossible to use a mouse or other pointing device Cognitive impairments Impairments which make it difficult to process information
7. WHY SHOULD I CARE ABOUT IT?
8. BENEFITS OF BEING ACCESSIBLE Makes your product available to a larger group of users Having well designed code (semantic HTML) can improve search results rankings There is legislation to guide compliance Builds good will around your product and brand
9. BENEFITS OF BEING ACCESSIBLE Makes your product available to a larger group of users Having well designed code (semantic HTML) can improve search results rankings There is legislation to guide compliance Builds good will around your product and brand
10. BENEFITS OF BEING ACCESSIBLE Makes your product available to a larger group of users Having well designed code (semantic HTML) can improve search results rankings There is legislation to guide compliance Builds good will around your product and brand
11. BENEFITS OF BEING ACCESSIBLE Makes your product available to a larger group of users Having well designed code (semantic HTML) can improve search results rankings There is legislation to guide compliance Builds good will around your product and brand
12. TERMINOLOGY & LEGISLATION
13. TERMINOLOGY A11y There are 11 letters between A and Y WCAG 2.0 and 2.1 Web Content Accessibility Guidelines. Guidelines for making the web more accessible to people with disabilities. Compliance levels: A (lowest), AA (mid tier), AAA (highest)
14. TECHNOLOGY Screen reader A software program that allows users to browse a page via voice or Braille output. Examples are JAWS and NVDA Speech input software Transcribes words into actions on the screen. Example is Dragon Naturally Speaking Head pointer assistive technology A stylus mounted directly to a user's head to assist with page interaction
15. LEGISLATION ADA: Section 508 Americans with Disabilities Act: seeks to prevent discrimination against people with disabilities. Section 508: applies to software and information technology AODA Accessibility for Ontarians with Disabilities Act Bill C-81 Accessible Canada Act, An Act to ensure a barrier-free Canada Bill not yet passed.
16. ACCESSIBILITY IN OUR PHYSICAL SPACES
17. There are a lot of affordances which exist to make our physical spaces accessible
18. For example, our physical spaces weren't designed for people in wheelchairs 1960s: changes started happening because of activists like Ed Roberts THIS WASN'T ALWAYS THE CASE... Inaccessible curb, late 20th century. Division of Medicine and Science collections, Smithsonian Archives
19. Curb cuts! This benefits people in wheelchairs, but also those pushing strollers, carts, and many others THE RESULT?
20. Curb Cut Effect: improvements made for people with disabilities are beneficial to everyone
21. ACCESSIBILITY IN OUR DIGITAL SPACES
22. Legislation is just the start. There has to be the understanding and desire to build inclusive products Visual indicator around the element that is being focused on. Makes it easy to identify where on the page or element the user is. FOCUS INDICATORS
23. BUILDING A CULTURE OF ACCESSIBILITY
24. BUILDING A CULTURE OF ACCESSIBILITY Weave accessibility and inclusive design into every step of the process Start with brand new features that can be made accessible from the ground-up, or high-traffic features Acknowledge that you may not get everything right the first time. It is a learning process Inform your team about the benefits of accessibility. Generate enthusiasm and support from within
25. BUILDING A CULTURE OF ACCESSIBILITY Weave accessibility and inclusive design into every step of the process Start with brand new features that can be made accessible from the ground-up, or high-traffic features Acknowledge that you may not get everything right the first time. It is a learning process Inform your team about the benefits of accessibility. Generate enthusiasm and support from within
26. BUILDING A CULTURE OF ACCESSIBILITY Weave accessibility and inclusive design into every step of the process Start with brand new features that can be made accessible from the ground-up, or high-traffic features Acknowledge that you may not get everything right the first time. It is a learning process Inform your team about the benefits of accessibility. Generate enthusiasm and support from within
27. BUILDING A CULTURE OF ACCESSIBILITY Weave accessibility and inclusive design into every step of the process Start with brand new features that can be made accessible from the ground-up, or high-traffic features Acknowledge that you may not get everything right the first time. It is a learning process Inform your team about the benefits of accessibility. Generate enthusiasm and support from within
28. MISTAKES HAPPEN... Me in a past life outlinenone.com
29. DESIGN
31. To meet WCAG 2.0 Level AA compliance, text and background colours should have a contrast ratio of at least 4.5:1 for regular- sized text. Contrast-compliant colours
33. Links should be distinguishable from static text by at least one visual cue that does not rely on colour. They should have visual hover and focus states that do not rely on colours. Links
34. Accurately portray the different interaction states: focus, hover, active, static, inactive, etc. Interactive buttons
37. When designing layouts, take into consideration the possibility of users zooming in up to 200%. Recommendation for fonts is to use rems or ems instead of pixels: better handling of font zoom independently of general browser zoom. Designing for zoom to 200%
38. DESIGN TOOLS Web tool that evaluates a given colour combination against WCAG 2.0 guidelines. Provides suggestions of similar colours that are contrast compliant. accessible-colors.org Accessible Colors
39. Similar to Accessible Colors, this tool provides options for primary and secondary colours to be accessible. material.io/tools/color Material Design Color Tool
40. Sketch plugin that provides many of the accessibility checks - contrast compliance, colour blind simulation - in a single plugin. getstark.co Stark (Sketch/Adobe plugin)
41. DEVELOPMENT
42. DEVELOPMENT TIPS Accessibility patterns for the web. Browse working examples and tips on a ton of components including: Carousels Tabs Accordions Tooltips • Menus eBay MIND Patterns ebay.github.io/mindpatterns
43. DEVELOPMENT TOOLS Free & open source, can be used as part of continuous integration. Caveat: good tool for finding obvious gaps (missing alt text, H1s) but it doesn't solve for 'human' interactions pa11y.org Pa11y
44. Provides an overview of the page structure based on headings. Great for identifying when there are missing or extra H1s, and whether the titling makes sense semantically Web Developer tool (Chrome plugin)
45. TESTING
46. Keyboard A11y Use the keyboard to tab through page elements. Elements should have a visible focus state and there should be a 'Skip to main content' link in the header. TESTING TIPS & TOOLS
47. Screen reader A11y Screen readers are often designed to work with specific browsers. Three of the most commonly used ones are: - JAWS on IE or Edge - NVDA on Firefox - VoiceOver on Safari Tab through the page with the screen reader active to be sure all links, buttons, and other controls are accessible and clearly identified.
48. Text Zoom Zoom the text to 200% and visually examine the page Text zoom: Firefox Text Zoom
49. Browser Zoom Zoom the page elements to 200% and visually examine the page Browser zoom: native browser zoom
50. High Contrast High contrast themes are built into the Windows OS and work best with IE11 or Edge. Apply the theme and examine the page: - Are the images visible? - Is the content visible? - Can you see the state of interactive elements?
51. SUPPORT AND TRAINING
52. Create an A11y statement Share best practice articles The statement should outline: - Your commitment to accessibility - How you're doing it - How you're making it sustainable Whether you're sharing them with your team or clients, best practice articles are a great way to increase knowledge about accessibility
53. TRAINING We leverage our annual all staff meetings to spend an hour reviewing our commitment to accessibility and the progress made thus far New team members are brought up-to-speed on accessibility best practices Annual training Part of onboarding new employees
54. GET INVOLVED a11yMTL is a bilingual interest group for anyone passionate about web accessibility, universal design, and digital inclusion. meetup.com/a11yMTL Goal is to provide a welcoming place for people to learn, share experiences ideas and solutions, and to collaborate on building a more inclusive web. meetup.com/a11yTO a11yMTL a11yTO
55. CALLS TO ACTION
56. Everyone benefits from a culture of inclusive design Start small and get your team on board Be open to learning from your mistakes Share your knowledge and increase awareness
57. THANK YOU! Get in touch