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

ユニバーサルなマークアップをしよう

Yusuke Hirao
February 02, 2019

 ユニバーサルなマークアップをしよう

「Webアクセシビリティ道場 in 福岡」ライトニングトークスライド

Yusuke Hirao

February 02, 2019
Tweet

More Decks by Yusuke Hirao

Other Decks in Technology

Transcript

  1. Ϣχόʔαϧͳ
    ϚʔΫΞοϓΛ͠Α͏
    8FCΞΫηγϏϦςΟಓ৔JO෱Ԭ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ

    View full-size slide

  2. ©2019 Yusuke Hirao
    Ϣχόʔαϧͳ
    ϚʔΫΞοϓΛ͠Α͏
    8FCΞΫηγϏϦςΟಓ৔JO෱Ԭ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ

    View full-size slide

  3. ©2019 Yusuke Hirao
    ࣗݾ঺հ
    ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ϑϩϯτΤϯυΤϯδχΞ
    #-0(IUUQTOPUFNVZVTVLFIJSBP
    Yusuke Hirao
    @cloud10designs

    View full-size slide

  4. ©2019 Yusuke Hirao
    ීஈͷۀ຿

    View full-size slide

  5. ©2019 Yusuke Hirao
    झຯ

    View full-size slide

  6. ©2019 Yusuke Hirao
    झຯ

    ΤσΟλ΍HVMQͰ࢖͑Δ)5.-΍47(༻ͷϦϯλʔ

    View full-size slide

  7. ©2019 Yusuke Hirao
    ͱ͍͏͘Β͍ʹ)5.-͕޷͖

    View full-size slide

  8. ©2019 Yusuke Hirao
    I❤HTML

    View full-size slide

  9. ©2019 Yusuke Hirao
    Ϣχόʔαϧͳ
    ϚʔΫΞοϓΛ͠Α͏

    View full-size slide

  10. ©2019 Yusuke Hirao
    Ϣχόʔαϧʁ

    View full-size slide

  11. ©2019 Yusuke Hirao
    Ϣχόʔαϧීวత

    View full-size slide

  12. ©2019 Yusuke Hirao
    ϒϩάΛॻ͖·ͯ͠ʜ

    View full-size slide

  13. ©2019 Yusuke Hirao
    ϒϩάΛॻ͖·ͯ͠ʜ
    ػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟ
    https:!//note.mu/yusukehirao/n/n5213d9bdd1e1

    View full-size slide

  14. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ஈམͳΒ
    Օ৚ॻ͖ͳΒ

    View full-size slide

  15. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ιʔείʔυͳΒ
    ιʔείʔυ͔ͩΒ

    View full-size slide

  16. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ͱͬͯ΋ීวతͳ͜ͱ

    View full-size slide

  17. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ຋༁͞Εͨ͘ͳ͍ͳΒ
    translateଐੑͰ͍͍ͷͰ͸ʁ

    View full-size slide

  18. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ


    !

    View full-size slide

  19. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ͯ͜͞Ε͸
    ҙຯ࿦తʹຊ࣭͔ʁʁ
    ීวతͳϚʔΫΞοϓ͔ʁ

    View full-size slide

  20. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ιʔείʔυͳΒ
    ιʔείʔυ͔ͩΒ

    View full-size slide

  21. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ιʔείʔυͳΒ
    ιʔείʔυ͔ͩΒ

    View full-size slide

  22. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ͋ͱtranslateଐੑͰ
    ຋༁ͷࣗ༝Λୣ͍͍ͬͯ΋ͷ͔ʜ

    View full-size slide

  23. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ

    View full-size slide

  24. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ

    View full-size slide

  25. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ԡ͠෇͚ΔͷͰ͸ͳ͘
    ྟػԠม

    View full-size slide

  26. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    )5.-
    ϢʔβΤʔδΣϯτ

    ࢧԉٕज़

    View full-size slide

  27. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    )5.-
    ϢʔβΤʔδΣϯτ

    ࢧԉٕज़
    ීว
    ྟػԠม
    ΧελϜՄೳ

    View full-size slide

  28. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ

    View full-size slide

  29. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    Ϣʔβʔ͸͍Ζ͍Ζ
    σόΠε͸͍Ζ͍Ζ
    ؀ڥ͸͍Ζ͍Ζ
    χʔζ͸͍Ζ͍Ζ

    View full-size slide

  30. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ීวతͳ΋ͷΛఏڙ͢Δ͜ͱͰ
    ྟػԠมͳར༻͕ՄೳʹͳΔ

    View full-size slide

  31. ©2019 Yusuke Hirao
    ϒϩάهࣄʮػց຋༁ͷͨΊͷ8FCΞΫηγϏϦςΟʯ
    ීวతͳ΋ͷΛఏڙ͢Δ͜ͱͰ
    ΑΓΞΫηγϒϧʹͳΔ

    View full-size slide

  32. ©2019 Yusuke Hirao
    Ϣχόʔαϧීวత

    View full-size slide

  33. ©2019 Yusuke Hirao
    Ϣχόʔαϧͳ
    ϚʔΫΞοϓΛ͠Α͏

    View full-size slide

  34. Ϣχόʔαϧͳ
    ϚʔΫΞοϓΛ͠Α͏
    8FCΞΫηγϏϦςΟಓ৔JO෱Ԭ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ

    View full-size slide