読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」

ΠϯΫϧʔγϒ)5.- $44+BWB4DSJQU 5)6ಡΜͩ಺༰·ͱΊͯ-5ձEFNP

גࣜձࣾαʔΩϡϨʔγϣϯΤϯδχΞ ଜԬɹ݈ਓʢ͚Μͯ͌ʣ 7VFKTɺ3FBDU3FEVYɺΞΫηγϏϦςΟɺ σβΠϯɺϒϩοΫνΣʔϯɺϥϯχϯά !"LPBSVN@, IUUQTXXXBLPBSVNOFU

ΞΫηγϏϦςΟ͚ͩͰͳ͘ɺ શͯͷϢʔβʔΛࢹ໺ʹೖΕͨྑॻ 8FC΍ΔਓΈΜͳʹಡΜͰ΄͍͠ɻ ΞΫηγϏϦςΟք۾ࡾେॻ੶ͷ࡭

ΠϯΫϧʔγϒͱ͸ w แׅతͳɺแؚతͳ w ։์తͳ w ഉଞతʢFYDMVTJWFʣͷରٛޠ ͜͜Ͱ͸ɺಛఆͷਓΛআ֎͠ͳ͍ͷҙຯɻ ˠશͯͷϢʔβʔΛड͚ೖΕΔ͜ͱΛΠϯΫϧʔγϒͰ͋Δͱ͢Δɻ

ΠϯΫϧʔγϒΛֶͿʹ͸ຊ౰ʹྑॻ w ϑΟϧλʔ΢ΟδΣοτͳͲ۩ମతͳ6*ͷ࣮૷ྫΛ঺հ w ༁஫΍ิ଍ͳͲ΋๛෋Ͱͱͯ΋ਂ͘ཧղͰ͖Δ

WJTVBMMZIJEEFO

Α͘ݟ͔͚ΔɺΑ͘΍Δ)5.-ϚʔΫΞοϓ Α͘ͳ͍ϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ</h1> <h2>αϒηΫγϣϯ</h2> ݟग़͠λΠτϧ ʙαϒηΫγϣϯʙ Α͘΍ΔϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ <span class=“sub”>αϒηΫγϣϯ</span></h1>

WJTVBMMZIJEEFOͷ࢖༻ͯ͠ΑΓ໌֬ʹ͢Δ <h1>ݟग़͠λΠτϧ</h1> <p><span class=“visually-hidden”>αϒλΠτϧɿ</span>αϒηΫγϣϯ</p> .visually-hidden { position: absolute; width: 1px;
height: 1px; overﬂow: hidden; clip: rect(1px, 1px, 1px, 1px); } )5.- $44 ݟग़͠λΠτϧ ʙαϒηΫγϣϯʙ

ແݶεΫϩʔϧͷՄ൱

