Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

kobatatakayuki

March 18, 2017
Tweet

More Decks by kobatatakayuki

Other Decks in Programming

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