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
1k
PHP7で致命的エラーを 処理したい
c058
0
820
Other Decks in Design
See All in Design
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
The Spectacular Lies of Maps
axbom
PRO
1
270
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
450
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
7 Core Values of Round-L
wired888
0
1.7k
デザイナー向けフライル説明資料
toshiblues
0
120
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.3k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
BBQ
matthewcrist
89
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
117
6.4k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Fireside Chat
paigeccino
39
3.6k
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