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
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
470
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
100
portfolio.pdf
onof003
0
160
minpaku-community-scrum-patterns
norinity1103
1
370
harutaka Vision Deck
zenkigenforrecruit
0
220
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.4k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Unsuck your backbone
ammeep
671
58k
It's Worth the Effort
3n
187
28k
Speed Design
sergeychernyshev
32
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
What's in a price? How to price your products and services
michaelherold
246
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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