Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The importance of accessibility and inclusivity

The importance of accessibility and inclusivity

With this talk, Radimir explains the common impairment challenges in the context of digital products and provides practical solutions based on the inclusive design principles for enabling people with diverse characteristics to use products in various environments.

Radimir Bitsov

July 01, 2021
Tweet

More Decks by Radimir Bitsov

Other Decks in Technology

Transcript

  1. @radibit
    The importance of
    accessibility and inclusivity

    View full-size slide

  2. 1.
    What does digital accessibility
    mean

    View full-size slide

  3. 5
    The level at which a website or an app and its
    features are e
    ff
    ective to as many people as
    possible, regardless of their physical or
    functional capacity

    View full-size slide

  4. 6
    Accessibility is perception

    View full-size slide

  5. 7
    Accessibility is perception

    View full-size slide

  6. 8
    Accessibility is usability

    View full-size slide

  7. 9
    Accessibility is logic

    View full-size slide

  8. 10
    Accessibility is equal opportunity

    View full-size slide

  9. 11
    Accessibility is empathy

    View full-size slide

  10. 12
    Accessibility is about you and me

    View full-size slide

  11. 13
    “By designing with accessibility
    in mind what we're actually
    doing is we're designing for our
    friends, family, and our future
    selves.”


    — Alistair Duggin

    View full-size slide

  12. 14
    1 billion people in the world have some form of
    disability

    View full-size slide

  13. 16
    👨🦳 👩🦳

    View full-size slide

  14. 17
    80% of disability cases are due to population
    aging

    View full-size slide

  15. 2.
    Impairment challenges in the
    context of digital products

    View full-size slide

  16. 19
    “Disability is not just a health problem. It is a
    complex phenomenon, re
    fl
    ecting the interaction
    between features of a person’s body and
    features of the society in which they live.”


    –World Health Organization

    View full-size slide

  17. 20
    Microsoft inclusive toolkit

    View full-size slide

  18. 21
    As web and mobile producers, it’s our
    responsibility to know how our products
    a
    ff
    ect human interactions and avoid
    creating mismatches

    View full-size slide

  19. 22
    Types of disability

    View full-size slide

  20. 23
    Hearing


    (hearing loss)

    View full-size slide

  21. 24
    5% of the world’s population


    (~ 466 million people) has some form of
    auditory impairment

    View full-size slide

  22. 25
    By 2050 over 900 million people


    (1 in 10 people) will have hearing impairment

    View full-size slide

  23. 26
    Hearing loss can be conductive

    View full-size slide

  24. 27
    Hearing loss can be conductive

    View full-size slide

  25. 28
    www.atalan.fr/agissons/en/malentendance.html
    Alt: mu
    ff l
    ed sound of a person talking

    View full-size slide

  26. 29
    Hearing loss can be perceptive

    View full-size slide

  27. 30
    www.atalan.fr/agissons/en/malentendance.html
    Alt: a person talking with crackling and
    whistling noises on the background

    View full-size slide

  28. 31
    1. Captions and text transcript
    synced with video content
    Solutions

    View full-size slide

  29. 32
    1. Captions and text transcript
    synced with video content


    2. Use of sign language while
    transmitting live content e.g.
    news websites, webinars
    Solutions

    View full-size slide

  30. 33
    Chris Heilmann, Microsoft

    View full-size slide

  31. 34
    Eyesight


    (visual impairments)

    View full-size slide

  32. 35
    Globally, at least 2.2 billion people have a
    vision impairment or blindness

    View full-size slide

  33. 36
    Vision impairment — color blindness

    View full-size slide

  34. 37
    Vision impairment — color blindness

    View full-size slide

  35. 38
    www.atalan.fr/agissons/en/daltonisme.html
    Alt: a slider moving from right to left changing the
    colors of a pie chart and its legend

    View full-size slide

  36. 39
    www.atalan.fr/agissons/en/daltonisme.html

    View full-size slide

  37. 40
    Vision impairment — eyesight loss

    View full-size slide

  38. 41
    Alt: a hand is holding up a lens that blurs
    vision and moves it across a picture of a
    mountain scenery

    View full-size slide

  39. 42
    Experiencing an interface through the eyes
    of people with certain impairments helps
    you to establish a great level of empathy
    and boosts your creative thinking

    View full-size slide

  40. 43
    1. Avoid using color as a single
    cue
    Solutions

    View full-size slide

  41. 44
    1. Avoid using color as a single
    cue


    2. Readable text colors against
    background
    Solutions

    View full-size slide

  42. 45
    1. Avoid using color as a single
    cue


    2. Readable text colors against
    background


    3. Keep it minimal
    Solutions

    View full-size slide

  43. 46
    Mobility


    (motor impairments)

    View full-size slide

  44. 47
    Motor impairments can be caused by a wide
    range of conditions like stroke, Parkinson's
    disease, cerebral palsy, muscular dystrophy,
    broken arm.

    View full-size slide

  45. 48
    www.atalan.fr/agissons/en/handicap-moteur.html
    Alt: a mouse pointer with activated hand
    tremor attempting to click a button

    View full-size slide

  46. 49
    1. Optimize for keyboard usage
    Solutions

    View full-size slide

  47. 50
    1. Optimize for keyboard usage


    2. Provide enough area for
    actionable elements
    Solutions

    View full-size slide

  48. 51
    Cognitive di
    ffi
    culties


    (dyslexia, literacy)

    View full-size slide

  49. 53
    1. Memory


    2. Problem-solving

    View full-size slide

  50. 54
    1. Memory


    2. Problem-solving


    3. Attention

    View full-size slide

  51. 55
    1. Memory


    2. Problem-solving


    3. Attention


    4. Text processing

    View full-size slide

  52. 56
    1. Memory


    2. Problem-solving


    3. Attention


    4. Text processing


    5. Complex expressions

    View full-size slide

  53. 57
    1. Memory


    2. Problem-solving


    3. Attention


    4. Text processing


    5. Complex expressions


    6. Visual processing

    View full-size slide

  54. 58
    1. Avoid drawing people’s
    attention away from the main
    content or functionality


    Solutions

    View full-size slide

  55. 59
    1. Avoid drawing people’s
    attention away from the main
    content or functionality


    2. Use clear and simple
    language


    Solutions

    View full-size slide

  56. 60
    1. Avoid drawing people’s
    attention away from the main
    content or functionality


    2. Use clear and simple
    language


    3. O
    ff
    er multiple-choice rather
    than free-form text
    fi
    elds
    Solutions

    View full-size slide

  57. 61
    Vestibular disorders and seizures

    View full-size slide

  58. 62
    1. O
    ff
    er people option to turn
    o
    ff
    or reduce motion
    Solutions

    View full-size slide

  59. 63
    1. O
    ff
    er people option to turn
    o
    ff
    or reduce motion


    2. Avoid
    fl
    ashing or
    fl
    ickering
    e
    ff
    ects and animations
    Solutions

    View full-size slide

  60. 64
    Permanent, temporary,


    situational scenarios

    View full-size slide

  61. 3.
    Inclusive design

    View full-size slide

  62. 66
    Inclusive design is a methodology that
    enables people with diverse characteristics to
    use a product in various environments

    View full-size slide

  63. 67
    By embracing inclusive design, we
    strive to build web products that can
    be used by as many people as possible

    View full-size slide

  64. 68
    Inclusive design principles

    View full-size slide

  65. 69
    1. Recognize exclusion

    View full-size slide

  66. 70
    1. Recognize exclusion


    2. O
    ff
    er choice

    View full-size slide

  67. 71
    1. Recognize exclusion


    2. O
    ff
    er choice


    3. Consider situation

    View full-size slide

  68. 72
    1. Recognize exclusion


    2. O
    ff
    er choice


    3. Consider situation


    4. Provide equivalent experiences

    View full-size slide

  69. 73
    1. Recognize exclusion


    2. O
    ff
    er choice


    3. Consider situation


    4. Provide equivalent experiences


    5. Prioritize core features

    View full-size slide

  70. 4.
    Accessibility as part of the product
    work
    fl
    ow

    View full-size slide

  71. 75
    ♻ Integrate accessibility on each step of the
    product’s lifecycle

    View full-size slide

  72. 76
    🎨 🛠 Involve everyone who is part of the
    design and implementation decision making
    process

    View full-size slide

  73. 77
    💸 Estimate the value of each core feature and
    how it can meet the needs of more people

    View full-size slide

  74. 78
    🧪 Test and maintain with accessibility in mind

    View full-size slide

  75. 79
    “I could change lives and make
    a bigger impact, and that's why
    I have never been able to turn
    o
    ff
    that switch for accessibility.”


    — Marcy Sutton

    View full-size slide