ແݶεΫϩʔϧ͸ઈର/( ͳͥʁ w εΫϩʔϧόʔͷϋϯυϧ͕Ҡಈͯ͠ɺͱͯ΋ෆշͳಈ͖Λ͢Δ w ແݶεΫϩʔϧͷԼʹ͋ΔίϯςϯπʹΞΫηεͰ͖ͳ͍ w ಛʹ5BCΩʔͰϝΠϯίϯςϯπΛൈ͚ΒΕͳ͘ͳͬͯඇৗʹෆշ ୅ସҊ w
ʮ΋ͬͱಡΈࠐΉʯϘλϯʹஔ͖׵͑Δ w ࣗಈಡΈࠐΈΛΦϯʹ͢Δ͔ΛϓϩϯϓτͰਘͶΔ

ϑΥʔϜͷ࣮૷

ϥϕϧ෇͚ <div>ύεϫʔυ</div> <div><input type=“password”></div> ˣ <div><label for=“password”>ύεϫʔυ</label></div> <div><input type=“password” id=“password”></div>
MBCFMཁૉΛ࢖ͬͯϥϕϧͱϑΟʔϧυΛඥ͚ͮΔɻ ౰ͨΓલͷ͜ͱ͚ͩͲɺͰ͖ͯͳ͍αΠτΛΑ͘ݟΔؾ͕͢Δʜ

QMBDFIPMEFSଐੑ <input type=“text” placeholder=“eg. HotStuﬀ666”> σϑΥϧτͩͱάϨʔͰίϯτϥετൺʹ໰୊Λىͨ͜͢Ίɺ $44Λௐ੔͢Δɻ ʢݪஶͰ͸ΠλϦοΫʹ͢Δͱ͋Δ͕ɺ೔ຊޠͰ͸ಡΈʹ͍ͨ͘Ίɺ ผͷํ๏Λݕ౼͢΂͖ʣ ::-webkit-input-placeholder,
::-moz-placeholder, ::placeholder { color: #000; }

ඞਢϑΟʔϧυ ඞਢΛද͢ʮ ʯ΍ʮ˞ʯ͸BSJBIJEEFOʹ͢Δ <label for=“name”>໊લ<span aria-hidden=“true”>※</span></label> ಡΈ্͛ͯ͠·͏͜ͱͰޡղΛ༩͔͑Ͷͳ͍ͨΊɺ ಡΈ্͛ͤ͞ͳ͍Α͏ʹ͢Δɻ BSJBSFRVJSFEଐੑΛ࢖͏ <input
type=“text” name=“name” aria-required=“true”> ݪஶͰ͸SFRVJSFEଐੑͷରԠ͕ෆे෼ͳͨΊɺ BSJBSFRVJSFEଐੑΛ࢖͏͜ͱΛਪ঑͍ͯͨ͠Α͏Ͱ͢ɻ

ύεϫʔυ͸දࣔͰ͖ΔΑ͏ʹ͢Δ දࣔΛͰ͖ΔΑ͏ʹ্ͨ͠Ͱɺύεϫʔυͷ֬ೝ༻ʹ΋͏Ұ౓ ೖྗͤ͞ΔΠϯλʔϑΣΠεΛ΍Ίͤ͞Δɺͱ͍͏͜ͱ΋ɻ +BWB4DSJQUͰUZQFଐੑΛॻ͖׵͑Δ͜ͱͰදࣔͤ͞Δ͜ͱ͕ Ͱ͖ΔͨΊɺ͜ΕΛ࣮૷͢Δɻ ͳ͓ɺ*OUFSOFU&YQMPSFSͱ.JDSPTPGU&EHFʹ͸ ඪ४ػೳͱ࣮ͯ͠૷͞Ε͍ͯΔͨΊɺ཈੍͓ͯ͘͠ඞཁ͕͋Δɻ

ύϑΥʔϚϯεΛҡ࣋͢Δ

ίϯςϯπΛૣ͘දࣔ͢Δ͜ͱ΋ΠϯΫϧʔγϒ w ը૾ͷ࠷దԽ w $44ɺ+BWB4DSJQUͷ࠷దԽɾϛχϑΝΠԽ w ϑΥϯτͷαϒηοτԽ (PPHMF'POUTͷαϒηοτ UFYUύϥϝʔλΛ෇༩͢Δ͜ͱͰඞཁͳจࣈͷϦετΛઃఆͰ͖Δ <link
href=“https://fonts.[লུ]/css?family=Roboto:900&text=ABCDEFG" rel="stylesheet">

͜ͷຊΛಡΜͰࢥͬͨ͜ͱ

w )5.-͸ηϚϯςΟοΫ͕௒ॏཁʂʂ w $44ʢσβΠϯʣ΋σβΠϯੑ͚ͩͰݟͣɺՄಡੑͳͲ΋ҙ ࣝ͢Δ͜ͱ͕େࣄ w ͱʹ͔͋͘ΒΏΔϢʔβʔΛड͚ೖΕΒΕΔίʔσΟϯάΛ  ҙࣝ͢Δʂ w ϑϩϯτΤϯυ΍ΔͳΒ΍ͬͺΓΠϯΫϧʔγϒ΍ 
ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」

読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」

K.Akoarum

More Decks by K.Akoarum

Other Decks in Programming

Featured

Transcript

ΠϯΫϧʔγϒ)5.- $44+BWB4DSJQU 5)6ಡΜͩ಺༰·ͱΊͯ-5ձEFNP

גࣜձࣾαʔΩϡϨʔγϣϯΤϯδχΞ ଜԬɹ݈ਓʢ͚Μͯ͌ʣ 7VFKTɺ3FBDU3FEVYɺΞΫηγϏϦςΟɺ σβΠϯɺϒϩοΫνΣʔϯɺϥϯχϯά !"LPBSVN@, IUUQTXXXBLPBSVNOFU

ΞΫηγϏϦςΟ͚ͩͰͳ͘ɺ શͯͷϢʔβʔΛࢹ໺ʹೖΕͨྑॻ 8FC΍ΔਓΈΜͳʹಡΜͰ΄͍͠ɻ ΞΫηγϏϦςΟք۾ࡾେॻ੶ͷ࡭

ΠϯΫϧʔγϒͱ͸ w แׅతͳɺแؚతͳ w ։์తͳ w ഉଞతʢFYDMVTJWFʣͷରٛޠ ͜͜Ͱ͸ɺಛఆͷਓΛআ֎͠ͳ͍ͷҙຯɻ ˠશͯͷϢʔβʔΛड͚ೖΕΔ͜ͱΛΠϯΫϧʔγϒͰ͋Δͱ͢Δɻ

