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
680
読んだ内容まとめて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
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
Introduce Hono CLI
yusukebe
6
3.1k
CSC509 Lecture 06
javiergs
PRO
0
270
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
品質ワークショップをやってみた
nealle
0
640
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
One Enishi After Another
snoozer05
PRO
0
160
Devoxx BE - Local Development in the AI Era
kdubois
0
140
AkarengaLT vol.38
hashimoto_kei
1
120
理論と実務のギャップを超える
eycjur
0
180
Featured
See All Featured
Bash Introduction
62gerente
615
210k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Thoughts on Productivity
jonyablonski
70
4.9k
Writing Fast Ruby
sferik
630
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
KATA
mclloyd
PRO
32
15k
How STYLIGHT went responsive
nonsquared
100
5.9k
Designing Experiences People Love
moore
142
24k
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 ϑϩϯτΤϯυΔͳΒͬͺΓΠϯΫϧʔγϒ
ΞΫηγϏϦςΟͳͲΛҙ͍͖͍ࣝͯͨ͠ʜʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