Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibilityに興味が出てきた話

ken
December 17, 2021

 Accessibilityに興味が出てきた話

ken

December 17, 2021
Tweet

More Decks by ken

Other Decks in Programming

Transcript

  1. ͭ·Γ... ݸਓͷ਎ମతɺೝ஌తೳྗ΍΢Σϒ΁ͷΞΫηεํ๏ʹؔΘΒͣɺՄೳͳݶΓΞΫη εՄೳͳίϯςϯπΛ։ൃ͢Δ͜ͱʂʂ ͜ͷݴ༿Χοί͍͍Ͷ.. > 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
  2. CSSͱJSʹΑͬͯΞΫηγϏϦςΟΛଛͳΘͳ͍Α͏ʹ͢Δʂ - ྫ͑͹ htmlͰ<div>λΠτϧ</div>ͱॻ͖ɺͦΕʹରͯ͠CSSͰλΠτϧͬΆ͘ݟͤΔΑ͏ʹ͢Δͷ͸NG - ࢹ্֮͸λΠτϧͬΆ͘ݟ͑Δ͕ɺϦʔμʔ͕ಡΈ্͛ͨ࣌ʹ͸λΠτϧͱೝࣝ͞Εͳ͍ͷͰɺCSSͷ͍ͤͰΑΓࠞཚ͕ىͬͯ͜ ͍Δ - <h1>λΠτϧ</h1>ͱॻ͘ʂ -

    Colorʹؔͯ͠ - ৭ͷίϯτϥενΣοΫπʔϧ͕͋Δ͔Β࢖͏ʂhttps://webaim.org/resources/contrastchecker/ - গͳ͘ͱ΋4.5 : 1ͷίϯτϥετ͕ඞཁ - Ϛ΢εʹಛ༗ͷΠϕϯτʹ͍ͭͯ - mouseover΍mouseoutɺdblclickͳͲͷΠϕϯτͷΈʹରԠ͍ͯ͠ΔͱɺΩʔϘʔυͷΈͷϢʔβʔʹର͢ΔΞΫηγϏϦςΟΛଛ ͳ͏ɻͦ͏͍ͬͨ৔߹͸focus΍blurͳͲͷΠϕϯτʹ΋ରԠ͠ɺೋॏʹରԠ͢ΔΑ͏ʹ͢Δ
  3. A11YΛҙࣝͨ͠ϑϩϯτΤϯυ։ൃΛߦ͍ͬͯΔਓͱ͓࿩ͤͯ͠͞௖͘ػձ͕͋ͬͨͷͰ͕͢ɺҎԼͷΑ͏ͳ͜ͱ͸ҙ͍ࣝͯ͠Δͦ͏Ͱ͢ - 1ߦͷจࣈ਺͕ద੾͔ - font-size͸ద੾͔ - ೔ޫ͕εϚϗͷը໘ʹ౰ͨͬͯ൓ࣹͨ͠৔߹ɺݟʹ͘͘ͳΒͳ͍͔ͳͲͳͲͱʹ͔ ͘࢖͍౗͢ - Ϛ΢εΛ࢖ΘͣʹΩʔϘʔυ͚ͩͰશͯΛૢ࡞Ͱ͖Δ͔

    - ϑΥʔϜͰͷϢʔβʔͷλΠϐϯάΛ࠷খݶʹ཈͑ΒΕΔΑ͏ʹ͢Δ - figmaͰσβΠϯΛ࡞Δࡍʹɺ৭ͷίϯτϥεΛνΣοΫͰ͖ΔπʔϧΛಋೖ͍ͯ͠ Δ - ҎԼͷΑ͏ͳπʔϧ࢖ͬͨΓͯ͠ɺϑϩϯτΤϯυͷςετʹ΋accessibilityͷςετΛಋೖ͍ͯ͠Δ - https://www.deque.com/axe/