ΠϯΫϧʔγϒΛֶͿʹ͸ຊ౰ʹྑॻ w ϑΟϧλʔ΢ΟδΣοτͳͲ۩ମతͳ6*ͷ࣮૷ྫΛ঺հ w ༁஫΍ิ଍ͳͲ΋๛෋Ͱͱͯ΋ਂ͘ཧղͰ͖Δ

WJTVBMMZIJEEFO

Α͘ݟ͔͚ΔɺΑ͘΍Δ)5.-ϚʔΫΞοϓ Α͘ͳ͍ϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ</h1> <h2>αϒηΫγϣϯ</h2> ݟग़͠λΠτϧ ʙαϒηΫγϣϯʙ Α͘΍ΔϚʔΫΞοϓ <h1>ݟग़͠λΠτϧ <span class=“sub”>αϒηΫγϣϯ</span></h1>

WJTVBMMZIJEEFOͷ࢖༻ͯ͠ΑΓ໌֬ʹ͢Δ <h1>ݟग़͠λΠτϧ</h1> <p><span class=“visually-hidden”>αϒλΠτϧɿ</span>αϒηΫγϣϯ</p> .visually-hidden { position: absolute; width: 1px;

ແݶεΫϩʔϧͷՄ൱

ແݶεΫϩʔϧ͸ઈର/( ͳͥʁ w εΫϩʔϧόʔͷϋϯυϧ͕Ҡಈͯ͠ɺͱͯ΋ෆշͳಈ͖Λ͢Δ w ແݶεΫϩʔϧͷԼʹ͋ΔίϯςϯπʹΞΫηεͰ͖ͳ͍ w ಛʹ5BCΩʔͰϝΠϯίϯςϯπΛൈ͚ΒΕͳ͘ͳͬͯඇৗʹෆշ ୅ସҊ w

ϑΥʔϜͷ࣮૷

ϥϕϧ෇͚ <div>ύεϫʔυ</div> <div><input type=“password”></div> ˣ <div><label for=“password”>ύεϫʔυ</label></div> <div><input type=“password” id=“password”></div>

QMBDFIPMEFSଐੑ <input type=“text” placeholder=“eg. HotStuﬀ666”> σϑΥϧτͩͱάϨʔͰίϯτϥετൺʹ໰୊Λىͨ͜͢Ίɺ $44Λௐ੔͢Δɻ ʢݪஶͰ͸ΠλϦοΫʹ͢Δͱ͋Δ͕ɺ೔ຊޠͰ͸ಡΈʹ͍ͨ͘Ίɺ ผͷํ๏Λݕ౼͢΂͖ʣ ::-webkit-input-placeholder,

ඞਢϑΟʔϧυ ඞਢΛද͢ʮ ʯ΍ʮ˞ʯ͸BSJBIJEEFOʹ͢Δ <label for=“name”>໊લ<span aria-hidden=“true”>※</span></label> ಡΈ্͛ͯ͠·͏͜ͱͰޡղΛ༩͔͑Ͷͳ͍ͨΊɺ ಡΈ্͛ͤ͞ͳ͍Α͏ʹ͢Δɻ BSJBSFRVJSFEଐੑΛ࢖͏ <input

ύϑΥʔϚϯεΛҡ࣋͢Δ

ίϯςϯπΛૣ͘දࣔ͢Δ͜ͱ΋ΠϯΫϧʔγϒ w ը૾ͷ࠷దԽ w $44ɺ+BWB4DSJQUͷ࠷దԽɾϛχϑΝΠԽ w ϑΥϯτͷαϒηοτԽ (PPHMF'POUTͷαϒηοτ UFYUύϥϝʔλΛ෇༩͢Δ͜ͱͰඞཁͳจࣈͷϦετΛઃఆͰ͖Δ <link

͜ͷຊΛಡΜͰࢥͬͨ͜ͱ

w )5.-͸ηϚϯςΟοΫ͕௒ॏཁʂʂ w $44ʢσβΠϯʣ΋σβΠϯੑ͚ͩͰݟͣɺՄಡੑͳͲ΋ҙ ࣝ͢Δ͜ͱ͕େࣄ w ͱʹ͔͋͘ΒΏΔϢʔβʔΛड͚ೖΕΒΕΔίʔσΟϯάΛ  ҙࣝ͢Δʂ w ϑϩϯτΤϯυ΍ΔͳΒ΍ͬͺΓΠϯΫϧʔγϒ΍

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