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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. খാλΧϢΩ
   

   View Slide

5. 37ࡀ
   

   View Slide

6. ͸ Μ ͦ Ͱ
   ൒କ
   

   View Slide

7. View Slide

8. #1979೥ੜ·Ε #େࡕग़਎ #ϝΨω #൒କ #طࠗ #࢞͞Μ
   ঁ๪ #ଉࢠ #ຳ໘Ϗʔϧ #ϋΠϘʔϧ #ϋϫΠ #ಡॻ
   #Twitter #Blog #μΠΤοτ #αοΧʔ #ϑοταϧ #ϑ
   ϦʔελΠϧϑοτϘʔϧ #RAPAZ #όεέοτϘʔϧ
   #3x3 #޿ใ #Webۀքྺ15೥ #CKO #γχΞςΫχΧϧ
   σΟϨΫλʔ #ϑϩϯτΤϯυΤϯδχΞग़਎ #HTML
   #CSS #LT #ษڧձ #ηϛφʔ #ಇ͖ํ #ίϛϡχςΟओ࠻
   #FRONTENDx #ΞΫηγϏϦςΟ #AccTalk #GAKU-MC
   #΢ΧεΧδʔ #݁ࠗࣜ2࣍ձϓϩσϡʔε #2࣍ձKING #
   ࡀ্ͱࡀԼ͔Β޷͔ΕΔλΠϓ #ϕϏʔ༻඼։ൃ #ग़࢈
   ॕ͍ #ΞϯνΤΠδϯά #όοΫτΡβɾϑϡʔνϟʔ
   #iPhone #Mac #AirPods etc…
   

   View Slide

9. #ΞΫηγϏϦςΟ
   

   View Slide

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

    View Slide

11. ΞΫηγϏϦςΟ
    Λҙࣝͯ͠΋Β
    ͏ͨΊͷΩοΧ
    έΛͭ͘Δʂʂ
    

    View Slide

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

    View Slide

13. ΞΫηγϏϦςΟͷ͋Ε͜Ε
    ͦͷ1
    

    View Slide

14. ؒҧͬͨೝࣝΛ
    ͍࣋ͬͯΔʂʁ
    

    View Slide

15. ࢹ֮ো֐ऀʢશ໡ʣͷ΢Σϒϖʔδར༻ํ๏ ʛ ࢹ֮ো֐ऀʢऑࢹʣͷ΢Σϒϖʔδར༻ํ๏
    

    View Slide

16. ※ΈΜͳͷެڞαΠτӡ༻ΨΠυϥΠϯʢ2016೥൛ʣΑΓҾ༻
    

    View Slide

17. खஈ͕໨తʹͳ
    ͬͯ·ͤΜ͔ʁ
    

    View Slide

18. ※໦ୡ͞ΜΑΓܝࡌͷڐՄΛ͍͍͓ͨͩͯΓ·͢ʘ(^o^)ʗ
    

    View Slide

19. ΞΫηγϏϦςΟͷ͋Ε͜Ε
    ͦͷ2
    

    View Slide

20. ਖ਼͍͠จॻߏ଄
    ͰϚʔΫΞοϓ
    ͢Δҙຯ͸ʁʁ
    

    View Slide

21. 
    ίϯςϯπA
    ίϯςϯπB
    
    

    View Slide

22. 
    ίϯςϯπA
    ίϯςϯπB
    
    

    View Slide

23. 
    
    ίϯςϯπA
    ίϯςϯπB
    
    
    

    View Slide

24. ϚγϯϦʔμϒϧ
    

    View Slide

25. View Slide

26. View Slide

27. WAI-ARIA
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. View Slide

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

    View Slide

33. Ұछͷࣾձߩݙ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. View Slide

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

    View Slide

39. @kobatatakayuki
    

    View Slide

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

    View Slide