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

社内ワークショップで利用した資料です。
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