HTML・CSS勉強会１

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

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

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

Transcript

1. )5.-ɾ$44ษڧձ̍
   ΞΫηγϏϦςΟ BZ
   ฤ
   (JOPJODۚݪ
   

   View Slide

2. ໨ඪ஋
   ΞΫηγϏϦςΟͬͯॏཁ
   8$"(
   8"*"3*"
   ΞΫηγϏϦςΟπϦʔ
   ηϚϯςΟοΫ
   ΠϯΫϧʔγϒ
   ΞϑΥʔμϯε
   ίϯτϥετ
   

   View Slide

3. ͍͍)5.-ͬͯʁ
   

   View Slide

4. ແݶʹબ୒ࢶ͕͋Δ
   )5.-
   

   View Slide

5. ྫ͑͹͜ͷϘλϯ
   

   View Slide

6. Ͳ͏ͱͰ΋ͳΔ
   

   View Slide

7. ͜Μͳͷઈର͓͔͍͠Α
   w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍
   w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ
   μʔ
   w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍
   w ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍
   w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍
   

   View Slide

8. શ෦ΞΫηγϏϦςΟͷ࿩
   w ਓ͕ؒ։ൃ͠΍ͮ͢Β͍
   w ػցతʹ൑ผͰ͖ͳ͍ ݕࡧΤϯδϯɺεΫϦʔϯϦʔ
   μʔ
   w 5BCΩʔͰϘλϯؒΛҠಈͰ͖ͳ͍
   w ΤϯλʔΩʔͰϘλϯΛΞΫςΟϒʹͰ͖ͳ͍
   w αΠζ͕૿͑ΔͷͰ஗͍ωοτϫʔΫରࡦ͕Ͱ͖ͳ͍
   ώϡʔϚϯϦʔμϏϦςΟ
   ΩʔϘʔυΞΫηγϏϦςΟ
   ϞόΠϧΞΫηγϏϦςΟ
   ϚγϯϦʔμϏϦςΟ
   

   View Slide

9. ͦ΋ͦ΋BZͱ͸ʁ
   w Ͱ͖ΔݶΓଟ͘ͷਓʹ࢖ͬͯ΋Β͑ΔΑ͏ʹ͢Δ͜ͱ
   w ϋϯσΟΩϟοϓΛ͍࣋ͬͯΔਓ
   w ਓؒҎ֎ ݕࡧΤʔδΣϯτɺεΫϨΠϐϯά
   w ϞόΠϧσόΠε
   w ஗͍ωοτϫʔΫ
   w ΑΓߴੑೳͳ୺຤
   

   View Slide

10. ϦϯΫ͸ͳͥ੨৭ͳͷ͔ʁ
    

    View Slide

11. ৭֮ಛੑͷͨΊͷBZ
    

    View Slide

12. $5"ʹ΋Өڹ͢Δ
    w എܠ৭ͱϘλϯ৭ͷ߹ΘͤํͰݟ΍͕͢͞มΘΔ
    

    View Slide

13. ೔ຊͷ৭֮ಛੑ૚
    ஍Ҭ உੑ ঁੑ
    ೔ຊ
    Ԥถ ʙ
    ΞϑϦΧ ʙ
    ΞΫηεͨ͠ਓͷ͕ԠืϘλϯΛೝࣝͰ͖ͳ͍ʁ
    

    View Slide

14. ੈքͷBZ
    w BZͷ୲อ͸๏཯ͰఆΊΒΕ͍ͯΔ஍Ҭ΋͋Δ
    w &6&/
    w ถࠃϦϋϏϦςʔγϣϯ๏
    w ӳࠃΞΫηγϏϦςΟنଇ
    w ߽भো֕ऀࠩผېࢭ๏
    

    View Slide

15. ถࠃͷBZͷૌুࣄྫ਺
    
    
    
    
    
    ೥ ೥
    
    
    

    View Slide

16. BZ͕௿͍ͱ·͍ͣੈք͕
    དྷΔ͔΋͠Εͳ͍
    ҰମͲ͜ͷαΠτͳΜͩʁ
    

    View Slide

17. BZΞΫηεͨ͠શ͕ͯର৅
    w ো͕͍ऀ͚͕ͩλʔήοτ૚Ͱ͸ͳ͍
    w ϞόΠϧ୺຤Ͱ1$αΠτ͕ݟ͑ͳ͔ͬͨΓ
    w l͜ͷίϯςϯπ͸͓ॅ·͍ͷ஍ҬͰ͸࢖༻Ͱ͖·ͤΜz
    

    View Slide

18. ςΩετը૾ͷฐ֐
    &OHMJTI 0,
    

    View Slide

19. ΞΫηεͯ͘͠Δ
    શͯͷϢʔβʔ͕ର৅
    

    View Slide

20. ΞΫηγϏϦςΟͬͯॏཁ
    

    View Slide

21. BZΛҙࣝͨ͠։ൃ
    Ͱ͖ΔݶΓ;͞Θ͍͠
    )5.-Λॻ͘
    ཧղՄೳ
    ϑΥʔΧε
    ίϯτϥετ
    ςΩεταΠζ
    ΩʔϘʔυΞΫηε
    ༧ଌՄೳ
    

    View Slide

