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

Transcript

1. ΞΫηγϏϦςΟͷ͋Ε͜Ε ʙ·ͣ͸ɺҙࣝ͢Δ͜ͱ͔Β࢝ΊΑ͏ʙ 2017-03-18 FRONTEND CONFERENCE 2017 LT @kobatatakayuki - Takayuki

   Kobata

2. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ

3. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ

4. খാλΧϢΩ

5. 37ࡀ

6. ͸ Μ ͦ Ͱ ൒କ

7. None

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. ϚγϯϦʔμϒϧ

25. None
26. None

27. WAI-ARIA

28. ϚγϯϦʔμϒϧ ʹͳΔͱɺΈΜͳ ͕ϋοϐʔʹʂʂ

29. ΞδΣϯμ • ࣗݾ঺հ • ࠓ೔ͷΰʔϧ • ΞΫηγϏϦςΟͷ͋Ε͜Ε • ·ͱΊ

30. ؒҧͬͨೝࣝΛ ࣺͯ·͠ΐ͏ʂ

31. None

32. ϚγϯϦʔμϒϧ ʹͳΔͱɺΈΜͳ ͕ϋοϐʔʹʂʂ

33. Ұछͷࣾձߩݙ

34. ΞΫηγϏϦςΟ ͸͋ΒΏΔਓΛ ܨ͍Ͱ͘Ε·͢

35. ΞΫηγϏϦςΟ Λҙࣝ͢Δ͜ͱ ͔Β࢝ΊͯΈ· ͤΜ͔ʂʂʂʂ

36. ษڧ͢ΔͳΒ ϐϯΫຊʂʂ

37. None

38. ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/

39. @kobatatakayuki

40. Thank you! http://www.kobatatakayuki.com @kobatatakayuki