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

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

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

Transcript

2. ΢Σϒ ͬͯ Կͩͱࢥͬͯ·͔͢ʁ
5. http://mysite.com
6. ΢Σϒ͡Όͳ͍ ΋ͷͬͯʁ
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 ΞΫηγϏϦςΟ ௐ΂ͨ
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 ͜ΜͳʹͰ͖Δͷ ΢Σϒ͚ͩͰ͸ʁ
51. @mirka Web
52. @mirka HTML ߏ଄ͷ ҙຯ͚ͮ
53. @mirka ػց Machines
54. υʔύϛϯͷਖ਼ମ 3 ޿ٛͷ ΞΫηγϏϦςΟ
55. @mirka ݪٛͷΞΫηγϏϦςΟ ো֐ɺো֐ऀʹ য఺Λ౰ͯͨ΋ͷ
56. @mirka Steve Yegge ͷ͓࿩͠
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
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 ΢Σϒͷຊ࣭ͱ͸ ΞΫηγϏϦςΟ
110. @mirka ΢Σϒ͞Μᴷᴷ ͋͸͸ͬ
111. ʪΞΫηγϏϦςΟʫͰݕࡧ ৄ͘͠͸΢ΣϒͰ—