Webアクセシビリティについて興味を持ってみよう

Transcript

1. WebΞΫηγϏϦςΟ ʹ΋ڵຯ࣋ͬͯΈΑ͏ @C058

2. 100% झຯͳ࿩Ͱ
 ΤϯδχΞϦϯάͱ
 গ͠཭Εͨ࿩Λ͢Δͧʂ
 ʢ^ω^ʣ

3. ࠓ೔࿩͢͜ͱ • WebΞΫηγϏϦςΟʁ • WebΞΫηγϏϦςΟ˕ • WebΞΫηγϏϦςΟʂʂʂ

4. WebΞΫηγϏϦςΟ

5. ʲ࣭໰ʳ
 WebΞΫηγϏϦςΟ
 ͬͯฉ͍ͯԿ͔෼͔Δਓ
 ʢͳΜͱͳ͘Ͱ΋OK)

6. ߴྸऀͷͨΊʹ จࣈΛେ͖͘͢Δ͜ͱ

7. ໨ͷݟ͑ͳ͍ํ΋ར༻Ͱ͖Δ Α͏ʹ͢Δ͜ͱ

8. ਖ਼ղͰ͸ͳ͍ ʢؒҧ͍Ͱ΋ͳ͍ʣ

9. ߴྸऀ΍ো֐ऀͳͲ৺਎ͷػ ೳʹ੍໿ͷ͋ΔਓͰ΋ɺ೥ྸ తɾ਎ମత৚݅ʹؔΘΒͣɺ ΢ΣϒͰఏڙ͞Ε͍ͯΔ৘ใ ʹΞΫηε͠ར༻Ͱ͖Δ͜ͱ

10. ো֐ऀɾߴྸऀΛؚΊ ʮ͢΂ͯͷਓʯ͕ର৅ऀ WebʹΞΫηεͰ͖Δ͜ͱ

11. ʮ͢΂ͯͷਓʯ

12. ݈ৗऀ ো֐ऀ ոզਓ ͜Ͳ΋ ͓ͱͳ ߴྸऀ ػց ϩϘοτ…etc λονεΫϦʔϯ Ի੠ೖग़ྗ

    ΢ΣΞϥϒϧ σόΠε ΩʔϘʔυ͕ͳ͍ Ϛ΢ε͕ͳ͍ ଟ ༷ͳσΟεϓϨΠαΠζ…etc ԰֎Ͱ·Ϳ͍͠ ిं಺ͰԻ͕ग़ͤͳ͍ पΓ͕͏Δ͘͞ ͯԻ੠ೖग़ྗ͕Ͱ͖ͳ͍ ӡసதͰը໘ʹ஫໨Ͱ͖ͳ͍ σΟεϓϨΠ͕յΕͨ ոզΛ্ͯ͠ख͘ૢ࡞Ͱ͖ͳ͍ ར༻ऀ σόΠε ίϯςΩετ × ×

13. ୭΋͕ ͍͔ͳΔ؀ڥͰ΋ ར༻Ͱ͖Δ ͷ౓߹͍ΛߴΊͯ͘ˢˢ

14. WebΞΫηγϏϦςΟ˕

15. ̏ͭͷϙΠϯτ

16. • ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ར༻ɺૢ࡞Մೳͳ୅ସखஈ ͕ଘࡏ͢Δ͜ͱ

17. • ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ར༻ɺૢ࡞Մೳͳ୅ସखஈ ͕ଘࡏ͢Δ͜ͱ

18. http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

19. ώϡʔϚϯϦʔμϒϧʁ • ಡΈ΍͢͞ʹ഑ྀ͍ͯ͠Δ͔ • ςΩετͷϑΥϯτ΍αΠζͳͲ • ࣝผ͠қ͍഑৭͔ • ৭͕ࣝผ͠қ͍ίϯτϥετ •

    ΩʔϘʔυ͚ͩͰૢ࡞Ͱ͖Δ͔ • ϦϯΫ͸ԡ͠΍͍͔͢ • ରԠ͍ͯ͠Δݴޠ͸े෼͔ • ৔߹ʹΑͬͯ͸ଟݴޠαΠτʹ΋ • ϖʔδͷσʔλྔ͸ଟ͘ͳ͍͔

