HTML・CSS勉強会１

Gino inc. でやったHTML・CSS勉強会です。

アクセシビリティ(a11y)について話しました。

元のキーノートはここ
https://github.com/rhythm191/html-conference-in-gino

Transcript

1. )5.-ɾ$44ษڧձ̍ ΞΫηγϏϦςΟ BZ ฤ
   (JOP
   JOD
   ۚݪ
2. ໨ඪ஋ ΞΫηγϏϦςΟͬͯॏཁ 8$"(
   8"*"3*"
   ΞΫηγϏϦςΟπϦʔ
   ηϚϯςΟοΫ
   ΠϯΫϧʔγϒ
   ΞϑΥʔμϯε
   ίϯτϥετ
   
3. ͍͍)5.-ͬͯʁ
4. ແݶʹબ୒ࢶ͕͋Δ )5.-
5. ྫ͑͹͜ͷϘλϯ
6. Ͳ͏ͱͰ΋ͳΔ
7. ͜Μͳͷઈର͓͔͍͠Α w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍
   w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ μʔ
   w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍
   w ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍
   w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍
8. શ෦ΞΫηγϏϦςΟͷ࿩ w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍
   w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ μʔ
   w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍
   w ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍
   w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍ ώϡʔϚϯϦʔμϏϦςΟ ΩʔϘʔυΞΫηγϏϦςΟ ϞόΠϧΞΫηγϏϦςΟ ϚγϯϦʔμϏϦςΟ
9. ͦ΋ͦ΋BZͱ͸ʁ w Ͱ͖ΔݶΓଟ͘ͷਓʹ࢖ͬͯ΋Β͑ΔΑ͏ʹ͢Δ͜ͱ
   w ϋϯσΟΩϟοϓΛ͍࣋ͬͯΔਓ
   w ਓؒҎ֎ ݕࡧΤʔδΣϯτɺεΫϨΠϐϯά
   w ϞόΠϧσόΠε
   w ஗͍ωοτϫʔΫ
   w ΑΓߴੑೳͳ୺຤
10. ϦϯΫ͸ͳͥ੨৭ͳͷ͔ʁ
11. ৭֮ಛੑͷͨΊͷBZ
12. $5"ʹ΋Өڹ͢Δ w എܠ৭ͱϘλϯ৭ͷ߹ΘͤํͰݟ΍͕͢͞มΘΔ
13. ೔ຊͷ৭֮ಛੑ૚ ஍Ҭ உੑ ঁੑ ೔ຊ   Ԥถ ʙ  ΞϑϦΧ ʙ ΞΫηεͨ͠ਓͷ͕ԠืϘλϯΛೝࣝͰ͖ͳ͍ʁ
14. ੈքͷBZ w BZͷ୲อ͸๏཯ͰఆΊΒΕ͍ͯΔ஍Ҭ΋͋Δ
    w &6
    &/
    
    
    w ถࠃ
    ϦϋϏϦςʔγϣϯ๏
    w ӳࠃ
    ΞΫηγϏϦςΟنଇ
    w ߽भ
    ো֕ऀࠩผېࢭ๏
15. ถࠃͷBZͷૌুࣄྫ਺      ೥ ೥  
16. BZ͕௿͍ͱ·͍ͣੈք͕ དྷΔ͔΋͠Εͳ͍ ҰମͲ͜ͷαΠτͳΜͩʁ
17. BZ
    
    ΞΫηεͨ͠શ͕ͯର৅ w ো͕͍ऀ͚͕ͩλʔήοτ૚Ͱ͸ͳ͍
    w ϞόΠϧ୺຤Ͱ1$αΠτ͕ݟ͑ͳ͔ͬͨΓ
    w l͜ͷίϯςϯπ͸͓ॅ·͍ͷ஍ҬͰ͸࢖༻Ͱ͖·ͤΜz
18. ςΩετը૾ͷฐ֐ &OHMJTI
    0,
19. ΞΫηεͯ͘͠Δ
    શͯͷϢʔβʔ͕ର৅
20. ΞΫηγϏϦςΟͬͯॏཁ
21. BZΛҙࣝͨ͠։ൃ Ͱ͖ΔݶΓ;͞Θ͍͠ )5.-Λॻ͘ ཧղՄೳ
    ϑΥʔΧε
    ίϯτϥετ
    ςΩεταΠζ
    ΩʔϘʔυΞΫηε
    ༧ଌՄೳ
    
22. Ͱ͖ΔݶΓ;͞Θ͍͠)5.- w Ͱ͖ΔݶΓηϚϯςΟοΫʹ͔͘
    w IFBEFS
    GPPUFS
    NBJO
    BSUJDMF
    OBW
    w FN
    TUSPOH
    DJUF
    BEESFTTʜ
    w ͪΌΜͱΠϯλϥΫτͰ͖ΔΑ͏ʹ͢Δ
    w CVUUPOͱ͔MJOLʹIPWFS
    GPDVT
    BDUJWFͱ͔ʜ
    w 8"*"3*"Ͱิ଍͢Δ
