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
97
Accessibilityに興味が出てきた話
ken
December 17, 2021
Tweet
Share
More Decks by ken
See All by ken
リリース済にも関わらず何のドキュメントもなかったシステムの仕様書を書いてみた話
segamiken
0
83
Laravelに入門してみた
segamiken
0
64
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
オブジェクトしこう
okuramasafumi
2
130
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
TCA魔法学入門🪄
dazy
0
280
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
2.9k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
150
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
Featured
See All Featured
Designing with Data
zakiwarfel
94
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Documentation Writing (for coders)
carmenintech
59
3.8k
The Language of Interfaces
destraynor
150
22k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Building an army of robots
kneath
300
41k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Bash Introduction
62gerente
604
210k
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