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

覚醒するアクセシビリティ (JSConf Japan 2019)

Lena Morita
November 30, 2019

覚醒するアクセシビリティ (JSConf Japan 2019)

どんなエンジニアになろうか決めかねていた自分が、ある日突然「私はウェブをやるために生まれてきた」と思うに至った、アクセシビリティの話です。

「アクセシビリティって何?」という人から、「大事なのはわかっているけどいつも後回しにしてしまう」という人まで、明日からアクセシブルな実装をせずにはいられない、ウェブの本質に迫ります。

Lena Morita

November 30, 2019
Tweet

More Decks by Lena Morita

Other Decks in Technology

Transcript

  1. ֮੧͢ΔΞΫηγϏϦςΟ
    ৿ాϦʔφ @mirka

    View Slide

  2. ΢Σϒ ͬͯ
    Կͩͱࢥͬͯ·͔͢ʁ

    View Slide

  3. @mirka
    Accessibility
    Web

    View Slide

  4. @mirka
    ѭͻݟͯͷͷͪͷ৺ʹ
    ͘ΒͿΕ͹ੲ͸΋ͷΛ
    ࢥ͸͟Γ͚Γ
    ΞΫηγ

    View Slide

  5. Who am I?

    View Slide

  6. @mirka
    Lena Morita
    ! ݩσβΠφʔ
    ! Women Who Code Tokyo

    σΟϨΫλʔ
    ! ถAutomatticࣾͰ

    JavaScript Engineer

    View Slide

  7. We’re hiring!
    NEW!

    View Slide

  8. ΞΫηγϏϦςΟͱͷग़ձ͍

    View Slide

  9. @mirka
    2016

    View Slide

  10. @mirka
    ͦ͏͍͑͹
    ΞΫηγϏϦςΟͬͯ
    ͳΜ͔͋ͬͨͳ

    View Slide

  11. @mirka
    ϢʔβϏϦςΟͳΒ
    ೚ͤͯʂ

    View Slide

  12. @mirka
    ΞΫηγϏϦςΟ
    ௐ΂ͨ

    View Slide

  13. View Slide

  14. ݱ࣮

    View Slide

  15. @mirka
    ΞΫηγϏϦςΟ͕
    㚽Ζʹ͞ΕΔཧ༝

    View Slide

  16. @mirka
    Ӧۀத
    अຐͳ͜ͱʹ
    ؾ͍ͮͯͳ͍

    View Slide

  17. @mirka
    Ӧۀத
    ·͔͞ंҜࢠͷਓ͕
    ௨Δͱࢥͬͯͳ͍

    View Slide

  18. @mirka

    υʔύϛϯ͕
    ग़ͯͳ͍ʂ

    Ӧۀத

    View Slide

  19. υʔύϛϯͷਖ਼ମ

    View Slide

  20. υʔύϛϯͷਖ਼ମ 1
    ର৅͕
    ҙ֎ʹ޿͍

    View Slide

  21. @mirka
    ো֐ऀରԠ

    View Slide

  22. @mirka
    ݈ৗऀ ো֐ऀ

    View Slide

  23. @mirka
    ΞϏϦςΟ͸ଟछଟ༷
    ঢ়گʹΑͬͯมԽ͢Δ
    ೳ ྗ

    View Slide

  24. @mirka
    “ো֐͸ਓͰ͸ͳ͘
    ؀ڥʹ͋Δ”

    View Slide

  25. @mirka
    Inclusive 101 by Microsoft Design (CC BY-NC-ND)

    View Slide

  26. @mirka
    “͏ͪͷϓϩμΫτ͸
    ো֐ऀ͕λʔήοτ
    ͡Όͳ͍͔Β”

    View Slide

  27. υʔύϛϯͷਖ਼ମ 2
    ͜ΜͳʹͰ͖Δͷ
    ΢Σϒ͚ͩͰ͸ʁ

    View Slide

  28. @mirka

    View Slide

  29. @mirka

    View Slide

  30. @mirka

    View Slide

  31. @mirka

    View Slide

  32. @mirka
    Extensions
    Userscripts

    View Slide

  33. @mirka
    ?

    View Slide

  34. Open &
    Standardized

    View Slide

  35. View Slide

  36. @mirka
    Web

    View Slide

  37. @mirka
    ΍ͬͺ
    HTML!!

    View Slide

  38. @mirka
    ػց
    Machines

    View Slide

  39. υʔύϛϯͷਖ਼ମ 3
    ޿ٛͷ
    ΞΫηγϏϦςΟ

    View Slide

  40. @mirka
    ݪٛͷΞΫηγϏϦςΟ
    ো֐ɺো֐ऀʹ
    য఺Λ౰ͯͨ΋ͷ

    View Slide

  41. @mirka
    ϕκεͷ
    API ϚχϑΣετ

    View Slide

  42. View Slide

  43. @mirka
    ϕκεͷ͓ୡ͠
    ͢΂ͯͷνʔϜ͸
    σʔλͱػೳΛ
    αʔϏε
    ɾ
    ΠϯλʔϑΣʔεΛ
    ௨ͯ͠ެ։ͤΑ

    View Slide

  44. @mirka
    ϕκεͷ͓ୡ͠
    ଞνʔϜͷσʔλΛ
    ௚ʹಡΈग़ͨ͠Γ
    ཪޱΛઃ͚Δͷ͸ېࢭ

    View Slide

  45. @mirka
    ϕκεͷ͓ୡ͠
    ͢΂ͯͷαʔϏε
    ɾ

    ΠϯλʔϑΣʔε͸

    ࠷ऴతʹ֎෦ͷ։ൃऀʹ

    ެ։͢Δ͜ͱΛલఏʹઃܭͤΑ

    View Slide

  46. @mirka
    ϕκεͷ͓ୡ͠
    ͜ͷ໋ྩʹ
    ैΘͳ͍΍ͭ͸
    ΫϏʂ

    View Slide

  47. @mirka
    — Steve Yegge
    “It’s called Accessibility,
    and it’s the
    most important thing
    in the computing world.”

    View Slide

  48. @mirka

    View Slide

  49. @mirka

    View Slide

  50. @mirka
    ΠϯλʔϑΣʔε

    View Slide

  51. @mirka

    View Slide

  52. @mirka
    UI
    man–machine interface

    View Slide

  53. @mirka
    API
    machine–machine interface

    View Slide

  54. ৘ใͷந৅Խ

    View Slide

  55. ΢Σϒ͕୆ແ͠

    View Slide

  56. @mirka

    View Slide

  57. @mirka

    ×
    Modal title
    Lorem ipsum dolor sit amet
    Save

    View Slide

  58. @mirka
    ϞʔμϧμΠΞϩάͷඪ४ڍಈ
    ! ։͍ͨΒfocus͕Ϟʔμϧ಺ʹҠಈ͢Δ
    ! ดͨ͡Βfocus͕ݩͷཁૉʹ໭Δ
    ! Ϟʔμϧ಺ͰTabΩʔΛଧͪଓ͚ͯ΋

    focus͕Ϟʔμϧ֎ʹಀ͛ͳ͍
    ! EscΩʔͰด͡Δ

    View Slide

  59. @mirka

    ×
    Modal title
    Lorem ipsum dolor sit amet
    Save

    View Slide

  60. ΢Σϒͷຊྖൃش

    View Slide

  61. @mirka
    ਖ਼͘͠ઃܭˍ
    ࣮૷͞Εͨ৘ใ͸
    ࣗ༝Ͱ͋Δ

    View Slide

  62. ࣗ༝Λ࠷େԽ͍ͨ͠

    View Slide

  63. View Slide

  64. @mirka
    ࢠͲ΋ͷ༧๷઀छ
    ೕ༮ࣇ݈߁਍ࠪͷ͝Ҋ಺
    ҭࣇֶڃɾ࠙ஊձͷ͝Ҋ಺
    ࢠͲ΋ͷ݈߁ڭࣨ
    ೛࢈්ɾ৽ੜࣇͷ๚໰ࢦಋ

    View Slide

  65. @mirka
    ΢Σϒͷຊ࣭ͱ͸
    ΞΫηγϏϦςΟ

    View Slide

  66. View Slide

  67. @mirka
    ΢Σϒ͞Μᴷᴷ
    ͋͸͸ͬ

    View Slide

  68. ʪΞΫηγϏϦςΟʫͰݕࡧ
    ৄ͘͠͸΢ΣϒͰ—

    View Slide