ユニバーサルHTMLとWebのポテンシャル

 ユニバーサルHTMLとWebのポテンシャル

SaCSS Special23: Accessibility
多様化する環境やニーズに対して、WebサイトやWebアプリケーションはどのような開発をしたらいいのか。
ユニバーサル(普遍的)なHTMLを設計することで、様々な環境やデバイス・ユーザーの利用に耐えうるサイトやアプリケーションにすることができます。そのためには、Webがどんなポテンシャル(潜在的価値)を持っているのか知ることが鍵となります。
Webはまだまだ可能性が秘められているはずです。
それを皆さんと探っていきましょう。

1adcc39bcb4268334437c9c12b84d7a4?s=128

Yusuke Hirao

August 24, 2019
Tweet

Transcript

  1. ©2019 Yusuke Hirao גࣜձࣾσΟʔθϩ 8FCΞΫηγϏϦςΟΤϯδχΞ ฏඌΏ͏ͯΜ Ϣχόʔαϧ)5.-ͱ 8FCͷϙςϯγϟϧ 4B$444QFDJBM"DDFTTJCJMJUZ 4B$447PM

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

    Hirao @cloud10designs
  3. ©2019 Yusuke Hirao 8FCΞΫηγϏϦςΟΤϯδχΞʜʁ 8FCϖʔδɾ8FCΞϓϦ͕ΑΓΞΫηγϒϧʹͳΔΑ͏ʹ ઃܭɾ࣮૷ɾϨϏϡʔɾςετͳͲΛߦ͍ͬͯ·͢ɻ ΞυόΠβʔͱͯ͠#BDLMPHͷ ΞΫηγϏϦςΟվળʹڠྗ͠·ͨ͠ɻ ࣗݾ঺հ

  4. ©2019 Yusuke Hirao ࠓ೔ɺ࿩͢͜ͱ ։ൃͷߟ͑ํ

  5. ©2019 Yusuke Hirao ۩ମతͳ࣮૷ํ๏ ίʔσΟϯάςΫχοΫ ࠓ೔ɺ࿩͞ͳ͍͜ͱ

  6. ©2019 Yusuke Hirao Ϣχόʔαϧ)5.-ͱ8FCͷϙςϯγϟϧ ଟ༷Խ͢Δ؀ڥ΍χʔζʹରͯ͠ɺ8FCαΠτ΍8FCΞϓϦέʔγϣϯ ͸ͲͷΑ͏ͳ։ൃΛͨ͠Β͍͍ͷ͔ɻ Ϣχόʔαϧʢීวతʣͳ)5.-Λઃܭ͢Δ͜ͱͰɺ༷ʑͳ؀ڥ΍σό ΠεɾϢʔβʔͷར༻ʹ଱͑͏ΔαΠτ΍ΞϓϦέʔγϣϯʹ͢Δ͜ͱ ͕Ͱ͖·͢ɻͦͷͨΊʹ͸ɺ8FC͕ͲΜͳϙςϯγϟϧʢજࡏతՁ஋ʣ Λ͍࣋ͬͯΔͷ͔஌Δ͜ͱ͕伴ͱͳΓ·͢ɻ

    8FC͸·ͩ·ͩՄೳੑ͕ൿΊΒΕ͍ͯΔ͸ͣͰ͢ɻ ͦΕΛօ͞Μͱ୳͍͖ͬͯ·͠ΐ͏ɻ
  7. ©2019 Yusuke Hirao ΞδΣϯμ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ΠϯΫϧʔδϣϯͱඪ४ن֨ 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷϙςϯγϟϧ

  8. ©2019 Yusuke Hirao ΞδΣϯμ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ΠϯΫϧʔδϣϯͱඪ४ن֨ 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷϙςϯγϟϧ

  9. ©2019 Yusuke Hirao Έͳ͞ΜͷੜΈग़͢ αΠτɾΞϓϦɾαʔϏε ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  10. ©2019 Yusuke Hirao ͍ΖΜͳਓʹ ࢖ͬͯ΄͍͠Ͱ͢ΑͶʁ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  11. ©2019 Yusuke Hirao ͍ΖΜͳਓͬͯͳΜ͚ͩͬʁ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  12. ©2019 Yusuke Hirao ͍ΖΜͳਓଟ༷Խͨ͠ਓʑ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  13. ©2019 Yusuke Hirao ͪΐͬͱࡶʹ޿͛ͯΈ·͢ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  14. ©2019 Yusuke Hirao ؀ڥ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ώτ σόΠε ۭ࣌ ো֕ ոզ

    පؾ ਎ମ೥ྸ ਫ਼ਆ೥ྸ ੑผ -(#52 ਓछ ݴޠ ֎ࠃޠ ه߸ ఺ࣈ ख࿩ จԽ ෩श फڭ ᅂ޷ झຯ ఩ֶ श׳ Ϧςϥγʔ ڭҭ ֶྺ ମ֨ ਎௕ ମॏ ख͕࠹͕͍ͬͯΔ ͩͬ͜ ͓ΜͿ ཱ͍ͬͯΔ ࠲͍ͬͯΔ ৯ࣄத ೖཋத ӡసத ར͖ख ҉͍ ໌Δ͍ ڱ͍ ޿͍ ͏Δ͍͞ ੩͔ ఱؾ ఀి ࡂ֐ ࣄނ ԻΛग़ͯ͠͸͍͚ͳ͍ ໌Δͯ͘͠͸͍͚ͳ͍ ؾԹ ࣪౓ ϝΨω ٛख ٛ଍ ॵ͕Γ ମௐ γϥϑ టਲ ύιίϯ εΫϦʔϯ Ψϥέʔ λϒϨοτ εϚʔτ΢Υον ੑೳ εϚʔτεϐʔΧʔ λονεΫϦʔϯ Ϛ΢ε ༗ઢ ి஑ ιϑτ΢ΣΞΩʔϘʔυ ϋʔυ΢ΣΞΩʔϘʔυ Ի੠ೖྗ ΞΠτϥοΧʔ εΫϦʔϯϦʔμʔ ఺ࣈσΟεϓϨΠ ࠓ͸ݟΕͳ͍ ͋ͱͰݟ͍ͨ Ң౓ ܦ౓ ߴ౓ ࠃ ԰಺ ԰֎ ނো ΦϑϥΠϯ ूதྗ ຬෲ౓ Ջ ڵฃ ϦϥοΫε εϚϗ ർ࿑౓ 8Jp
  15. ©2019 Yusuke Hirao ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ޒମຬ଍ͰόονϦ৸ͯ ͝͸Μ΋ෲീ෼৯΂ͯ ࠷దͳۭௐ͕ޮ͍ͨ ԿΛͯ͠΋ڐ͞ΕΔ৔ॴͰ ॆి֬อͰ͖ͯͯ8Jp଎౓࠷ߴͷ ࢖͍׳ΕͨσόΠεͰ

    ༧ఆ΋ͳ͘ϦϥοΫε͠ͳ͕Β ňͦΕʼnΛར༻Ͱ͖Δਓ ͚͕ͩλʔήοτ͡Όͳ͍ΑͶʁ
  16. ©2019 Yusuke Hirao ͲΜͳঢ়گͷਓʹ΋ ར༻ͯ͠΋Β͍͍ͨ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

  17. ©2019 Yusuke Hirao ΞδΣϯμ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ΠϯΫϧʔδϣϯͱඪ४ن֨ 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷϙςϯγϟϧ

  18. ©2019 Yusuke Hirao ͱ͸͍͑ɺ ΠϯΫϧʔγϒ แׅత ʹ ରԠ͢Δͷ͸ ෆՄೳͰ͠ΐʁ ΠϯΫϧʔδϣϯͱඪ४ن֨

  19. ©2019 Yusuke Hirao ͔ͨ͠ʹ೉͍͠Ͱ͢Ͷ ΠϯΫϧʔδϣϯͱඪ४ن֨

  20. ©2019 Yusuke Hirao ໊ҩͰ΋ະ஌ͷපؾɾো֕͸͋Δ ࠓޙͲΜͳσόΠε͕ݱΕΔ͔୭΋஌Βͳ͍ ͲΜͳΠϊϕʔςΟϒͳ͜ͱ͕ ͲΜͳύϥμΠϜγϑτ͕ γϯΪϡϥϦςΟ͕ Ӊ஦ਓ͕΍ͬͯ͘Δ͔΋͠Εͳ͍ ΠϯΫϧʔδϣϯͱඪ४ن֨

  21. ©2019 Yusuke Hirao ΋͠Ծʹ͖ͬ͞ͷ ΠϯΫϧʔδϣϯ͕Ͱ͖ͨͱͯ͠΋ ະདྷͷະ஌ͷଟ༷ੑ͕଴͍ͬͯΔ ΠϯΫϧʔδϣϯͱඪ४ن֨

  22. ©2019 Yusuke Hirao ݸਓ΍খ͍͞૊৫Ͱ ͜ΕΒΛݚڀŋ෼ੳŋݕূŋղܾ Ͱ͖Δͷ͔ʜʁʁ ΠϯΫϧʔδϣϯͱඪ४ن֨

  23. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ Ͱ͸ Ͳ͏ͨ͠Β͍͍ͷ͔

  24. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ج४ʹै͏

  25. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ඪ४ن֨ʹै͏

  26. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ )5.--JWJOH4UBOEBSE 8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF "DDFTTJCJMJUZ0CKFDU.PEFM

  27. ©2019 Yusuke Hirao )5.--JWJOH4UBOEBSE 8)"58(͕؅ཧΛ͍ͯ͠Δ)5.-ͷن֨ 8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF 8$͕؅ཧΛ͍ͯ͠Δ΢ΣϒίϯςϯπͷΞΫηγϏϦςΟͷ ୲อΛ໨తͱͨ͠ΨΠυϥΠϯ +*4 ೔ຊ࢈ۀن֨

    9ͷݩͱͳΔจॻ "DDFTTJCJMJUZ0CKFDU.PEFM 8$ͷ8*$(͕։ൃ͍ͯ͠Δࢧԉٕज़ͷͨΊͷ"1* ΠϯΫϧʔδϣϯͱඪ४ن֨
  28. ©2019 Yusuke Hirao )5.--JWJOH4UBOEBSE σʔλϑΥʔϚοτͷج४ 8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF ࡞Γํͷج४ "DDFTTJCJMJUZ0CKFDU.PEFM ࢧԉٕज़ͷͨΊͷج४ ΠϯΫϧʔδϣϯͱඪ४ن֨

  29. ©2019 Yusuke Hirao )5.--JWJOH4UBOEBSE 8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF "DDFTTJCJMJUZ0CKFDU.PEFM ੈքதͷ༗ࣝऀͨͪʹΑͬͯ ଟ༷Խ΁ͷݕ౼͕͞Εͨج४΁Ξοϓσʔτ͞Ε͍͍ͯͬͯΔ ΠϯΫϧʔδϣϯͱඪ४ن֨

  30. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ͜ΕΛར༻͠ͳ͍ख͸ͳ͍ͳʁ

  31. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ˞஫ҙ˞ ن֨͸͋͘·Ͱن֨ ΨΠυϥΠϯ͸͋͘·ͰΨΠυϥΠϯ ňकΔ׬ᘳʼnͰ͸ͳ͍

  32. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ͳͥ͜͏͍͏ن֨ʹͳͬͨͷ͔ʁ ΨΠυϥΠϯͷݴΘΜͱ͍ͯ͠Δຊ࣭͸ʁ  ͜ΕΛҙࣝ͢Δ͜ͱ͕େ੾

  33. ©2019 Yusuke Hirao ΠϯΫϧʔδϣϯͱඪ४ن֨ ن֨ͷҙਤɾΨΠυϥΠϯͷຊ࣭ ͜ΕΒΛཧղͯ͠ Ϣχόʔαϧ ීวతͳ )5.-Λॻ͘

  34. ©2019 Yusuke Hirao ΞδΣϯμ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ΠϯΫϧʔδϣϯͱඪ४ن֨ 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷϙςϯγϟϧ

  35. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ IUUQTXXXTMJEFTIBSFOFUSJLJIBXFC ҏݪྗ໵͞Μ !NBHJ

  36. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ ࢴഔମ Ϣʔβʔ" Ϣʔβʔ# Ϣʔβʔ$ Ϣʔβʔ% ❌

    ͦ΋ͦ΋৔ॴ͕ԕ͍ ෺ཧతʹೖखࠔ೉ ❌ ໨͕ෆࣗ༝ͰಡΊͳ͍
  37. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCίϯςϯπ Ϣʔβʔ" Ϣʔβʔ# Ϣʔβʔ$ Ϣʔβʔ% ѹ౗తʹΞΫηγϒϧ

    ˞σόΠεͷॆి΍8Jpঢ়گͷ໰୊ͳͲ͸΋ͪΖΜ͋Δ
  38. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCίϯςϯπ Ϣʔβʔ" Ϣʔβʔ# Ϣʔβʔ$ Ϣʔβʔ% ͔ͤͬ͘ΞΫηγϒϧͩͬͨͷʹ

    ࡞ΓํΛؒҧ͑Δͱ΋͍ͬͨͳ͍͜ͱʹͳΔ ࡞ΓํΛؒҧ͑ͨ ❌ Χϥʔίϯτϥετ͕௿ͯ͘ಡΊͳ͍
  39. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ .055"*/"*

  40. ©2019 Yusuke Hirao 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷ ಛੑΛ׆͔͢ ಛੑΛࡴ͞ͳ͍

  41. ©2019 Yusuke Hirao ΞδΣϯμ ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ ΠϯΫϧʔδϣϯͱඪ४ن֨ 8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ 8FCͷϙςϯγϟϧ

  42. ©2019 Yusuke Hirao 8FCͷϙςϯγϟϧ $44ͷՁ஋ จࣈ΍ΦϒδΣΫτͷαΠζΛมߋͰ͖Δ ϑΥϯτΛมߋͰ͖Δ ৭ΛมߋͰ͖Δ Ϣʔβʔ͕೚ҙʹมߋͰ͖Δ 8FCϖʔδͱͯ͠ͷՁ஋

    μ΢ϯϩʔυͯ͠อଘͰ͖Δ ܦ೥ྼԽ͕ͳ͍ ҹ࡮Ͱ͖Δ 63-Ͱѻ͏͜ͱ͕Ͱ͖Δ γΣΞ͠΍͍͢ ·ͩ·ͩଞʹ΋΋ͬͱ͋Δ͸ͣ ςΩετσʔλͷՁ஋ จࣈͱͯ͠දࣔ͢Δ͜ͱ͕Ͱ͖Δ Ի੠ͱͯ͠ಡΈ্͛Δ͜ͱ͕Ͱ͖Δ ఺ࣈσΟεϓϨΠʹग़ྗͰ͖Δ બ୒ͯ͠ίϐʔͰ͖Δ ػց຋༁Ͱ͖Δ σʔλྔ͕খ͍͞ )5.-ͷՁ஋ ϋΠύʔϦϯΫͰ͖Δ ϝλσʔλΛ΋ͯΔ ςΩετʹϝλ৘ใΛ෇ՃͰ͖Δ ϥϯυϚʔΫΛஔ͚Δ ػց͕ߏ଄Λ༰қʹղऍͰ͖Δ
  43. ©2019 Yusuke Hirao ςΩετσʔλͷՁ஋ จࣈͱͯ͠දࣔ͢Δ͜ͱ͕Ͱ͖Δ Ի੠ͱͯ͠ಡΈ্͛Δ͜ͱ͕Ͱ͖Δ ఺ࣈσΟεϓϨΠʹग़ྗͰ͖Δ બ୒ͯ͠ίϐʔͰ͖Δ ػց຋༁Ͱ͖Δ σʔλྔ͕খ͍͞

    )5.-ͷՁ஋ ϋΠύʔϦϯΫͰ͖Δ ϝλσʔλΛ΋ͯΔ ςΩετʹϝλ৘ใΛ෇ՃͰ͖Δ ϥϯυϚʔΫΛஔ͚Δ ػց͕ߏ଄Λ༰қʹղऍͰ͖Δ 8FCͷϙςϯγϟϧ $44ͷՁ஋ จࣈ΍ΦϒδΣΫτͷαΠζΛมߋͰ͖Δ ϑΥϯτΛมߋͰ͖Δ ৭ΛมߋͰ͖Δ Ϣʔβʔ͕೚ҙʹมߋͰ͖Δ 8FCϖʔδͱͯ͠ͷՁ஋ μ΢ϯϩʔυͯ͠อଘͰ͖Δ ܦ೥ྼԽ͕ͳ͍ ҹ࡮Ͱ͖Δ 63-Ͱѻ͏͜ͱ͕Ͱ͖Δ γΣΞ͠΍͍͢ ·ͩ·ͩଞʹ΋΋ͬͱ͋Δ͸ͣ
  44. ©2019 Yusuke Hirao 8FCͷϙςϯγϟϧ ѹ౗తΧελϚΠβϒϧ

  45. ©2019 Yusuke Hirao 8FCͷϙςϯγϟϧ Ϣʔβʔ͕೚ҙʹελΠϧΛมߋͰ͖Δ αΠζ͕ݻఆ͞Εͳ͍ ϒϥ΢βͷػೳҎ্ʹɺϢʔβʔͷಛੑ΍ো֕ɾ࿝Խʹ߹ΘͤͯରԠ͕Ͱ͖Δ Χϥʔ͕ݻఆ͞Εͳ͍ ΧϥʔϢχόʔαϧσβΠϯ͚ͩͰ͸ղܾͰ͖ͳ͍໰୊΋ղফͰ͖Δ͔΋ ৭֮ಛੑɾֶशো֐΁ͷରԠ͕Ͱ͖Δ

    ϑΥϯτ͕ݻఆ͞Εͳ͍ ϢχόʔαϧσβΠϯϑΥϯτ͚ͩͰ͸ղܾͰ͖ͳ͍໰୊΋ղফͰ͖Δ͔΋ ֶशো֐ ಛʹࣝࣈো֐ ΁ͷରԠ͕Ͱ͖Δ
  46. ©2019 Yusuke Hirao 8FCͷϙςϯγϟϧ 8FCͷಛੑ 8FCͳΒͰ͸ͷՁ஋ ͜ΕΛਂງΓ͢Δ͜ͱͰ ࠓޙͷଟ༷ੑ΁ͷରԠΛ͞Βʹ޿͛ΒΕΔ

  47. ©2019 Yusuke Hirao 8FCͷϙςϯγϟϧ 8FCͷՄೳੑ͸ແݶͩ

  48. ©2019 Yusuke Hirao גࣜձࣾσΟʔθϩ 8FCΞΫηγϏϦςΟΤϯδχΞ ฏඌΏ͏ͯΜ Ϣχόʔαϧ)5.-ͱ 8FCͷϙςϯγϟϧ 4B$444QFDJBM"DDFTTJCJMJUZ 4B$447PM