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

E8960709ddcea7a61690021eb7592d79?s=47 Lena Morita
November 30, 2019

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

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

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

E8960709ddcea7a61690021eb7592d79?s=128

Lena Morita

November 30, 2019
Tweet

Transcript

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

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

  3. @mirka Accessibility Web

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

  5. Who am I?

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


    σΟϨΫλʔ ! ถAutomatticࣾͰ
 JavaScript Engineer
  7. We’re hiring! NEW!

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

  9. @mirka 2016

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

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

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

  13. None
  14. ݱ࣮

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

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

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

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

  19. υʔύϛϯͷਖ਼ମ

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

  21. @mirka ো֐ऀରԠ

  22. @mirka ݈ৗऀ ো֐ऀ

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

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

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

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

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

  28. @mirka

  29. @mirka

  30. @mirka

  31. @mirka

  32. @mirka Extensions Userscripts

  33. @mirka ?

  34. Open & Standardized

  35. None
  36. @mirka Web

  37. @mirka ΍ͬͺ HTML!!

  38. @mirka ػց Machines

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

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

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

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

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

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

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

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

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

  49. @mirka

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

  51. @mirka ✖

  52. @mirka UI man–machine interface

  53. @mirka API machine–machine interface

  54. ৘ใͷந৅Խ

  55. ΢Σϒ͕୆ແ͠

  56. @mirka

  57. @mirka <div> <div onClick="close">×</div> <div>Modal title</div> <div>Lorem ipsum dolor sit

    amet</div> <div onClick="save">Save</div> </div>
  58. @mirka ϞʔμϧμΠΞϩάͷඪ४ڍಈ ! ։͍ͨΒfocus͕Ϟʔμϧ಺ʹҠಈ͢Δ ! ดͨ͡Βfocus͕ݩͷཁૉʹ໭Δ ! Ϟʔμϧ಺ͰTabΩʔΛଧͪଓ͚ͯ΋
 focus͕Ϟʔμϧ֎ʹಀ͛ͳ͍ !

    EscΩʔͰด͡Δ
  59. @mirka <div> <div onClick="close">×</div> <div>Modal title</div> <div>Lorem ipsum dolor sit

    amet</div> <div onClick="save">Save</div> </div>
  60. ΢Σϒͷຊྖൃش

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

  62. ࣗ༝Λ࠷େԽ͍ͨ͠

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

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

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

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