Introduction to Web Accessibility

Introduction to Web Accessibility.

-What is Web Accessibility
-Why it is important
-Types of disabilities & impairments
-Common examples of digital barriers
-How to detect issues
-How you can get started

Transcript

1. Introduction to Web Accessibility Alexander Pichler-Bavandi UI Developer
2. My goal for today is… to give you a compact overview on the topic. • What is Web Accessibility • Why it is important • Types of disabilities & impairments • Common examples of digital barriers • How to detect issues • How you can get started
3. Examples of digital barriers What is Web Accessibility?
4. What is Web Accessibility? Web accessibility is about removing digital barriers specifically for people with disabilities. It aims to ensure access to digital products, services or information regardless of the users abilities and disabilities. Remove barriers to ensure access.
5. Examples of digital barriers Why is it important?
6. It is important because… • it creates equal opportunities • it affects ~16% of the world`s population (1.3 billion people = 1,3 Milliarden Menschen - have some kind of disability) • it expands your potential user or customer base Source: https://accessiblyapp.com/ Only about 4% of the world’s top one million web pages are accessible.
7. Examples of digital barriers Types of disabilities & impairments
8. Types of disabilities & impairments Visual: blindness, low vision, eye infection Hearing: deafness, age related hearing loss, external factors (noise) Mobility: paralysis, amputation, broken arm Cognitive: attention deficit, dyslexia, brain injury Image source - Microsoft Abilities and disabilities are very individual.
9. Good to know • WCAG = Web Content Accessibility Guidelines (Levels: A, AA, AAA Current Version: 2.2) • Screenreader = software that allows blind or visually impaired users to read text to them • ARIA = Accessible Rich Internet Applications (aria-label, aria-hidden, …) • Accessibility = A11y (pronounced A-one-one-Y or A-eleven-Y / not A-L-L-Y)
10. Examples of digital barriers Common examples of digital barriers
11. Low color contrast & small fonts • Make sure there is a good contrast between foreground and background color • Copy text should be at least >=16px (use relative units like rem instead of px) • Benefit: easier to read for every sighted user
12. Missing labels on form controls • Use <label> instead of placeholder • Connect the <label> with the form control via the for-attribute • Benefit: Bigger clickable area for all mouse users
13. Bad or no keyboard focus indicators • Make sure there is a visible focus indicator when navigating with keyboard • Try to operate your site with keyboard only (Open/Close navigation, etc.) • Benefit: good visual indicator when using the keyboard (e.g. jumping to next form control)
14. Images without alternative (alt) text • Always add the alt-attribute to images • Leave alt-attribute empty (alt=””) for decorative images Decorative Image Informative image
15. Buttons without accessible labels Do not rely on visual icons alone.
16. <title> & <h3>adlines <title> • Is an important information for assistive technologies (e.g. screenreader) • It helps to quickly identify if a user is on the right page <h3>adlines • Helps scanning a page (e.g. screenreader can navigate through headlines) • Use one <h1> per page - it should communicate the purpose of the page • Ensure a correct headline outline. Do not skip levels (e.g. <h1> -> <h3>)
17. Color blindness Do not rely on colors alone. Info: the picture is simplified, just to make a point.
18. How to detect these issues?
19. Automated Testing Developer Tools Google Lighthouse, axe DevTools WAVE wave.webaim.org Color Contrast Analyser color.a11y.com HeadingsMap Browser Extension Color Review color.review W3C Markup Validation Service validator.w3.org webhint webhint.io FastPass accessibilityinsights.io/docs/web/getstarted/fastpass
20. Developer Tools (Lighthouse, axe)
21. Developer Tools (Lighthouse, axe)
22. WAVE - Webaim (Browser Extension)
23. WAVE - Webaim
24. a11y - Color Contrast Analyzer
25. HeadingsMap (Browser Extension)
26. Manual Testing Keyboard Check navigation and functionality with your keyboard only. Browser Zoom Do not use user-scalable=no in viewport meta tag. Check for functionality and readability. Checklist a11yproject.com/checklist Chrome Developer Tools Accessibility Tree Screenreader JAWS, NVDA
27. a11y Checklist
28. How can you get started?
29. How to get started Removing barriers is an ongoing process, you are never really finished. 1. Run automated tools Developer Tools (Lighthouse, axe) or WAVE 2. Check the headline outline headingsMap 3. Give manual testing a try Keyboard (focus, Open & Close) 4. Start reading the a11yproject checklist
30. Takeaways
31. Takeaways 1. Taking care of accessibility issues benefits everyone 2. Lots of issues can be fixed pretty easily 3. There are great tools which help you along the way
32. Thanks! I am happy to answer any questions.
33. Tools & Resources Developer Tools Google Lighthouse, axe DevTools WAVE wave.webaim.org Color Contrast Analyser color.a11y.com Color Review color.review HeadingsMap Browser Extension W3C Markup Validation Service validator.w3.org webhint webhint.io FastPass accessibilityinsights.io/docs/web/getstarted/fastpass
34. Tools & Resources Keyboard Navigation and functionality checked with the keyboard only. Browser Zoom Check for functionality and readability. Checklist a11yproject.com/checklist Chrome Developer Tools Accessibility Tree Screenreader JAWS, NVDA
35. Resources to dig deeper WCAG Quick Reference https://www.w3.org/WAI/WCAG22/quickref/ WCAG Understanding https://www.w3.org/WAI/WCAG21/Understanding/ WCAG Techniques https://www.w3.org/WAI/WCAG21/Techniques/ ARIA Authoring Practices Guide https://www.w3.org/WAI/ARIA/apg/