Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」
K.Akoarum
October 11, 2018
Programming
1
440
読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」
2018.10.11の「読んだ内容まとめてLT会」の発表資料です。
K.Akoarum
October 11, 2018
Tweet
Share
More Decks by K.Akoarum
See All by K.Akoarum
Webアクセシビリティを意識したマークアップ
akoarum
1
550
Other Decks in Programming
See All in Programming
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
9
4.1k
What's new in Android development tools まとめ
mkeeda
0
410
ES2022の新機能
smt7174
0
280
AWS Config Custom Rule、ノーコードでできるかな?
watany
0
110
Jetpack Composeでの画面遷移
iwata_n
0
200
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
200
Independently together: better developer experience & App performance
bcinarli
0
190
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
170
Licences open source : entre guerre de clochers et radicalité
pylapp
2
510
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
2k
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
For a Future-Friendly Web
brad_frost
166
7.4k
The Language of Interfaces
destraynor
148
20k
The Cult of Friendly URLs
andyhume
68
4.8k
Music & Morning Musume
bryan
35
4.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Agile that works and the tools we love
rasmusluckow
319
19k
Design by the Numbers
sachag
271
17k
Done Done
chrislema
174
14k
Ruby is Unlike a Banana
tanoku
91
9.2k
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;
height: 1px; overflow: 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. HotStuff666”> σϑΥϧτͩͱάϨʔͰίϯτϥετൺʹΛىͨ͜͢Ίɺ $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 ϑϩϯτΤϯυΔͳΒͬͺΓΠϯΫϧʔγϒ
ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