Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML・CSS勉強会1

rhythm191
November 21, 2019

 HTML・CSS勉強会1

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

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

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

rhythm191

November 21, 2019
Tweet

More Decks by rhythm191

Other Decks in Technology

Transcript

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

    (JOPJODۚݪ

    View full-size slide

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

    View full-size slide

  3. ͍͍)5.-ͬͯʁ

    View full-size slide

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

    View full-size slide

  5. ྫ͑͹͜ͷϘλϯ

    View full-size slide

  6. Ͳ͏ͱͰ΋ͳΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. ৭֮ಛੑͷͨΊͷBZ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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





    ೥ ೥


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    Home
    Parent
    Child




    Home
    About Us
    More Information


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. ͓·͚ɿ8$"(
    w 8$"( 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT

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

    View full-size slide

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

    View full-size slide