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
110
Laravelに入門してみた
segamiken
0
98
Other Decks in Programming
See All in Programming
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
220
Kiroで始めるAI-DLC
kaonash
2
520
TanStack DB ~状態管理の新しい考え方~
bmthd
2
430
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
140
1から理解するWeb Push
dora1998
2
410
Testing Trophyは叫ばない
toms74209200
0
340
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
250
🔨 小さなビルドシステムを作る
momeemt
3
640
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.7k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
個人軟體時代
ethanhuang13
0
290
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Facilitating Awesome Meetings
lara
55
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Invisible Side of Design
smashingmag
301
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Practical Orchestrator
shlominoach
190
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Producing Creativity
orderedlist
PRO
347
40k
Rails Girls Zürich Keynote
gr2m
95
14k
GitHub's CSS Performance
jonrohan
1032
460k
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