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
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
570
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
100
WindowInsetsだってテストしたい
ryunen344
1
220
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
730
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
PipeCDのプラグイン化で目指すところ
warashi
1
240
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
4
270
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
440
C++20 射影変換
faithandbrave
0
560
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Making Projects Easy
brettharned
116
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Music & Morning Musume
bryan
46
6.6k
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