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
Accessibilityに興味が出てきた話
Search
ken
December 17, 2021
Programming
0
100
Accessibilityに興味が出てきた話
ken
December 17, 2021
Tweet
Share
More Decks by ken
See All by ken
リリース済にも関わらず何のドキュメントもなかったシステムの仕様書を書いてみた話
segamiken
0
100
Laravelに入門してみた
segamiken
0
98
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
2
380
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
100
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
700
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
「App Intent」よくわからんけどすごい!
rinngo0302
1
130
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
170
Featured
See All Featured
A better future with KSS
kneath
238
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Making Projects Easy
brettharned
116
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Designing Experiences People Love
moore
142
24k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Thoughts on Productivity
jonyablonski
69
4.7k
How to Ace a Technical Interview
jacobian
278
23k
Transcript
Accessibility(A11Y)ʹڵຯ͕ग़͖ͯͨ ͱ͍͏ ken
ͱ͋Δ.... εʔύʔϑΝϛίϯ࣌ͷΑΑΛϓϨΠ͍ͯ͠·ͨ͠ https://www.nintendo.co.jp/software/feature/nintendo-classics/detail/index.html?vcid=S-2020_j
͏ʔΜ.. ৭Αͱԫ৭Α͕ݟ͚ʹ͍͘.....
͋ɺͦ͏ͩࣗɺઌఱੑͷ৭֮ଟ༷ੑͩͬͨ...ʂ - ຊਓஉੑͷ5% (20ਓʹ1໊)ɺԤถͷനਓஉੑͷ8ʙ10%͕৭֮ଟ༷ੑͰ͋ ΔΒ͍͠Ͱ͢ - ৭֮ଟ༷ੑͱɺҎલʮ৭ʯʮ৭ऑʯʮ৭֮ҟৗʯͱݺΕ͍ͯͨɺਓ ʹΑͬͯ৭ͷݟ͑ํ͕গ͠ҟͳΔঢ়Ͱ͢ - 2017͔ΒຊҨֶձͷ༻ޠվగͰʮ৭֮ଟ༷ੑʯͱݺΕΔΑ͏ʹͳΓ
·ͨ͠ - ࣗΑΑҎ֎ಛʹෆศΛײ͡Δ͜ͱͳ͍Ͱ͢
ͳΔ΄Ͳ... ͦ͏ͩͬͨͷ͔ʂ https://game.watch.impress.co.jp/docs/news/1307205.html
࿕ใʂ 2020ͷ9݄ʹ େ෯Ξοϓσʔτ͞Ε͍ͯ·ͨ͠ʂ https://twitter.com/sega_official/status/1310420274257391616
ͷͮ͘ΓΛ͢Δʹ͋ͨͬͯɺ৭Μͳਓͷ͜ͱΛߟྀ͠ͳ͍ͱ͍͚ͳ͍ʂ ͦ͏͍͑A11Yͱ͍͏ݴ༿લ͔ΒΑ͘ฉ͘Α͏ͳ... Α͠ௐͯΈΑ͏
Web Accessibility (ΞΫηγϏϦςΟ)ͱ WebΞΫηγϏϦςΟɺମతٴͼٕज़తͳ੍ʹΑΒͣɺWebαΠτΛ͍͢ ͘อͭͨΊͷϕετϓϥΫςΟεͰ͢ɻ WebΞΫηγϏϦςΟW3Cͱ͍͏Σϒʹؔ͢ΔϧʔϧΈΛඋ͢Δࠃࡍஂ ମͷWeb Accessibility Initiative(WAI)ʹΑͬͯඪ४Խͱ͕ٞ͞Ε͍ͯ·͢ɻ https://developer.mozilla.org/ja/docs/Glossary/Accessibility
ͭ·Γ... ݸਓͷମతɺೝతೳྗΣϒͷΞΫηεํ๏ʹؔΘΒͣɺՄೳͳݶΓΞΫη εՄೳͳίϯςϯπΛ։ൃ͢Δ͜ͱʂʂ ͜ͷݴ༿Χοί͍͍Ͷ.. > The power of the Web
is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
ܾͯ͠ԿΒ͔ͷϋϯσΟΩϟοϓΛ࣋ͭਓʑͷͨΊͷͷ͚ͩͰͳ͍ ݱࡏϞόΠϧσόΠε͍ωοτϫʔΫΛར༻͍ͯ͠ΔਓʑͷͨΊͷͷͰ͋Δ ߟ͑Δ͖͜ͱଟ͍ ͚Ͳ·ͣHTMLʂ
ҙຯతͳ(ηϚϯςΟοΫ)ͳHTMLΛ͏͜ͱ͕େࣄʂ Ͱ͖ΔݶΓɺ૬Ԡ͍͠HTMLཁૉΛ;͞Θ͍͠తʹ͏͜ͱΛҙࣝ͢Δ - buttonλάΛ͏ͱɺ<button>ಉ࢜ͷؒΛλϒͰҠಈͰ͖ͨΓɺϦλʔϯɾΤϯλʔͰbuttonΛΞΫςΟϒʹ Ͱ͖ͨΓ - ਖ਼͍͠λάΛ͍ͬͯΔ͚ͩͰɺ͋ΔछλμͰ৭ΜͳػೳΛखʹೖΕΒΕΔʂ - εΫϦʔϯϦʔμʔ͕ίϯςϯπΛͲ͏ಡΈ্͍͛ͯ͘ͷ͔Λҙࣝ͢Δͱྑ͍ -
imgͷaltଐੑͱ͔͖ͬͪΓॻ͜͏ ଟ͗͢ΔͷͰ৭ʑׂѪ.. ৄࡉͪ͜ΒΛ https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
CSSͱJSʹΑͬͯΞΫηγϏϦςΟΛଛͳΘͳ͍Α͏ʹ͢Δʂ - ྫ͑ htmlͰ<div>λΠτϧ</div>ͱॻ͖ɺͦΕʹରͯ͠CSSͰλΠτϧͬΆ͘ݟͤΔΑ͏ʹ͢ΔͷNG - ࢹ্֮λΠτϧͬΆ͘ݟ͑Δ͕ɺϦʔμʔ͕ಡΈ্͛ͨ࣌ʹλΠτϧͱೝࣝ͞Εͳ͍ͷͰɺCSSͷ͍ͤͰΑΓࠞཚ͕ىͬͯ͜ ͍Δ - <h1>λΠτϧ</h1>ͱॻ͘ʂ -
Colorʹؔͯ͠ - ৭ͷίϯτϥενΣοΫπʔϧ͕͋Δ͔Β͏ʂhttps://webaim.org/resources/contrastchecker/ - গͳ͘ͱ4.5 : 1ͷίϯτϥετ͕ඞཁ - Ϛεʹಛ༗ͷΠϕϯτʹ͍ͭͯ - mouseovermouseoutɺdblclickͳͲͷΠϕϯτͷΈʹରԠ͍ͯ͠ΔͱɺΩʔϘʔυͷΈͷϢʔβʔʹର͢ΔΞΫηγϏϦςΟΛଛ ͳ͏ɻͦ͏͍ͬͨ߹focusblurͳͲͷΠϕϯτʹରԠ͠ɺೋॏʹରԠ͢ΔΑ͏ʹ͢Δ
None
Chrome͕৭ͷఏҊ·Ͱͯ͘͠ΕΔ...ʂ
WAI-ARIAʹ͍ͭͯ WAI-ARIAW3CʹΑͬͯఆΊΒΕ༷ͨͰɺཁૉʹద༻Ͱ͖ΔՃͷҙຯΛఏڙ͢ΔҰ࿈ͷ HTMLଐੑΛఆ͍ٛͯ͠Δ WAI-ARIAεΫϦʔϯϦʔμʔͷϢʔβʔͷཧղʹඞཁͱͳΔҙຯΛఏڙͯ͘͠ΕΔπʔϧ - roleΛࢦఆͰ͖Δ, role=”navigation”, role=”tab”ͱ͔role=”search”ͱ͔ https://www.w3.org/TR/wai-aria-1.1/#role_definitions -
aria-required: true; (ϑΥʔϜೖྗ͕ඞਢ)ͳͲͷཁૉͷੑ࣭Λpropertyͱͯ͠ఆٛͰ͖Δ https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
- WAI-ARIA ଐੑͷॏཁͳɺϒϥβʔͷΞΫηγϏϦςΟ APIʢεΫϦʔ ϯϦʔμʔ͔͜͜ΒใΛऔಘ͢ΔʣʹΑͬͯఏڙ͞ΕΔใΛআ͍ͯɺ ͦΕΒΣϒϖʔδʹԿͷӨڹ༩͑ͳ͍ͱ͍͏ - WAI-ARIA Σϒϖʔδͷߏ DOM
ʹӨڹΛ༩͑ͳ͍͕ɺ CSS ͷཁૉ બͰར༻͢Δ͜ͱ͕Մೳ
ωΠςΟϒͷHTMLػೳͷΈΛ༻ͯ͠ίϯςϯπΛͰ͖Εཧ ͔͠͠HTMLཁૉͷ࣮͕༰қͰͳ͍ෳࡶͳͷͳͲग़ͯ͘Δͱࢥ͏ͷ ͰɺͦͷࡍʹWAI-ARIAΛඞཁͳ߹ͷΈ༻͢Δ
A11YΛҙࣝͨ͠ϑϩϯτΤϯυ։ൃΛߦ͍ͬͯΔਓͱ͓ͤͯ͘͠͞ػձ͕͋ͬͨͷͰ͕͢ɺҎԼͷΑ͏ͳ͜ͱҙ͍ࣝͯ͠Δͦ͏Ͱ͢ - 1ߦͷจࣈ͕ద͔ - font-sizeద͔ - ޫ͕εϚϗͷը໘ʹࣹͨͬͯͨ͠߹ɺݟʹ͘͘ͳΒͳ͍͔ͳͲͳͲͱʹ͔ ͍͘͢ - ϚεΛΘͣʹΩʔϘʔυ͚ͩͰશͯΛૢ࡞Ͱ͖Δ͔
- ϑΥʔϜͰͷϢʔβʔͷλΠϐϯάΛ࠷খݶʹ͑ΒΕΔΑ͏ʹ͢Δ - figmaͰσβΠϯΛ࡞Δࡍʹɺ৭ͷίϯτϥεΛνΣοΫͰ͖ΔπʔϧΛಋೖ͍ͯ͠ Δ - ҎԼͷΑ͏ͳπʔϧͬͨΓͯ͠ɺϑϩϯτΤϯυͷςετʹaccessibilityͷςετΛಋೖ͍ͯ͠Δ - https://www.deque.com/axe/
ଞࣾͷऔΓΈͰࢀߟʹͳΓͦ͏ͳࢿྉͳͲ READYFOR https://speakerdeck.com/3randy9/akusesibiriteiwoyi-shi-sitareactkai-fa UZABASE https://tech.uzabase.com/entry/2021/11/05/142627