Tweet
Tweet

Slide 1

Slide 1 text

Accessibility(A11Y)ʹڵຯ͕ग़͖ͯͨ ͱ͍͏࿩ ken

Slide 2

Slide 2 text

ͱ͋Δ೔.... 
 εʔύʔϑΝϛίϯ࣌୅ͷ΀Α΀ΑΛϓϨΠ͍ͯ͠·ͨ͠ https://www.nintendo.co.jp/software/feature/nintendo-classics/detail/index.html?vcid=S-2020_j

Slide 3

Slide 3 text

͏ʔΜ.. 
 ྘৭΀Αͱԫ৭΀Α͕ݟ෼͚ʹ͍͘.....

Slide 4

Slide 4 text

͋ɺͦ͏ͩࣗ෼ɺઌఱੑͷ৭֮ଟ༷ੑͩͬͨ...ʂ - ೔ຊਓஉੑͷ5% (20ਓʹ1໊)ɺԤถͷനਓஉੑͷ8ʙ10%͕৭֮ଟ༷ੑͰ͋ ΔΒ͍͠Ͱ͢ - ৭֮ଟ༷ੑͱ͸ɺҎલ͸ʮ৭໡ʯʮ৭ऑʯʮ৭֮ҟৗʯͱݺ͹Ε͍ͯͨɺਓ ʹΑͬͯ৭ͷݟ͑ํ͕গ͠ҟͳΔ঱ঢ়Ͱ͢ - 2017೥͔Β೔ຊҨ఻ֶձͷ༻ޠվగͰʮ৭֮ଟ༷ੑʯͱݺ͹ΕΔΑ͏ʹͳΓ ·ͨ͠ - ࣗ෼͸΀Α΀ΑҎ֎ಛʹෆศΛײ͡Δ͜ͱ͸ͳ͍Ͱ͢

Slide 5

Slide 5 text

ͳΔ΄Ͳ... ͦ͏ͩͬͨͷ͔ʂ https://game.watch.impress.co.jp/docs/news/1307205.html

Slide 6

Slide 6 text

࿕ใʂ 2020೥ͷ9݄຤ʹ 
 େ෯Ξοϓσʔτ͞Ε͍ͯ·ͨ͠ʂ https://twitter.com/sega_official/status/1310420274257391616

Slide 7

Slide 7 text

΋ͷͮ͘ΓΛ͢Δʹ͋ͨͬͯɺ৭Μͳਓͷ͜ͱΛߟྀ͠ͳ͍ͱ͍͚ͳ͍ʂ ͦ͏͍͑͹A11Yͱ͍͏ݴ༿લ͔ΒΑ͘ฉ͘Α͏ͳ... Α͠ௐ΂ͯΈΑ͏

Slide 8

Slide 8 text

Web Accessibility (ΞΫηγϏϦςΟ)ͱ͸ WebΞΫηγϏϦςΟ͸ɺ਎ମతٴͼٕज़తͳ੍໿ʹΑΒͣɺWebαΠτΛ࢖͍΍͢ ͘อͭͨΊͷϕετϓϥΫςΟεͰ͢ɻ WebΞΫηγϏϦςΟ͸W3Cͱ͍͏΢Σϒʹؔ͢Δϧʔϧ΍࿮૊ΈΛ੔උ͢Δࠃࡍஂ ମͷWeb Accessibility Initiative(WAI)ʹΑͬͯඪ४Խͱٞ࿦͕͞Ε͍ͯ·͢ɻ https://developer.mozilla.org/ja/docs/Glossary/Accessibility

Slide 9

Slide 9 text

ͭ·Γ... ݸਓͷ਎ମతɺೝ஌తೳྗ΍΢Σϒ΁ͷΞΫηεํ๏ʹؔΘΒͣɺՄೳͳݶΓΞΫη εՄೳͳίϯςϯπΛ։ൃ͢Δ͜ͱʂʂ ͜ͷݴ༿Χοί͍͍Ͷ.. > 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

Slide 10

Slide 10 text

ܾͯ͠ԿΒ͔ͷϋϯσΟΩϟοϓΛ࣋ͭਓʑͷͨΊͷ΋ͷ͚ͩͰ͸ͳ͍ ݱࡏ͸ϞόΠϧσόΠε΍஗͍ωοτϫʔΫΛར༻͍ͯ͠ΔਓʑͷͨΊͷ΋ͷͰ΋͋Δ ߟ͑Δ΂͖͜ͱ͸ଟ͍ ͚Ͳ·ͣ͸HTMLʂ

Slide 11

Slide 11 text

ҙຯతͳ(ηϚϯςΟοΫ)ͳHTMLΛ࢖͏͜ͱ͕େࣄʂ Ͱ͖ΔݶΓɺ૬Ԡ͍͠HTMLཁૉΛ;͞Θ͍͠໨తʹ࢖͏͜ͱΛҙࣝ͢Δ - buttonλάΛ࢖͏ͱɺಉ࢜ͷؒΛλϒͰҠಈͰ͖ͨΓɺϦλʔϯɾΤϯλʔͰbuttonΛΞΫςΟϒʹ Ͱ͖ͨΓ - ਖ਼͍͠λάΛ࢖͍ͬͯΔ͚ͩͰɺ͋ΔछλμͰ৭ΜͳػೳΛखʹೖΕΒΕΔʂ - εΫϦʔϯϦʔμʔ͕ίϯςϯπΛͲ͏ಡΈ্͍͛ͯ͘ͷ͔Λҙࣝ͢Δͱྑ͍ - imgͷaltଐੑͱ͔͖ͬͪΓॻ͜͏ ଟ͗͢ΔͷͰ৭ʑׂѪ.. ৄࡉ͸ͪ͜ΒΛ https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML

