Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
660
読んだ内容まとめて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
700
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
エラーって何種類あるの?
kajitack
5
330
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
技術同人誌をMCP Serverにしてみた
74th
1
510
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
690
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Create a website using Spatial Web
akkeylab
0
310
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Invisible Side of Design
smashingmag
300
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
Designing Experiences People Love
moore
142
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Adopting Sorbet at Scale
ufuk
77
9.4k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Six Lessons from altMBA
skipperchong
28
3.9k
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 ϑϩϯτΤϯυΔͳΒͬͺΓΠϯΫϧʔγϒ
ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