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

覚醒するアクセシビリティ (WordCamp Tokyo 2019)

Lena Morita
November 02, 2019

覚醒するアクセシビリティ (WordCamp Tokyo 2019)

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

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

Lena Morita

November 02, 2019
Tweet

More Decks by Lena Morita

Other Decks in Technology

Transcript

  1. View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. http://mysite.com

    View Slide

  6. ΢Σϒ͡Όͳ͍
    ΋ͷͬͯʁ

    View Slide

  7. View Slide

  8. View Slide

  9. @mirka
    Accessibility
    Web

    View Slide

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

    View Slide

  11. Who am I?

    View Slide

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

    ӡӦελοϑ
    ! ͍Ζ͍Ζ͕Μ͹ͬͯݱࡏ͸

    ถAutomatticࣾͰ

    JavaScript Engineer

    View Slide

  13. We’re hiring!
    NEW!

    View Slide

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

    View Slide

  15. @mirka
    2016

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

  20. ΞΫηγϏϦςΟۀք

    View Slide

  21. @mirka
    2017೥ͷ
    WebΞΫηγϏϦςΟ
    ಈ޲Λ઎͏

    View Slide

  22. @mirka
    2017೥ͷ
    WebΞΫηγϏϦςΟ
    ಈ޲Λ઎͏
    ΞΫηγϏϦςΟ Ψν੎

    View Slide

  23. @mirka
    ΞΫηγϏϦςΟ Ψν੎
    ! ΞΫηγͷઐ໳Ո
    ! ࣾ಺֎ͰΞΫηγͷਪਐΛͯ͠Δਓ
    ! Twitter bio ʹ “ΞΫηγϏϦςΟ”

    “a11y” ͳͲͷݴ༿͕͋Δ


    View Slide

  24. @mirka

    Φϥ
    Θ͘Θ͘͢Δͧ

    View Slide

  25. @mirka






    ͑ͬ

    View Slide

  26. @mirka
    ΞΫηγʹ
    ৐Γؾ͡Όͳ͍ਓΛ
    ͍͔ʹઆಘ͢Δ͔

    View Slide

  27. @mirka
    ো֐ऀࠩผ ղফ๏

    View Slide

  28. @mirka
    ػձଛࣦ

    View Slide

  29. @mirka
    ͑ͬ

    View Slide

  30. @mirka
    ඼࣭

    View Slide

  31. @mirka
    ྙཧ

    View Slide

  32. @mirka
    ݱ࣮͸
    ͦΜͳʹ؁͘ͳ͍Α

    View Slide

  33. ݱ࣮

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. @mirka

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

    Ӧۀத

    View Slide

  38. υʔύϛϯͷਖ਼ମ

    View Slide

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

    View Slide

  40. @mirka
    ো֐ऀରԠ

    View Slide

  41. @mirka
    ݈ৗऀ ো֐ऀ

    View Slide

  42. @mirka
    disability
    dis-ability

    View Slide

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

    View Slide

  44. @mirka
    Inclusive
    Design

    View Slide

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

    View Slide

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

    View Slide

  47. @mirka
    Permanent
    Temporary
    Situational
    ߃ٱత
    Ұ࣌త
    ঢ়گత

    View Slide

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

    View Slide

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

    View Slide

  50. View Slide

  51. @mirka
    Web

    View Slide

  52. @mirka
    HTML
    ߏ଄ͷ
    ҙຯ͚ͮ

    View Slide

  53. @mirka
    ػց
    Machines

    View Slide

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

    View Slide

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

    View Slide

  56. @mirka
    Steve Yegge ͷ͓࿩͠

    View Slide

  57. View Slide

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

    View Slide

  59. @mirka
    αʔϏε
    ɾ
    ΠϯλʔϑΣʔεͬͯʁ

    View Slide

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

    View Slide

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

    ΠϯλʔϑΣʔε͸

    ࠷ऴతʹ֎෦ͷ։ൃऀʹ

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

    View Slide

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

    View Slide

  63. @mirka
    WordPress Ͱ͍͏ͱʁ

    View Slide

  64. @mirka
    ޿ใνʔϜ
    DTPνʔϜ

    View Slide

  65. @mirka

    View Slide

  66. @mirka
    WordPress
    REST API

    View Slide

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

    View Slide

  68. @mirka

    View Slide

  69. @mirka

    View Slide

  70. @mirka

    View Slide

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

    View Slide

  72. @mirka
    Disability Ability
    Machine Human
    Accessibility Usability

    View Slide

  73. ΢Σϒͱ͸

    View Slide

  74. @mirka

    View Slide

  75. @mirka

    View Slide

  76. @mirka

    View Slide

  77. @mirka

    View Slide

  78. @mirka
    Extensions
    Userscripts

    View Slide

  79. @mirka
    Reader mode
    VoiceOver
    Font size

    View Slide

  80. @mirka
    ?

    View Slide

  81. Open &
    Standardized

    View Slide

  82. View Slide

  83. ΢Σϒͷຊྖൃش

    View Slide

  84. @mirka
    Ӧۀத
    Ӧۀத
    Ӧۀத

    View Slide

  85. @mirka
    WCAG
    Web Content Accessibility Guidelines

    View Slide

  86. @mirka
    ࢖͍ͮΒ͍ ࢖͍΍͍͢
    Accessibility
    Usability ࢖͍΍͍͔͢ͳʁ
    ࢖͑ͳ͍ਓ͍Δ͔ͳʁ

    View Slide

  87. ໰͑ʂ ΞΫηγϏϦςΟ

    View Slide

  88. @mirka
    جຊͷ໰͍
    1. ݟ͑ʹ͍͘ঢ়گͰ΋࢖͑Δʁ
    2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ
    3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

    View Slide

  89. @mirka
    શ͘࢖͑ͳ͍ ࢖͍΍͍͢
    After
    શ͘࢖͑ͳ͍ ࢖͍΍͍͢
    ࢖͑ΔϥΠϯ
    Before

    View Slide

  90. @mirka
    جຊͷ໰͍
    1. ݟ͑ʹ͍͘ਓͰ΋࢖͑Δʁ
    2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ
    3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

    View Slide

  91. ໰͍ 1
    ݟ͑ʹ͍͘ਓͰ΋
    ࢖͑Δʁ

    View Slide

  92. @mirka

    View Slide

  93. @mirka

    View Slide

  94. ໰͍ 2
    ΩʔϘʔυ͚ͩͰ
    ࢖͑Δʁ

    View Slide

  95. @mirka

    View Slide

  96. @mirka

    View Slide

  97. @mirka

    View Slide

  98. ໰͍ 3
    Ի੠ಡΈ্͛Ͱ
    ࢖͑Δʁ

    View Slide

  99. @mirka
    alt

    View Slide

  100. @mirka

    View Slide

  101. @mirka
    Save changes

    ×

    View Slide

  102. @mirka
    جຊͷ໰͍
    1. ݟ͑ʹ͍͘ਓͰ΋࢖͑Δʁ
    2. ΩʔϘʔυ͚ͩͰ࢖͑Δʁ
    3. Ի੠ಡΈ্͛Ͱ࢖͑Δʁ

    View Slide

  103. ΢Σϒɺ͘͢͝ͳ͍ʁ

    View Slide

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

    View Slide

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

    View Slide

  106. ࣗ༝Λ࠷େԽ͍ͨ͠

    View Slide

  107. @mirka
    ͋ΒΏΔਓؒ • ػցʹͱͬͯ
    ΞΫηεՄೳͱͳΔ

    View Slide

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

    View Slide

  109. View Slide

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

    View Slide

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

    View Slide