Slide 12

Slide 12 text

CSSͱJSʹΑͬͯΞΫηγϏϦςΟΛଛͳΘͳ͍Α͏ʹ͢Δʂ - ྫ͑͹ htmlͰ
λΠτϧ
ͱॻ͖ɺͦΕʹରͯ͠CSSͰλΠτϧͬΆ͘ݟͤΔΑ͏ʹ͢Δͷ͸NG - ࢹ্֮͸λΠτϧͬΆ͘ݟ͑Δ͕ɺϦʔμʔ͕ಡΈ্͛ͨ࣌ʹ͸λΠτϧͱೝࣝ͞Εͳ͍ͷͰɺCSSͷ͍ͤͰΑΓࠞཚ͕ىͬͯ͜ ͍Δ -

λΠτϧ

ͱॻ͘ʂ - Colorʹؔͯ͠ - ৭ͷίϯτϥενΣοΫπʔϧ͕͋Δ͔Β࢖͏ʂhttps://webaim.org/resources/contrastchecker/ - গͳ͘ͱ΋4.5 : 1ͷίϯτϥετ͕ඞཁ - Ϛ΢εʹಛ༗ͷΠϕϯτʹ͍ͭͯ - mouseover΍mouseoutɺdblclickͳͲͷΠϕϯτͷΈʹରԠ͍ͯ͠ΔͱɺΩʔϘʔυͷΈͷϢʔβʔʹର͢ΔΞΫηγϏϦςΟΛଛ ͳ͏ɻͦ͏͍ͬͨ৔߹͸focus΍blurͳͲͷΠϕϯτʹ΋ରԠ͠ɺೋॏʹରԠ͢ΔΑ͏ʹ͢Δ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Chrome͕৭ͷఏҊ·Ͱͯ͘͠ΕΔ...ʂ

Slide 15

Slide 15 text

WAI-ARIAʹ͍ͭͯ WAI-ARIA͸W3CʹΑͬͯఆΊΒΕͨ࢓༷Ͱɺཁૉʹద༻Ͱ͖Δ௥Ճͷҙຯ࿦Λఏڙ͢ΔҰ࿈ͷ 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

Slide 16

Slide 16 text

- WAI-ARIA ଐੑͷॏཁͳ఺͸ɺϒϥ΢βʔͷΞΫηγϏϦςΟ APIʢεΫϦʔ ϯϦʔμʔ͸͔͜͜Β৘ใΛऔಘ͢ΔʣʹΑͬͯఏڙ͞ΕΔ৘ใΛআ͍ͯɺ ͦΕΒ͸΢ΣϒϖʔδʹԿͷӨڹ΋༩͑ͳ͍ͱ͍͏఺ - WAI-ARIA ͸΢Σϒϖʔδͷߏ଄΍ DOM ʹӨڹΛ༩͑ͳ͍͕ɺ CSS ͷཁૉ બ୒Ͱར༻͢Δ͜ͱ͕Մೳ

Slide 17

Slide 17 text


 ωΠςΟϒͷHTMLػೳͷΈΛ࢖༻ͯ͠ίϯςϯπΛ׬੒Ͱ͖Ε͹ཧ૝ ͔͠͠HTMLཁૉ΁ͷ࣮૷͕༰қͰ͸ͳ͍ෳࡶͳ΋ͷͳͲ΋ग़ͯ͘Δͱࢥ͏ͷ ͰɺͦͷࡍʹWAI-ARIAΛඞཁͳ৔߹ͷΈ࢖༻͢Δ

Slide 18

Slide 18 text

A11YΛҙࣝͨ͠ϑϩϯτΤϯυ։ൃΛߦ͍ͬͯΔਓͱ͓࿩ͤͯ͠͞௖͘ػձ͕͋ͬͨͷͰ͕͢ɺҎԼͷΑ͏ͳ͜ͱ͸ҙ͍ࣝͯ͠Δͦ͏Ͱ͢ - 1ߦͷจࣈ਺͕ద੾͔ - font-size͸ద੾͔ - ೔ޫ͕εϚϗͷը໘ʹ౰ͨͬͯ൓ࣹͨ͠৔߹ɺݟʹ͘͘ͳΒͳ͍͔ͳͲͳͲͱʹ͔ ͘࢖͍౗͢ - Ϛ΢εΛ࢖ΘͣʹΩʔϘʔυ͚ͩͰશͯΛૢ࡞Ͱ͖Δ͔ - ϑΥʔϜͰͷϢʔβʔͷλΠϐϯάΛ࠷খݶʹ཈͑ΒΕΔΑ͏ʹ͢Δ - figmaͰσβΠϯΛ࡞Δࡍʹɺ৭ͷίϯτϥεΛνΣοΫͰ͖ΔπʔϧΛಋೖ͍ͯ͠ Δ - ҎԼͷΑ͏ͳπʔϧ࢖ͬͨΓͯ͠ɺϑϩϯτΤϯυͷςετʹ΋accessibilityͷςετΛಋೖ͍ͯ͠Δ - https://www.deque.com/axe/

Slide 19

Slide 19 text

ଞࣾͷऔΓ૊ΈͰࢀߟʹͳΓͦ͏ͳࢿྉͳͲ READYFOR https://speakerdeck.com/3randy9/akusesibiriteiwoyi-shi-sitareactkai-fa UZABASE https://tech.uzabase.com/entry/2021/11/05/142627