Accessibilityに興味が出てきた話

Transcript

1. Accessibility(A11Y)ʹڵຯ͕ग़͖ͯͨ ͱ͍͏࿩ ken
2. ͱ͋Δ೔.... 
 εʔύʔϑΝϛίϯ࣌୅ͷ΀Α΀ΑΛϓϨΠ͍ͯ͠·ͨ͠ https://www.nintendo.co.jp/software/feature/nintendo-classics/detail/index.html?vcid=S-2020_j
3. ͏ʔΜ.. 
 ྘৭΀Αͱԫ৭΀Α͕ݟ෼͚ʹ͍͘.....
4. ͋ɺͦ͏ͩࣗ෼ɺઌఱੑͷ৭֮ଟ༷ੑͩͬͨ...ʂ - ೔ຊਓஉੑͷ5% (20ਓʹ1໊)ɺԤถͷനਓஉੑͷ8ʙ10%͕৭֮ଟ༷ੑͰ͋ ΔΒ͍͠Ͱ͢ - ৭֮ଟ༷ੑͱ͸ɺҎલ͸ʮ৭໡ʯʮ৭ऑʯʮ৭֮ҟৗʯͱݺ͹Ε͍ͯͨɺਓ ʹΑͬͯ৭ͷݟ͑ํ͕গ͠ҟͳΔ঱ঢ়Ͱ͢ - 2017೥͔Β೔ຊҨ఻ֶձͷ༻ޠվగͰʮ৭֮ଟ༷ੑʯͱݺ͹ΕΔΑ͏ʹͳΓ ·ͨ͠ - ࣗ෼͸΀Α΀ΑҎ֎ಛʹෆศΛײ͡Δ͜ͱ͸ͳ͍Ͱ͢
5. ͳΔ΄Ͳ... ͦ͏ͩͬͨͷ͔ʂ https://game.watch.impress.co.jp/docs/news/1307205.html
6. ࿕ใʂ 2020೥ͷ9݄຤ʹ 
 େ෯Ξοϓσʔτ͞Ε͍ͯ·ͨ͠ʂ https://twitter.com/sega_official/status/1310420274257391616