22. Ͱ͖ΔݶΓ;͞Θ͍͠)5.-
    w Ͱ͖ΔݶΓηϚϯςΟοΫʹ͔͘
    w IFBEFS GPPUFS NBJO BSUJDMF OBW
    w FN TUSPOH DJUF BEESFTTʜ
    w ͪΌΜͱΠϯλϥΫτͰ͖ΔΑ͏ʹ͢Δ
    w CVUUPOͱ͔MJOLʹIPWFS GPDVT BDUJWFͱ͔ʜ
    w 8"*"3*"Ͱิ଍͢Δ
    

    View Slide

23. ΞΫηγϏϦςΟπϦʔ
    w %0.ͱ̍ର̍Ͱ࡞੒͞ΕΔɻ
    w ̐ͭͷ৘ใΛ࣋ͭ
    w SPMF໾ׂ΍छྨΛද͢ TFBDI OBWJHBUJPOͱ͔
    w OBNFϥϕϦϯάཁૉ ྫɿύϯͣ͘Ϧετ
    w WBMVF
    w TUBUF
    

    View Slide

24. 8"*"3&"ͱ͔
    w )5.-͚ͩͰ͸ҙຯ෇͚Ͱ͖ͳ͍෦෼Λิ͏΋ͷ
    w ͱΓ͋͑ͣࠓճ͸͚̏ͭͩ঺հ
    w SPMF
    w BSJBMBCFM
    w BSJBIJEEFO
    BSJBDPOUSPMT
    BSJBIBTQPQVQ
    BSJBMJWF
    BSJBEFTDSJCFECZ
    BSJBBUPNJD
    BSJBCVTZ
    

    View Slide

25. SPMF
    w λάʹରͯ͠௥Ճͷҙຯ΍໾ׂΛઃఆ͢Δ
    w ϥϯυϚʔΫTFBSDI NBJO OBWJHBUJPO CBOOFS
    w จॻߏ଄BSUJDMF IFBEJOH MJTU UPPMCBS UPPMUJQ
    w ΢ΟδΣοτCVUUPO MJOL UBC TXJUDI
    w ෳ߹6*΢ΟδΣοτUBCMJTU MJTUCPY DPNCPCPY
    

    View Slide

26. ϥϯυϚʔΫϩʔϧ
    w ϖʔδͷߏ੒Λ೺ѲͰ͖ΔΑ͏ʹͳΔ
    w ϥϯυϚʔΫؒ͸Ҡಈ͕Մೳ
    w FY
    TFBSDI NBJO OBWJHBUJPO CBOOFS DPOUFOUJOGP
    

    View Slide

27. จॻߏ଄ϩʔϧ
    w ίϯςϯπΛମܥ͚ͮΔߏ଄ͰΠϯλϥΫςΟϒͰͳ͍΋
    ͷ
    w FY
    BSUJDMF JNH MJTU QSFTFOUBUJPO UPPMCBS UPPMUJQ
    

    View Slide

28. ΢ΟδΣοτϩʔϧ
    w ϢʔβʔΠϯλʔϑΣʔε΢ΟδΣοτ
    w ΩʔϘʔυΞΫηγϏϦςΟͱ͔͕෇༩͞ΕΔ
    w FY
    CVUUPO MJOL TXJUDI UBC
    

    View Slide

29. BSJBMBCFM
    w )5.-ଆʹೝࣝՄೳͳ৘ใΛՃ͑Δ
    

    View Slide

30. ϚγϯϦʔμϒϧͳ
    ৘ใΛՃ͑Δ
    w ΞΫηγϏϦςΟπϦʔͷOBNFΛܾΊΔ
    
    
    Home
    Parent
    Child
    
    
    
    
    Home
    About Us
    More Information
    
    
    

    View Slide

31. BSJBIJEEFO
    w εΫϦʔϯϦʔμʔ΍ΩʔϘʔυ͔Βແࢹ͢Δ΋ͷʹ෇༩
    w ΞΠίϯϑΥϯτ
    w ϞʔμϧͷόοΫάϥ΢ϯυ
    

    View Slide

32. ϞʔμϧͷόοΫάϥ΢ϯυʁ
    

    View Slide

33. ࢀߟจݙ
    w IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT-FBSO
    "DDFTTJCJMJUZ
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT
    BDDFTTJCJMJUZ IMKB
    w IUUQTBZTUZMFHVJEFDPNTUZMFHVJEF
    w IUUQTXBJDKQEPDT8$"(0WFSWJFXIUNM
    w ΠϯΫϧʔγϒ)5.- ෼ࣨʹ͋Δຊ
    

    View Slide

34. ͓·͚ɿ8$"(
    w 8$"( 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT
    
    w 8FCαΠτΛΞΫηγϏϦςΟʹ͢Δํ๏Λఆٛ
    w ஌֮Մೳ
    w ૢ࡞Մೳ
    w ཧղՄೳ
    w ݎ࿚ੑ
    w "ʙ"""ͷద߹ϨϕϧΛఆΊ͍ͯΔ
    

    View Slide

35. ͓·͚ɿ஫໨͞ΕΔ8$"(
    w ҙࣝߴ͍ܥاۀʹͳΕΔ٩ Т
    و
    

    View Slide