Introduction to Digital Accessibility

This event will focus on Digital Accessibility, which is essential to persons with disabilities and it benefits all users. The objective of the presentation is to raise awareness and show best practices.
For this event, we had two guest speakers.
Tanja Kleut is an Accessibility specialist at the European Parliament. Evaluates accessibility of websites and mobile applications in the early development, delivers presentations on accessibility and promotes universal design. In her free time collaborates with the European Blind Union on the regular monthly podcast on technological accessibility innovations for visually impaired persons.
Twitter profile: @TanjaKleut
Francesco Rossi is a Linguist-IT Specialist at the European Parliament. He coordinates IT projects in the Directorate General for Translation and he is involved in the Digital Accessibility Project, giving advice on the evaluation of websites and applications, delivering presentations on accessibility and liaising with stakeholders in and outside European Institutions.
Twitter: @Francesc0Rossi

Transcript

1. Introduction to accessibility UX in LUX 20/11/2019 By Tanja Kleut & Francesco Rossi
2. 1 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 1 DIGITAL ACCESSIBILITY AND USER EXPERIENCE Tanja Kleut ICT Accessibility Specialist, European Parliament tanja.kleut@europarl.europa.eu Twitter: @TanjaKleut Francesco Rossi Linguist – IT Specialist, European Parliament francesco.rossi@europarl.europa.eu Twitter: @Francesc0Rossi #A11y #UX #UXinLux
3. 2 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 2 DIGITAL ACCESSIBILITY AND UNIVERSAL DESIGN Digital Accessibility visual hearing cognitive motor UNIVERSAL DESIGN
4. 3 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 3 TELL US THE DIFFERENCE accessibility usability inclusive (universal) design
5. 4 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 4 WEB ACCESSIBILITY “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” Tim Berners Lee, W3C Director Source: http://www.w3.org/WAI/fundamentals/accessibility-intro/ Picture source: Wikipedia
6. 5 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 5 ASSISTIVE TECHNOLOGIES • screen reader • refreshable braille display • magnifier • speech recognition software • alternative input devices (special ergonomic keyboard, mouse or trackball) • hearing aids • ...
7. 6 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 6 ACCESSIBLE ENVIRONMENT
8. 7 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 7 WEB ACCESSIBILITY STANDARDS • Web Content Accessibility Guidelines (WCAG) 2.1, W3C • ATAG 2.0 • WAI-ARIA 1.1 • WAI-ARIA Authoring Practices 1.1 • W3C Accessibility standards and technical specifications
9. 8 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 8 EUROPEAN STANDARDS • 2018 - Harmonised European Standard EN 301 549 V2.1.2 (2018-08), CEN, CENELEC, ETSI • 2019 - Design for all EN 17161:2019, CEN, CENELEC
10. 9 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 9 LEGISLATION • 2014 - Directive 2014/24/EU on public procurement • 2016 - Directive 2016/2102 on the Accessibility of Websites and Mobile Applications of Public Sector Bodies • 2019 - Directive 2019/882 on the accessibility requirements for products and services
11. 10 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 10 THE FOUR PRINCIPLES OF THE WEB CONTENT ACCESSIBILITY GUIDELINES Perceivable Operable Understandable Robust
12. 11 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 11 PERCEIVABLE
13. 12 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 12 OPERABLE
14. 13 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 13 UNDERSTANDABLE Send e-mail Letter in envelope
15. 14 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 14 ROBUST
16. 15 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 15 TESTING ACCESSIBILITY • Unplug the mouse and navigate by keyboard (reading order, focus management, access to all interactive components) • Disable Images and check if the alternative text is there and whether it makes sense • Disable CSS and check whether the content is structured in a logical way and if important part of the content is missing • Activate High Contrast Mode and check the visibility of the text and UI components
17. 16 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 16 TESTING ACCESSIBILITY – AUTOMATED CHECKERS list of web accessibility evaluation tools on W3C Some free tools: • Chrome Accessibility Audit • Koa11y • WCAG Contrast Checker (Firefox add-on) • Mozilla Accessibility Inspector Automated accessibility tools can find from 10% to 30% of accessibility barriers
18. 17 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 17 TESTING WITH PEOPLE WITH DISABILITIES usability effective time engage complete
19. 18 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 18 TESTING ACCESSIBILITY – SPECIFIC DESIGN Do not customize the design or navigation for targeted group of users!
20. 19 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 19 ACCESSIBILITY IN PRACTICE • Contrast • accessible • inaccessible • Page structure and alt text • accessible • inaccessible • Landmark roles and headings • Form • accessible • inaccessible • Buttons • Autocomplete • Tabs • Modal dialog
21. 20 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 20 LOW CONTRAST
22. 21 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 21 CONCLUSIONS • 15,6% of the EU population has a disability • With accessibility in mind you will create a better future for all of us!
23. 22 DIGITAL ACCESSIBILITY AND USER EXPERIENCE 22 THANK YOU!