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
GraphRAGの仕組みまるわかり
tosuri13
7
480
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
350
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
490
Gleamという選択肢
comamoca
6
760
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
ニーリーにおけるプロダクトエンジニア
nealle
0
340
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
BBQ
matthewcrist
89
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Statistics for Hackers
jakevdp
799
220k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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