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

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

Transcript

1. ©2019 Yusuke Hirao גࣜձࣾσΟʔθϩ 8FCΞΫηγϏϦςΟΤϯδχΞ
   ฏඌΏ͏ͯΜ Ϣχόʔαϧ)5.-ͱ
   8FCͷϙςϯγϟϧ
   4B$44
   4QFDJBM
   "DDFTTJCJMJUZ 4B$44
   7PM
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.-
    -JWJOH
    4UBOEBSE
    8FC
    $POUFOUT
    "DDFTTJCJMJUZ
    (VJEFMJOF
    "DDFTTJCJMJUZ
    0CKFDU
    .PEFM
27. ©2019 Yusuke Hirao )5.-
    -JWJOH
    4UBOEBSE
    8)"58(͕؅ཧΛ͍ͯ͠Δ)5.-ͷن֨
    8FC
    $POUFOUT
    "DDFTTJCJMJUZ
    (VJEFMJOF
    8$͕؅ཧΛ͍ͯ͠Δ΢ΣϒίϯςϯπͷΞΫηγϏϦςΟͷ
    ୲อΛ໨తͱͨ͠ΨΠυϥΠϯ
    +*4 ೔ຊ࢈ۀن֨
    9
    ͷݩͱͳΔจॻ
    "DDFTTJCJMJUZ
    0CKFDU
    .PEFM
    8$ͷ8*$(͕։ൃ͍ͯ͠Δࢧԉٕज़ͷͨΊͷ"1* ΠϯΫϧʔδϣϯͱඪ४ن֨
28. ©2019 Yusuke Hirao )5.-
    -JWJOH
    4UBOEBSE
    
    σʔλϑΥʔϚοτͷج४
    8FC
    $POUFOUT
    "DDFTTJCJMJUZ
    (VJEFMJOF
    
    ࡞Γํͷج४
    "DDFTTJCJMJUZ
    0CKFDU
    .PEFM
    
    ࢧԉٕज़ͷͨΊͷج४ ΠϯΫϧʔδϣϯͱඪ४ن֨
29. ©2019 Yusuke Hirao )5.-
    -JWJOH
    4UBOEBSE
    8FC
    $POUFOUT
    "DDFTTJCJMJUZ
    (VJEFMJOF
    "DDFTTJCJMJUZ
    0CKFDU
    .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$44
    4QFDJBM
    "DDFTTJCJMJUZ 4B$44
    7PM