Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアクセシビリティについて興味を持ってみよう
Search
C058
November 01, 2017
Design
1
110
Webアクセシビリティについて興味を持ってみよう
社内ワークショップで利用した資料です。
Webアクセシビリティについてざっくり伝える目的で作成しました。
C058
November 01, 2017
Tweet
Share
More Decks by C058
See All by C058
エンジニア研修 実施側(しくじった) LT
c058
0
81
Vue.js with Laravel
c058
0
990
PHP7で致命的エラーを 処理したい
c058
0
810
Other Decks in Design
See All in Design
AIで加速するアクセシビリティのこれから
magi1125
3
520
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.3k
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
Saudade typeface
tiagoporto
0
320
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
450
クライアントワークにおける UXリサーチの実践
kozotaira
0
680
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Automating Front-end Workflow
addyosmani
1370
200k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
A designer walks into a library…
pauljervisheath
206
24k
4 Signs Your Business is Dying
shpigford
184
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Site-Speed That Sticks
csswizardry
10
660
Being A Developer After 40
akosma
90
590k
Transcript
WebΞΫηγϏϦςΟ ʹڵຯ࣋ͬͯΈΑ͏ @C058
100% झຯͳͰ ΤϯδχΞϦϯάͱ গ͠ΕͨΛ͢Δͧʂ ʢ^ω^ʣ
ࠓ͢͜ͱ • WebΞΫηγϏϦςΟʁ • WebΞΫηγϏϦςΟ˕ • WebΞΫηγϏϦςΟʂʂʂ
WebΞΫηγϏϦςΟ
ʲ࣭ʳ WebΞΫηγϏϦςΟ ͬͯฉ͍ͯԿ͔͔Δਓ ʢͳΜͱͳ͘ͰOK)
ߴྸऀͷͨΊʹ จࣈΛେ͖͘͢Δ͜ͱ
ͷݟ͑ͳ͍ํར༻Ͱ͖Δ Α͏ʹ͢Δ͜ͱ
ਖ਼ղͰͳ͍ ʢؒҧ͍Ͱͳ͍ʣ
ߴྸऀোऀͳͲ৺ͷػ ೳʹ੍ͷ͋ΔਓͰɺྸ తɾମత݅ʹؔΘΒͣɺ ΣϒͰఏڙ͞Ε͍ͯΔใ ʹΞΫηε͠ར༻Ͱ͖Δ͜ͱ
োऀɾߴྸऀΛؚΊ ʮͯ͢ͷਓʯ͕ରऀ WebʹΞΫηεͰ͖Δ͜ͱ
ʮͯ͢ͷਓʯ
݈ৗऀ োऀ ոզਓ ͜Ͳ ͓ͱͳ ߴྸऀ ػց ϩϘοτ…etc λονεΫϦʔϯ Իೖग़ྗ
ΣΞϥϒϧ σόΠε ΩʔϘʔυ͕ͳ͍ Ϛε͕ͳ͍ ଟ ༷ͳσΟεϓϨΠαΠζ…etc ֎Ͱ·Ϳ͍͠ ిंͰԻ͕ग़ͤͳ͍ पΓ͕͏Δ͘͞ ͯԻೖग़ྗ͕Ͱ͖ͳ͍ ӡసதͰը໘ʹͰ͖ͳ͍ σΟεϓϨΠ͕յΕͨ ոզΛ্ͯ͠ख͘ૢ࡞Ͱ͖ͳ͍ ར༻ऀ σόΠε ίϯςΩετ × ×
୭͕ ͍͔ͳΔڥͰ ར༻Ͱ͖Δ ͷ߹͍ΛߴΊͯ͘ˢˢ
WebΞΫηγϏϦςΟ˕
̏ͭͷϙΠϯτ
• ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ར༻ɺૢ࡞Մೳͳସखஈ ͕ଘࡏ͢Δ͜ͱ
• ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ར༻ɺૢ࡞Մೳͳସखஈ ͕ଘࡏ͢Δ͜ͱ
http://web-tan.forum.impressrd.jp/e/2012/05/17/12727
ώϡʔϚϯϦʔμϒϧʁ • ಡΈ͢͞ʹྀ͍ͯ͠Δ͔ • ςΩετͷϑΥϯταΠζͳͲ • ࣝผ͠қ͍৭͔ • ৭͕ࣝผ͠қ͍ίϯτϥετ •
ΩʔϘʔυ͚ͩͰૢ࡞Ͱ͖Δ͔ • ϦϯΫԡ͍͔͢͠ • ରԠ͍ͯ͠Δݴޠे͔ • ߹ʹΑͬͯଟݴޠαΠτʹ • ϖʔδͷσʔλྔଟ͘ͳ͍͔
ϚγϯϦʔμϒϧ…ʁ • Web ඪ४ʹଇͬͯਖ਼͘͠ίʔσΟϯά • ใͷཧߏ (ݟग़͠ɺஈམϦϯΫɺՕɺॻ͖ɺૠֆ Λ໌֬ʹ • HTML
λάɺຊདྷͷతͷͨΊʹ͏ • σβΠϯͷͨΊʹςʔϒϧlayout͢Δͳ • جຊతʹใςΩετԽ (จࣈใԽ) • Ϛγϯ͕ͦͷ··Ͱղऍ/ཧղͰ͖ͳ͍ใ (ը૾ɺಈըɺԻ ͳͲ) ɺସͱͳΔςΩετใΛ༻ҙ • దͳλΠτϧใϝλใΛΓࠐΈɺίϯςϯπͷΞΠσϯςΟ ςΟΛ໌֬Խ • ϏδϡΞϧσβΠϯͷίʔσΟϯάɺผ్ελΠϧγʔτͰ
WebΞΫηγϏϦςΟ ࢼͯ͠ΈΑ͏
ώϡʔϚϯϦʔμϒϧฤ
ChromeͷExtensionͰ ମݧͯ͠ΈΔ
ϚγϯϦʔμϒϧฤ
iphone/Mac VoiceOverͰ εΫϦʔϯϦʔμʔ ମݧͯ͠ΈΔ
ͬͯΘ͚Ͱ WebΞΫηγϏϦςΟ ؤுͬͯΈ·ͤΜ͔ʁ
νΣοΫπʔϧͰࢼͯ͠ΈΔ • ΈΜͳͷΞΫηγϏϦςΟධՁπʔϧɿ 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/
ʮҰ෦ͷϢʔβʔͷͨΊͷରԠʯ ʮߴྸऀλʔήοτ͡Όͳ͍ʢ͔ͩΒΒͳ͍ʣ ʯ ʮεΫϦʔϯϦʔμʔରԠͩΔ͍ʯ
োऀɾߴྸऀͷରԠ͚ͩ ͡Όͳ͍ͬͯ✋
ex) apple Watch ex) ंͷӡసத
WebΞΫηγϏϦςΟḿΕ SFੈքʢΧοίΠΠະདྷʣ ۙͮ͘
ͱ͍͑ɺ͍͖ͳΓ 100ˋແཧΆɻ ʢΤϯδχΞ͡Όͳͯͦ͘ΕϚʔΫΞοϓͬͯࢥ͏ʣ
ग़དྷΔ͜ͱ͔Βίπίπͱ • ͨͱ͑ը૾ͷAltଐੑͱ͔ • JS͕ͳ͍ঢ়ଶͰ࠷ݶಡΊΔΑ͏ʹͯ͠ ͓͘ͱ͔ • ·ͣΞΫηγϏϦςΟʹڵຯΛ࣋ͬͯΈͯ ใऩूͯ͠ΈΔͱ͔ •
WebΞΫηγϏϦςΟͷํΛఆΊͯΈΔͱ ͔
ͪͳΈʹY!ࣾ ΞΫηγϏϦςΟن͕͋ΔΑ
͓͠·͍ɻ
ࢀߟϦϯΫ • ૉਓͱҧ͏ɺ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/
ࢀߟϦϯΫ • ΞϝϒϩΛεΫϦʔϯϦʔμʔͰಡΈ্͛ͯΈͨ ~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