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
810
Other Decks in Design
See All in Design
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
180
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
1.2k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.5k
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
280
Storyboard Honey
rocioparronrubio
0
270
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
3
990
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
430
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
How to train your dragon (web standard)
notwaldorf
94
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
KATA
mclloyd
30
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Producing Creativity
orderedlist
PRO
346
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Language of Interfaces
destraynor
158
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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