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

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

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

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 ΞΫηγϏϦςΟ ௐ΂ͨ
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
36. @mirka Web
37. @mirka ΍ͬͺ HTML!!
38. @mirka ػց Machines
39. υʔύϛϯͷਖ਼ମ 3 ޿ٛͷ ΞΫηγϏϦςΟ
40. @mirka ݪٛͷΞΫηγϏϦςΟ ো֐ɺো֐ऀʹ য఺Λ౰ͯͨ΋ͷ
41. @mirka ϕκεͷ API ϚχϑΣετ
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. ࣗ༝Λ࠷େԽ͍ͨ͠
64. @mirka ࢠͲ΋ͷ༧๷઀छ ೕ༮ࣇ݈߁਍ࠪͷ͝Ҋ಺ ҭࣇֶڃɾ࠙ஊձͷ͝Ҋ಺ ࢠͲ΋ͷ݈߁ڭࣨ ೛࢈්ɾ৽ੜࣇͷ๚໰ࢦಋ
65. @mirka ΢Σϒͷຊ࣭ͱ͸ ΞΫηγϏϦςΟ
67. @mirka ΢Σϒ͞Μᴷᴷ ͋͸͸ͬ
68. ʪΞΫηγϏϦςΟʫͰݕࡧ ৄ͘͠͸΢ΣϒͰ—