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

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

C783391048525c3a705559548aed2323?s=47 C058
November 01, 2017

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

社内ワークショップで利用した資料です。
Webアクセシビリティについてざっくり伝える目的で作成しました。

C783391048525c3a705559548aed2323?s=128

C058

November 01, 2017
Tweet

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