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
97
Webアクセシビリティについて興味を持ってみよう
社内ワークショップで利用した資料です。
Webアクセシビリティについてざっくり伝える目的で作成しました。
C058
November 01, 2017
Tweet
Share
More Decks by C058
See All by C058
エンジニア研修 実施側(しくじった) LT
c058
0
63
Vue.js with Laravel
c058
0
900
PHP7で致命的エラーを 処理したい
c058
0
770
Other Decks in Design
See All in Design
The Fight
euralisw
0
110
B/43プラスカードができるまで
putchomsmartbank
0
470
プロダクトデザインは子育て/Product design is parenting
medley
0
310
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
1
120
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
290
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
580
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
600
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
How STYLIGHT went responsive
nonsquared
92
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Design by the Numbers
sachag
274
18k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Faster Mobile Websites
deanohume
299
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
A better future with KSS
kneath
231
16k
Clear Off the Table
cherdarchuk
84
310k
Thoughts on Productivity
jonyablonski
58
3.8k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
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