23. ΞΫηγϏϦςΟπϦʔ w %0.ͱ̍ର̍Ͱ࡞੒͞ΕΔɻ
    w ̐ͭͷ৘ใΛ࣋ͭ
    w SPMF
    ໾ׂ΍छྨΛද͢ TFBDI
    OBWJHBUJPOͱ͔
    w OBNF
    ϥϕϦϯάཁૉ ྫɿύϯͣ͘Ϧετ
    w WBMVF
    w TUBUF
24. 8"*"3&"ͱ͔ w )5.-͚ͩͰ͸ҙຯ෇͚Ͱ͖ͳ͍෦෼Λิ͏΋ͷ
    w ͱΓ͋͑ͣࠓճ͸͚̏ͭͩ঺հ
    w SPMF
    w BSJBMBCFM
    w BSJBIJEEFO BSJBDPOUSPMT
    BSJBIBTQPQVQ
    BSJBMJWF
    BSJBEFTDSJCFECZ
    BSJBBUPNJD
    BSJBCVTZ
    
25. SPMF w λάʹରͯ͠௥Ճͷҙຯ΍໾ׂΛઃఆ͢Δ
    w ϥϯυϚʔΫ
    TFBSDI
    NBJO
    OBWJHBUJPO
    CBOOFS
    w จॻߏ଄
    BSUJDMF
    IFBEJOH
    MJTU
    UPPMCBS
    UPPMUJQ
    w ΢ΟδΣοτ
    CVUUPO
    MJOL
    UBC
    TXJUDI
    w ෳ߹6*΢ΟδΣοτ
    UBCMJTU
    MJTUCPY
    DPNCPCPY
26. ϥϯυϚʔΫϩʔϧ w ϖʔδͷߏ੒Λ೺ѲͰ͖ΔΑ͏ʹͳΔ
    w ϥϯυϚʔΫؒ͸Ҡಈ͕Մೳ
    w FY
    TFBSDI
    NBJO
    OBWJHBUJPO
    CBOOFS
    DPOUFOUJOGP
27. จॻߏ଄ϩʔϧ w ίϯςϯπΛମܥ͚ͮΔߏ଄ͰΠϯλϥΫςΟϒͰͳ͍΋ ͷ
    w FY
    BSUJDMF
    JNH
    MJTU
    QSFTFOUBUJPO
    UPPMCBS
    UPPMUJQ
28. ΢ΟδΣοτϩʔϧ w ϢʔβʔΠϯλʔϑΣʔε΢ΟδΣοτ
    w ΩʔϘʔυΞΫηγϏϦςΟͱ͔͕෇༩͞ΕΔ
    w FY
    CVUUPO
    MJOL
    TXJUDI
    UBC
29. BSJBMBCFM w )5.-ଆʹೝࣝՄೳͳ৘ใΛՃ͑Δ
30. ϚγϯϦʔμϒϧͳ
    ৘ใΛՃ͑Δ w ΞΫηγϏϦςΟπϦʔͷOBNFΛܾΊΔ <nav aria-label="breadcrumbs"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Parent</a></li> <li><a href="#" aria-current="page">Child</a></li> </ol> </nav> <nav aria-label="main menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">More Information</a></li> </ul> </nav>
31. BSJBIJEEFO w εΫϦʔϯϦʔμʔ΍ΩʔϘʔυ͔Βແࢹ͢Δ΋ͷʹ෇༩
    w ΞΠίϯϑΥϯτ
    w ϞʔμϧͷόοΫάϥ΢ϯυ
32. ϞʔμϧͷόοΫάϥ΢ϯυʁ
33. ࢀߟจݙ w IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT-FBSO "DDFTTJCJMJUZ
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT BDDFTTJCJMJUZ IMKB
    w IUUQTBZTUZMFHVJEFDPNTUZMFHVJEF
    w IUUQTXBJDKQEPDT8$"(0WFSWJFXIUNM
    w ΠϯΫϧʔγϒ)5.- ෼ࣨʹ͋Δຊ
34. ͓·͚ɿ8$"( w 8$"(
    8FC
    $POUFOU
    "DDFTTJCJMJUZ
    (VJEFMJOFT
    w 8FCαΠτΛΞΫηγϏϦςΟʹ͢Δํ๏Λఆٛ
    w ஌֮Մೳ
    w ૢ࡞Մೳ
    w ཧղՄೳ
    w ݎ࿚ੑ
    w "ʙ"""ͷద߹ϨϕϧΛఆΊ͍ͯΔ
35. ͓·͚ɿ஫໨͞ΕΔ8$"( w ҙࣝߴ͍ܥاۀʹͳΕΔ٩
    Т
    و