20. ϚγϯϦʔμϒϧ…ʁ • Web ඪ४ʹଇͬͯਖ਼͘͠ίʔσΟϯά • ৘ใͷ࿦ཧߏ଄ (ݟग़͠ɺஈམϦϯΫɺՕ৚ɺॻ͖ɺૠֆ౳ Λ໌֬ʹ • HTML

    λά͸ɺຊདྷͷ໨తͷͨΊʹ࢖͏ • σβΠϯͷͨΊʹςʔϒϧlayout͢Δͳ • جຊతʹ৘ใ͸ςΩετԽ (จࣈ৘ใԽ) • Ϛγϯ͕ͦͷ··Ͱ͸ղऍ/ཧղͰ͖ͳ͍৘ใ (ը૾ɺಈըɺԻ੠ ͳͲ) ͸ɺ୅ସͱͳΔςΩετ৘ใΛ༻ҙ • ద੾ͳλΠτϧ৘ใ΍ϝλ৘ใΛ੝ΓࠐΈɺίϯςϯπͷΞΠσϯςΟ ςΟΛ໌֬Խ • ϏδϡΞϧσβΠϯͷίʔσΟϯά͸ɺผ్ελΠϧγʔτͰ

21. WebΞΫηγϏϦςΟ
 ࢼͯ͠ΈΑ͏

22. ώϡʔϚϯϦʔμϒϧฤ

23. ChromeͷExtensionͰ
 ମݧͯ͠ΈΔ

24. ϚγϯϦʔμϒϧฤ

25. iphone/Mac VoiceOverͰ
 εΫϦʔϯϦʔμʔ
 ମݧͯ͠ΈΔ

26. ͬͯΘ͚Ͱ
 WebΞΫηγϏϦςΟ
 ؤுͬͯΈ·ͤΜ͔ʁ

27. νΣοΫπʔϧͰࢼͯ͠ΈΔ • ΈΜͳͷΞΫηγϏϦςΟධՁπʔϧɿ miChecker (ΤϜΞΠνΣοΧʔ)Ver.2.0ʛ૯ ຿ল - http://www.soumu.go.jp/main_sosiki/ joho_tsusin/b_free/michecker.html •

    ΞΫηγϏϦςΟνΣοΫπʔϧҰཡ - https://weba11y.jp/tools/testing_index/ • Another HTML-lint - http://www.htmllint.net/

28. ʮҰ෦ͷϢʔβʔͷͨΊͷରԠʯ ʮߴྸऀ͸λʔήοτ͡Όͳ͍ʢ͔ͩΒ΍Βͳ͍ʣ ʯ ʮεΫϦʔϯϦʔμʔରԠͩΔ͍ʯ

29. ো֐ऀɾߴྸऀ΁ͷରԠ͚ͩ ͡Όͳ͍ͬͯ✋

30. ex) apple Watch ex) ंͷӡసத

31. WebΞΫηγϏϦςΟḿΕ͹ SFੈքʢΧοίΠΠະདྷʣ ΋ۙͮ͘

32. ͱ͸͍͑ɺ͍͖ͳΓ 100ˋແཧΆɻ ʢΤϯδχΞ͡Όͳͯͦ͘ΕϚʔΫΞοϓͬͯࢥ͏ʣ

33. ग़དྷΔ͜ͱ͔Βίπίπͱ • ͨͱ͑͹ը૾ͷAltଐੑͱ͔ • JS͕ͳ͍ঢ়ଶͰ΋࠷௿ݶ͸ಡΊΔΑ͏ʹͯ͠ ͓͘ͱ͔ • ·ͣ͸ΞΫηγϏϦςΟʹڵຯΛ࣋ͬͯΈͯ ৘ใऩूͯ͠ΈΔͱ͔ •

    WebΞΫηγϏϦςΟͷํ਑ΛఆΊͯΈΔͱ ͔

34. ͪͳΈʹY!ࣾ͸
 ΞΫηγϏϦςΟن໿͕͋ΔΑ

35. ͓͠·͍ɻ

36. ࢀߟϦϯΫ • ૉਓͱ͸ҧ͏ɺWebϓϩϑΣογϣφϧͷ࢓ࣄͱͯ͠ͷWebίϯςϯπ։ ൃΛߟ͑ͯΈͨ- http://web-tan.forum.impressrd.jp/e/2012/05/17/ 12727 • ΞΫηγϏϦςΟ͔Β͸͡ΊΔɺWebαΠτͷUXσβΠϯ - https://

    www.slideshare.net/yoshinoriohta18/webux-54366899 • WebΞΫηγϏϦςΟʹඞཁͳͷ͸ʮཧ૝΁ͷ຋༁ʯ - FRONTEND CONFERENCE 2016ࢀՃใࠂ - http://blog.cybozu.io/entry/2016/03/09/ 080000 • ΍͸Γ͓લΒͷWebΞΫηγϏϦςΟ͸ؒҧ͍ͬͯΔ - http:// kidachi.kazuhi.to/blog/archives/038401.html • MacͷͨΊͷVoiceOver: VoiceOver ͷ֓ཁ- https://support.apple.com/ kb/PH22549?viewlocale=ja_JP&locale=ja_JP • ࣍ੈ୅Web͸ϒϥ΢βͷ֎ʹ͋Δ -http://www.yasuhisa.com/could/ article/nextwebconf-2015/

37. ࢀߟϦϯΫ • ΞϝϒϩΛεΫϦʔϯϦʔμʔͰಡΈ্͛ͯΈͨ ~2016೥Ն~https:// speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita- 2016nian-xia • ໡໨ͷiPhoneϢʔβʔʹฉ͍ͨɺࢹ֮Λ࢖Θͳ͍ڻ͖ͷεϚϗૢ࡞ज़ - https://

    king.mineo.jp/magazines/special/387 • Web ΞΫηγϏϦςΟͱݺ͹Ε͍ͯΔ΋ͷͱ Web ΞϓϦ։ൃݱ৔ʹࢥ͍Λدͤͯ- https://havelog.ayumusato.com/develop/a11y/e726-web_a11y_and_webdev.html • ͳͥاۀ͸WebΞΫηγϏϦςΟʹऔΓ૊Ήͷ͔ʁ - https://www.slideshare.net/ waic_jp/web-72165033 • WebΞΫηγϏϦςΟΛ֬อ͢ΔϝϦοτ - https://weba11y.jp/basics/accessibility/ why/ • ͋ͳͨͷՁ஋ΛߴΊΔWebΞΫηγϏϦςΟ - https://www.slideshare.net/rikiha/ web-69781723