7. ΋ͷͮ͘ΓΛ͢Δʹ͋ͨͬͯɺ৭Μͳਓͷ͜ͱΛߟྀ͠ͳ͍ͱ͍͚ͳ͍ʂ ͦ͏͍͑͹A11Yͱ͍͏ݴ༿લ͔ΒΑ͘ฉ͘Α͏ͳ... Α͠ௐ΂ͯΈΑ͏
8. Web Accessibility (ΞΫηγϏϦςΟ)ͱ͸ WebΞΫηγϏϦςΟ͸ɺ਎ମతٴͼٕज़తͳ੍໿ʹΑΒͣɺWebαΠτΛ࢖͍΍͢ ͘อͭͨΊͷϕετϓϥΫςΟεͰ͢ɻ WebΞΫηγϏϦςΟ͸W3Cͱ͍͏΢Σϒʹؔ͢Δϧʔϧ΍࿮૊ΈΛ੔උ͢Δࠃࡍஂ ମͷWeb Accessibility Initiative(WAI)ʹΑͬͯඪ४Խͱٞ࿦͕͞Ε͍ͯ·͢ɻ https://developer.mozilla.org/ja/docs/Glossary/Accessibility
9. ͭ·Γ... ݸਓͷ਎ମతɺೝ஌తೳྗ΍΢Σϒ΁ͷΞΫηεํ๏ʹؔΘΒͣɺՄೳͳݶΓΞΫη εՄೳͳίϯςϯπΛ։ൃ͢Δ͜ͱʂʂ ͜ͷݴ༿Χοί͍͍Ͷ.. > 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
10. ܾͯ͠ԿΒ͔ͷϋϯσΟΩϟοϓΛ࣋ͭਓʑͷͨΊͷ΋ͷ͚ͩͰ͸ͳ͍ ݱࡏ͸ϞόΠϧσόΠε΍஗͍ωοτϫʔΫΛར༻͍ͯ͠ΔਓʑͷͨΊͷ΋ͷͰ΋͋Δ ߟ͑Δ΂͖͜ͱ͸ଟ͍ ͚Ͳ·ͣ͸HTMLʂ
11. ҙຯతͳ(ηϚϯςΟοΫ)ͳHTMLΛ࢖͏͜ͱ͕େࣄʂ Ͱ͖ΔݶΓɺ૬Ԡ͍͠HTMLཁૉΛ;͞Θ͍͠໨తʹ࢖͏͜ͱΛҙࣝ͢Δ - buttonλάΛ࢖͏ͱɺ<button>ಉ࢜ͷؒΛλϒͰҠಈͰ͖ͨΓɺϦλʔϯɾΤϯλʔͰbuttonΛΞΫςΟϒʹ Ͱ͖ͨΓ - ਖ਼͍͠λάΛ࢖͍ͬͯΔ͚ͩͰɺ͋ΔछλμͰ৭ΜͳػೳΛखʹೖΕΒΕΔʂ - εΫϦʔϯϦʔμʔ͕ίϯςϯπΛͲ͏ಡΈ্͍͛ͯ͘ͷ͔Λҙࣝ͢Δͱྑ͍ - imgͷaltଐੑͱ͔͖ͬͪΓॻ͜͏ ଟ͗͢ΔͷͰ৭ʑׂѪ.. ৄࡉ͸ͪ͜ΒΛ https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
12. CSSͱJSʹΑͬͯΞΫηγϏϦςΟΛଛͳΘͳ͍Α͏ʹ͢Δʂ - ྫ͑͹ htmlͰ<div>λΠτϧ</div>ͱॻ͖ɺͦΕʹରͯ͠CSSͰλΠτϧͬΆ͘ݟͤΔΑ͏ʹ͢Δͷ͸NG - ࢹ্֮͸λΠτϧͬΆ͘ݟ͑Δ͕ɺϦʔμʔ͕ಡΈ্͛ͨ࣌ʹ͸λΠτϧͱೝࣝ͞Εͳ͍ͷͰɺCSSͷ͍ͤͰΑΓࠞཚ͕ىͬͯ͜ ͍Δ - <h1>λΠτϧ</h1>ͱॻ͘ʂ - Colorʹؔͯ͠ - ৭ͷίϯτϥενΣοΫπʔϧ͕͋Δ͔Β࢖͏ʂhttps://webaim.org/resources/contrastchecker/ - গͳ͘ͱ΋4.5 : 1ͷίϯτϥετ͕ඞཁ - Ϛ΢εʹಛ༗ͷΠϕϯτʹ͍ͭͯ - mouseover΍mouseoutɺdblclickͳͲͷΠϕϯτͷΈʹରԠ͍ͯ͠ΔͱɺΩʔϘʔυͷΈͷϢʔβʔʹର͢ΔΞΫηγϏϦςΟΛଛ ͳ͏ɻͦ͏͍ͬͨ৔߹͸focus΍blurͳͲͷΠϕϯτʹ΋ରԠ͠ɺೋॏʹରԠ͢ΔΑ͏ʹ͢Δ
14. Chrome͕৭ͷఏҊ·Ͱͯ͘͠ΕΔ...ʂ
15. 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
16. - WAI-ARIA ଐੑͷॏཁͳ఺͸ɺϒϥ΢βʔͷΞΫηγϏϦςΟ APIʢεΫϦʔ ϯϦʔμʔ͸͔͜͜Β৘ใΛऔಘ͢ΔʣʹΑͬͯఏڙ͞ΕΔ৘ใΛআ͍ͯɺ ͦΕΒ͸΢ΣϒϖʔδʹԿͷӨڹ΋༩͑ͳ͍ͱ͍͏఺ - WAI-ARIA ͸΢Σϒϖʔδͷߏ଄΍ DOM ʹӨڹΛ༩͑ͳ͍͕ɺ CSS ͷཁૉ બ୒Ͱར༻͢Δ͜ͱ͕Մೳ
17. 
 ωΠςΟϒͷHTMLػೳͷΈΛ࢖༻ͯ͠ίϯςϯπΛ׬੒Ͱ͖Ε͹ཧ૝ ͔͠͠HTMLཁૉ΁ͷ࣮૷͕༰қͰ͸ͳ͍ෳࡶͳ΋ͷͳͲ΋ग़ͯ͘Δͱࢥ͏ͷ ͰɺͦͷࡍʹWAI-ARIAΛඞཁͳ৔߹ͷΈ࢖༻͢Δ
18. A11YΛҙࣝͨ͠ϑϩϯτΤϯυ։ൃΛߦ͍ͬͯΔਓͱ͓࿩ͤͯ͠͞௖͘ػձ͕͋ͬͨͷͰ͕͢ɺҎԼͷΑ͏ͳ͜ͱ͸ҙ͍ࣝͯ͠Δͦ͏Ͱ͢ - 1ߦͷจࣈ਺͕ద੾͔ - font-size͸ద੾͔ - ೔ޫ͕εϚϗͷը໘ʹ౰ͨͬͯ൓ࣹͨ͠৔߹ɺݟʹ͘͘ͳΒͳ͍͔ͳͲͳͲͱʹ͔ ͘࢖͍౗͢ - Ϛ΢εΛ࢖ΘͣʹΩʔϘʔυ͚ͩͰશͯΛૢ࡞Ͱ͖Δ͔ - ϑΥʔϜͰͷϢʔβʔͷλΠϐϯάΛ࠷খݶʹ཈͑ΒΕΔΑ͏ʹ͢Δ - figmaͰσβΠϯΛ࡞Δࡍʹɺ৭ͷίϯτϥεΛνΣοΫͰ͖ΔπʔϧΛಋೖ͍ͯ͠ Δ - ҎԼͷΑ͏ͳπʔϧ࢖ͬͨΓͯ͠ɺϑϩϯτΤϯυͷςετʹ΋accessibilityͷςετΛಋೖ͍ͯ͠Δ - https://www.deque.com/axe/
19. ଞࣾͷऔΓ૊ΈͰࢀߟʹͳΓͦ͏ͳࢿྉͳͲ READYFOR https://speakerdeck.com/3randy9/akusesibiriteiwoyi-shi-sitareactkai-fa UZABASE https://tech.uzabase.com/entry/2021/11/05/142627