$30 off During Our Annual Pro Sale. View Details »

Introduction to Digital Accessibility

Ux in Lux
November 20, 2019

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

Ux in Lux

November 20, 2019
Tweet

More Decks by Ux in Lux

Other Decks in Technology

Transcript

  1. Introduction to
    accessibility
    UX in LUX 20/11/2019
    By Tanja Kleut
    & Francesco Rossi

    View Slide

  2. 1
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    1
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    Tanja Kleut
    ICT Accessibility Specialist, European Parliament
    [email protected]
    Twitter: @TanjaKleut
    Francesco Rossi
    Linguist – IT Specialist, European Parliament
    [email protected]
    Twitter: @Francesc0Rossi
    #A11y #UX #UXinLux

    View Slide

  3. 2
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    2
    DIGITAL ACCESSIBILITY AND UNIVERSAL DESIGN
    Digital
    Accessibility
    visual
    hearing
    cognitive
    motor
    UNIVERSAL
    DESIGN

    View Slide

  4. 3
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    3
    TELL US THE DIFFERENCE
    accessibility
    usability
    inclusive (universal)
    design

    View Slide

  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

    View Slide

  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
    • ...

    View Slide

  7. 6
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    6
    ACCESSIBLE ENVIRONMENT

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  11. 10
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    10
    THE FOUR PRINCIPLES OF THE WEB CONTENT ACCESSIBILITY GUIDELINES
    Perceivable Operable
    Understandable Robust

    View Slide

  12. 11
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    11
    PERCEIVABLE

    View Slide

  13. 12
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    12
    OPERABLE

    View Slide

  14. 13
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    13
    UNDERSTANDABLE
    Send e-mail
    Letter in envelope

    View Slide

  15. 14
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    14
    ROBUST

    View Slide

  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

    View Slide

  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

    View Slide

  18. 17
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    17
    TESTING WITH PEOPLE WITH DISABILITIES
    usability
    effective
    time
    engage
    complete

    View Slide

  19. 18
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    18
    TESTING ACCESSIBILITY – SPECIFIC DESIGN
    Do not customize the design or navigation for targeted group of users!

    View Slide

  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

    View Slide

  21. 20
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    20
    LOW CONTRAST

    View Slide

  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!

    View Slide

  23. 22
    DIGITAL ACCESSIBILITY AND USER EXPERIENCE
    22
    THANK YOU!

    View Slide