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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. ©2019 Yusuke Hirao
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ޒମຬ଍ͰόονϦ৸ͯ
    ͝͸Μ΋ෲീ෼৯΂ͯ
    ࠷దͳۭௐ͕ޮ͍ͨ
    ԿΛͯ͠΋ڐ͞ΕΔ৔ॴͰ
    ॆి֬อͰ͖ͯͯ8Jp଎౓࠷ߴͷ
    ࢖͍׳ΕͨσόΠεͰ
    ༧ఆ΋ͳ͘ϦϥοΫε͠ͳ͕Β
    ňͦΕʼnΛར༻Ͱ͖Δਓ
    ͚͕ͩλʔήοτ͡Όͳ͍ΑͶʁ
    

    View Slide

16. ©2019 Yusuke Hirao
    ͲΜͳঢ়گͷਓʹ΋
    ར༻ͯ͠΋Β͍͍ͨ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. ©2019 Yusuke Hirao
    )5.--JWJOH4UBOEBSE
    8)"58(͕؅ཧΛ͍ͯ͠Δ)5.-ͷن֨
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    8$͕؅ཧΛ͍ͯ͠Δ΢ΣϒίϯςϯπͷΞΫηγϏϦςΟͷ
    ୲อΛ໨తͱͨ͠ΨΠυϥΠϯ
    +*4 ೔ຊ࢈ۀن֨
    9ͷݩͱͳΔจॻ
    "DDFTTJCJMJUZ0CKFDU.PEFM
    8$ͷ8*$(͕։ൃ͍ͯ͠Δࢧԉٕज़ͷͨΊͷ"1*
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    

    View Slide

28. ©2019 Yusuke Hirao
    )5.--JWJOH4UBOEBSE
    σʔλϑΥʔϚοτͷج४
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    ࡞Γํͷج४
    "DDFTTJCJMJUZ0CKFDU.PEFM
    ࢧԉٕज़ͷͨΊͷج४
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCίϯςϯπ
    Ϣʔβʔ"
    Ϣʔβʔ#
    Ϣʔβʔ$
    Ϣʔβʔ%
    ͔ͤͬ͘ΞΫηγϒϧͩͬͨͷʹ
    ࡞ΓํΛؒҧ͑Δͱ΋͍ͬͨͳ͍͜ͱʹͳΔ
    ࡞ΓํΛؒҧ͑ͨ ❌
    Χϥʔίϯτϥετ͕௿ͯ͘ಡΊͳ͍
    

    View Slide

39. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    .055"*/"*
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    ѹ౗తΧελϚΠβϒϧ
    

    View Slide

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

    View Slide

46. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    8FCͷಛੑ
    8FCͳΒͰ͸ͷՁ஋
    ͜ΕΛਂງΓ͢Δ͜ͱͰ
    ࠓޙͷଟ༷ੑ΁ͷରԠΛ͞Βʹ޿͛ΒΕΔ
    

    View Slide

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

    View Slide

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

    View Slide