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

E8960709ddcea7a61690021eb7592d79?s=47 Lena Morita
November 02, 2019

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

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

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

E8960709ddcea7a61690021eb7592d79?s=128

Lena Morita

November 02, 2019
Tweet

Transcript

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

  3. None
  4. None
  5. http://mysite.com

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

  7. None
  8. None
  9. @mirka Accessibility Web

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

  11. Who am I?

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


    ӡӦελοϑ ! ͍Ζ͍Ζ͕Μ͹ͬͯݱࡏ͸
 ถAutomatticࣾͰ
 JavaScript Engineer
  13. We’re hiring! NEW!

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

  15. @mirka 2016

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

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

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

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

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

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

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

    ʹ “ΞΫηγϏϦςΟ”
 “a11y” ͳͲͷݴ༿͕͋Δ

  24. @mirka Φϥ Θ͘Θ͘͢Δͧ

  25. @mirka ͑ͬ

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

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

  28. @mirka ػձଛࣦ

  29. @mirka ͑ͬ

  30. @mirka ඼࣭

  31. @mirka ྙཧ

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

  33. ݱ࣮

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

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

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

  37. @mirka υʔύϛϯ͕ ग़ͯͳ͍ʂ ✨ Ӧۀத

  38. υʔύϛϯͷਖ਼ମ

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

  40. @mirka ো֐ऀରԠ

  41. @mirka ݈ৗऀ ো֐ऀ

  42. @mirka disability dis-ability

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

  44. @mirka Inclusive Design

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

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

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

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

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

  50. None
  51. @mirka Web

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

  53. @mirka ػց Machines

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

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

  56. @mirka Steve Yegge ͷ͓࿩͠

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

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

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

  61. @mirka ϕκεͷ͓ୡ͠ ͢΂ͯͷαʔϏε ɾ 
 ΠϯλʔϑΣʔε͸
 ࠷ऴతʹ֎෦ͷ։ൃऀʹ
 ެ։͢Δ͜ͱΛલఏʹઃܭͤΑ

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

  63. @mirka WordPress Ͱ͍͏ͱʁ

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

  65. @mirka

  66. @mirka WordPress REST API

  67. @mirka — Steve Yegge “It’s called Accessibility, and it’s the

    most important thing in the computing world.”
  68. @mirka

  69. @mirka

  70. @mirka

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

  72. @mirka Disability Ability Machine Human Accessibility Usability

  73. ΢Σϒͱ͸

  74. @mirka

  75. @mirka

  76. @mirka

  77. @mirka

  78. @mirka Extensions Userscripts

  79. @mirka Reader mode VoiceOver Font size

  80. @mirka ?

  81. Open & Standardized

  82. None
  83. ΢Σϒͷຊྖൃش

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

  85. @mirka WCAG Web Content Accessibility Guidelines

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

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

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

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

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

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

  92. @mirka

  93. @mirka

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

  95. @mirka

  96. @mirka

  97. @mirka

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

  99. @mirka alt

  100. @mirka

  101. @mirka <div>Save changes</div> <button>×</button>

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

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

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

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

  106. ࣗ༝Λ࠷େԽ͍ͨ͠

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

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

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

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