Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
読んだ内容まとめてLT会「インクルーシブHTML+CSS&JavaScript」
Search
K.Akoarum
October 11, 2018
Programming
1
690
読んだ内容まとめて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
710
Other Decks in Programming
See All in Programming
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
5
1.9k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
690
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
310
AIコーディングエージェント(Manus)
kondai24
0
160
dnx で実行できるコマンド、作ってみました
tomohisa
0
140
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
140
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
260
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
230
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
6
2.1k
AIコーディングエージェント(skywork)
kondai24
0
150
AI時代もSEOを頑張っている話
shirahama_x
0
270
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
430
Featured
See All Featured
It's Worth the Effort
3n
187
29k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Docker and Python
trallard
47
3.7k
Typedesign – Prime Four
hannesfritz
42
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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 ϑϩϯτΤϯυΔͳΒͬͺΓΠϯΫϧʔγϒ
ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