アクセシビリティのあれこれ 〜まずは、意識することから始めよう〜

Transcript

1. ΞΫηγϏϦςΟͷ͋Ε͜Ε ʙ·ͣ͸ɺҙࣝ͢Δ͜ͱ͔Β࢝ΊΑ͏ʙ 2017-03-18 FRONTEND CONFERENCE 2017 LT @kobatatakayuki - Takayuki Kobata
2. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ
3. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ
4. খാλΧϢΩ
5. 37ࡀ
6. ͸ Μ ͦ Ͱ ൒କ
8. #1979೥ੜ·Ε #େࡕग़਎ #ϝΨω #൒କ #طࠗ #࢞͞Μ ঁ๪ #ଉࢠ #ຳ໘Ϗʔϧ #ϋΠϘʔϧ #ϋϫΠ #ಡॻ #Twitter #Blog #μΠΤοτ #αοΧʔ #ϑοταϧ #ϑ ϦʔελΠϧϑοτϘʔϧ #RAPAZ #όεέοτϘʔϧ #3x3 #޿ใ #Webۀքྺ15೥ #CKO #γχΞςΫχΧϧ σΟϨΫλʔ #ϑϩϯτΤϯυΤϯδχΞग़਎ #HTML #CSS #LT #ษڧձ #ηϛφʔ #ಇ͖ํ #ίϛϡχςΟओ࠻ #FRONTENDx #ΞΫηγϏϦςΟ #AccTalk #GAKU-MC #΢ΧεΧδʔ #݁ࠗࣜ2࣍ձϓϩσϡʔε #2࣍ձKING # ࡀ্ͱࡀԼ͔Β޷͔ΕΔλΠϓ #ϕϏʔ༻඼։ൃ #ग़࢈ ॕ͍ #ΞϯνΤΠδϯά #όοΫτΡβɾϑϡʔνϟʔ #iPhone #Mac #AirPods etc…
9. #ΞΫηγϏϦςΟ
10. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ
11. ΞΫηγϏϦςΟ Λҙࣝͯ͠΋Β ͏ͨΊͷΩοΧ έΛͭ͘Δʂʂ
12. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ
13. ΞΫηγϏϦςΟͷ͋Ε͜Ε ͦͷ1
14. ؒҧͬͨೝࣝΛ ͍࣋ͬͯΔʂʁ
15. ࢹ֮ো֐ऀʢશ໡ʣͷ΢Σϒϖʔδར༻ํ๏ ʛ ࢹ֮ো֐ऀʢऑࢹʣͷ΢Σϒϖʔδར༻ํ๏
16. ※ΈΜͳͷެڞαΠτӡ༻ΨΠυϥΠϯʢ2016೥൛ʣΑΓҾ༻
17. खஈ͕໨తʹͳ ͬͯ·ͤΜ͔ʁ
18. ※໦ୡ͞ΜΑΓܝࡌͷڐՄΛ͍͍͓ͨͩͯΓ·͢ʘ(^o^)ʗ
19. ΞΫηγϏϦςΟͷ͋Ε͜Ε ͦͷ2
20. ਖ਼͍͠จॻߏ଄ ͰϚʔΫΞοϓ ͢Δҙຯ͸ʁʁ
21. <ul> <li><a href="a.html">ίϯςϯπA</li> <li><a href="b.html">ίϯςϯπB</li> </ul>
22. <ul> <li><a href="a.html">ίϯςϯπA</li> <li><a href="b.html">ίϯςϯπB</li> </ul>
23. <nav> <ul> <li><a href="a.html">ίϯςϯπA</li> <li><a href="b.html">ίϯςϯπB</li> </ul> </nav>
24. ϚγϯϦʔμϒϧ
27. WAI-ARIA
28. ϚγϯϦʔμϒϧ ʹͳΔͱɺΈΜͳ ͕ϋοϐʔʹʂʂ
29. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ
30. ؒҧͬͨೝࣝΛ ࣺͯ·͠ΐ͏ʂ
32. ϚγϯϦʔμϒϧ ʹͳΔͱɺΈΜͳ ͕ϋοϐʔʹʂʂ
33. Ұछͷࣾձߩݙ
34. ΞΫηγϏϦςΟ ͸͋ΒΏΔਓΛ ܨ͍Ͱ͘Ε·͢
35. ΞΫηγϏϦςΟ Λҙࣝ͢Δ͜ͱ ͔Β࢝ΊͯΈ· ͤΜ͔ʂʂʂʂ
36. ษڧ͢ΔͳΒ ϐϯΫຊʂʂ
38. ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/
39. @kobatatakayuki
40. Thank you! http://www.kobatatakayuki.com @kobatatakayuki