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

なにからはじめたらいいかわからない人のための、これからはじめる『ウェブアクセシビリティ』

izuizu
November 23, 2017

 なにからはじめたらいいかわからない人のための、これからはじめる『ウェブアクセシビリティ』

2017年11月22日(水)
html5j Webプラットフォーム部 第18回勉強会
今回のテーマは「アクセシビリティ/インクルーシブデザイン」
https://html5j-webplat.connpass.com/event/71784/

izuizu

November 23, 2017
Tweet

More Decks by izuizu

Other Decks in Design

Transcript

  1. ͳʹ͔Β͸͡ΊͨΒ͍͍͔Θ͔Βͳ͍ਓͷͨΊͷɺ
    ͜Ε͔Β͸͡ΊΔ

    ʰ΢ΣϒΞΫηγϏϦςΟʱ
    IUNMK8FCϓϥοτϑΥʔϜ෦ୈճษڧձ
    ࢁຊ࿨ઘ

    View Slide

  2. ࠷ۙ

    zΞΫηγϏϦςΟz

    ͬͯݟ͔͚ͨΓฉ͍ͨΓ͠·͢ΑͶ

    View Slide

  3. ೥݄೔
    ΞΫηγϏϦςΟ΍ΔͧʂࡇΓ

    View Slide

  4. ೥݄೔
    +BQBO"DDFTTJCJMJUZ$POGFSFODF

    View Slide

  5. ഒҎ্

    View Slide

  6. ΞΫηγϏϦςΟ

    ΍͹͍ˍ͍͋ͭ

    View Slide

  7. ࠓ೔͸

    ΢ΣϒΞΫηγϏϦςΟͬͯ

    ͔ͩΒ͍͍ͬͨͳΜͳͷΑɺͱ͍͏ํʹ޲͚ͨ

    ʮ࠷ॳͷҰาʯͷ͓࿩Λ͠·͢

    View Slide

  8. ͜Μʹͪ͸
    ࢁຊ࿨ઘʢ΍·΋ͱ͍ͣΈʣ
    ΢ΣϒσβΠφʔΞυόΠβʔτϨʔφʔ
    ΞΫηγϏϦςΟΏΔ;Θ෦
    ΞΫηγϏϦςΟͷ৘ใαΠτ"DD4FMMʢΞΫηϧʣ

    ΞΫηγϏϦςΟϏΪφʔͷҊ಺໾
    IUUQBDDTFMMOFU
    ͍ͪ͝ͱΈΐ͏͕ͱ͓೑ͱඈߦػ͕େ޷͖Ͱ͢
    ͍͍ͣͣͬͯݺ͹Ε͍ͯ·͢
    ςϨϏ͸Ի੠ղઆͱࣈນͷίϯϘ೿

    View Slide

  9. 8IZʁΞΫηγϏϦςΟ
    "DDFTTʴ"CJMJUZ
    ΞΫηεʴͰ͖Δ͜ͱ

    View Slide

  10. Ͱ͖ͳ͍ɾͣ͠Β͍
    Ͱ͖Δɾ͠΍͍͢

    View Slide

  11. ো֐ऀ΍ߴྸऀରԠʁʁ

    View Slide

  12. ΅͘ɺϝΨω͕յ͞ΕͨΒ
    ͳʹ΋Ͱ͖ͳ͍ΜͰ͢Α
    GSFFFҏݪྗ໵͞Μ
    ʢ૒ࢠͷ͓ͱʔ͞Μʣ

    View Slide

  13. ΢Σϒ͕༏Ε͍ͯΔͱ͜Ζ͸ɺ

    ͦͷ޿͍൚༻ੑͰ͋Δɻ
    ো֐͕͋Δ͔൱͔ʹؔΘΒͣɺ

    ୭Ͱ΋ΞΫηεͰ͖Δͱ͍͏͜ͱ͸ɺ

    ΢ΣϒʹͱͬͯෆՄܽͳಛ௃ͳͷͰ

    ͋Δɻ
    ςΟϜɾόʔφʔζϦʔ
    XXXΛ࡞ͬͨਓˠ

    View Slide

  14. ϚγʔϯϦʔμϒϧ

    View Slide

  15. "DDFTT"CMF8FC$POUFOU
    ΞΫηεʴͰ͖Δʴ΢Σϒίϯςϯπ

    View Slide

  16. ͦ΋ͦ΋΢Σϒͬͯ
    ΞΫηεͯ͠΋ΒΘͳ͍ͱઌʹ͢͢Ίͳ͍
    ΞΫηεͨ͋͠ͱʹϢʔβϏϦςΟతͳ࿩

    View Slide

  17. ΢ΣϒΞΫηγϏϦςΟͷํ਑΍ࢼݧ݁ՌΛެ։

    View Slide

  18. View Slide

  19. w ߏ଄ͱදࣔελΠϧ
    w จࣈαΠζͱจষͷಡΈ΍͢͞
    w ૢ࡞ͱೖྗ
    w Իɾө૾

    View Slide

  20. ߏ଄ͱදࣔελΠϧ
    w ϖʔδ๯಄ʹʮϖʔδݟग़͠ʯΛ෇͚·͢
    w ݟग़͠ɾஈམɾϦετͱ͔ߏ଄ʹ߹ΘͤͯϚʔΫΞοϓ͠
    ͍ͯ·͢
    w ݟͨ໨͸$44Λ࢖͍·͢

    View Slide

  21. ߏ଄ͱදࣔελΠϧ
    w ϖʔδ๯಄ʹʮϖʔδݟग़͠ʯΛ෇͚·͢
    w ݟग़͠ɾஈམɾϦετͱ͔ߏ଄ʹ߹ΘͤͯϚʔΫΞοϓ͠
    ͍ͯ·͢
    w ݟͨ໨͸$44Λ࢖͍·͢
    ͋ɾͨɾΓɾ·ɾ͑ɾὑ

    View Slide

  22. จࣈαΠζͱจষͷಡΈ΍͢͞
    w هࣄຊจจࣈͷαΠζ͸ɺඞཁʹԠͯ͡Έͳ͞·͕มߋͰ
    ͖ΔΑ͏ʹ͠·͢ɻ
    w จࣈͷ৭͸ɺഎܠ৭ͱे෼ͳίϯτϥετΛͱΓɺݟ΍͢
    ͍৭ͷ૊Έ߹ΘͤΛ৺͕͚·͢ɻ
    w จࣈͷߦؒʹ΋ؾΛ͚ͭ·͢ɻ

    View Slide

  23. จࣈαΠζͱจষͷಡΈ΍͢͞
    w هࣄຊจจࣈͷαΠζ͸ɺඞཁʹԠͯ͡Έͳ͞·͕มߋͰ
    ͖ΔΑ͏ʹ͠·͢ɻ
    w จࣈͷ৭͸ɺഎܠ৭ͱे෼ͳίϯτϥετΛͱΓɺݟ΍͢
    ͍৭ͷ૊Έ߹ΘͤΛ৺͕͚·͢ɻ
    w จࣈͷߦؒʹ΋ؾΛ͚ͭ·͢ɻ
    ͋ɾͨɾΓɾ·ɾ͑ɾὑ

    View Slide

  24. ૢ࡞ͱೖྗ
    w ΩʔϘʔυૢ࡞΋Ͱ͖ΔΑ͏ʹ͍ͯ͠·͢
    w άϩʔόϧφϏήʔγϣϯΛ͚ͭ·͢
    UBCΩʔ΍໼ҹΩʔͳͲΩʔϘʔυ͚ͩͰૢ࡞͕Ͱ͖ΔΑ͏ʹ͢Δ
    ී௨ʹϚʔΫΞοϓ͍ͯͨ͠Βେৎ෉ɻ

    View Slide

  25. ૢ࡞ͱೖྗ
    w ΩʔϘʔυૢ࡞΋Ͱ͖ΔΑ͏ʹ͍ͯ͠·͢
    w άϩʔόϧφϏήʔγϣϯΛ͚ͭ·͢
    UBCΩʔ΍໼ҹΩʔͳͲΩʔϘʔυ͚ͩͰૢ࡞͕Ͱ͖ΔΑ͏ʹ͢Δ
    ී௨ʹϚʔΫΞοϓ͍ͯͨ͠Βେৎ෉ɻ
    ͏Μ͏Μὑ

    View Slide

  26. Իͱө૾
    w ࣗಈతʹԻΛྲྀͨ͠Γө૾Λྲྀͨ͠Γ͠·ͤΜ
    w ࠶ੜͤ͞Δͱ͖͸ʮ࠶ੜϘλϯʯΛԡͨ͠Β໐Β͠·͢

    View Slide

  27. Իͱө૾
    w ࣗಈతʹԻΛྲྀͨ͠Γө૾Λྲྀͨ͠Γ͠·ͤΜ
    w ࠶ੜͤ͞Δͱ͖͸ʮ࠶ੜϘλϯʯΛԡͨ͠Β໐Β͠·͢
    ͋ɾͨɾΓɾ·ɾ͑ɾὑ

    View Slide

  28. ࢥ͍ͷ΄͔

    ؆୯ͬΆ͘ͳ͍ʁ

    View Slide

  29. ςΩετϦϯΫͷจࣈ
    ৄࡉ͸ͪ͜ΒΛ͝ཡ͍ͩ͘͞
    Έΐ͏͕࠿ഓΛ͝ཡ͍ͩ͘͞

    View Slide

  30. ίϯτϥετൺ


    View Slide

  31. IUUQMFBWFSPVHJUIVCJPDPOUSBTUSBUJP

    View Slide

  32. IUUQMFBWFSPVHJUIVCJPDPOUSBTUSBUJP

    View Slide

  33. ๨Εͯ͸͍͚ͳ͍
    ͦ΋ͦ΋΢Σϒͷجຊ
    ςΩετ

    View Slide

  34. 8FCGPOUT
    ଟݴޠରԠ΋Մೳ

    View Slide

  35. View Slide

  36. View Slide

  37. จࣈαΠζมߋϘλϯ͍Δ͍Βͳ͍໰୊
    ๻ͷपΓͰ

    จࣈαΠζมߋϘλϯΛ

    ࢖͍ͬͯΔਓΛݟͨ͜ͱͳ͍
    $PDLUBJM[ҏෑ੓ӳ͞Μ
    ʢϩʔϏδϣϯʣ

    View Slide

  38. ϩʔϏδϣϯͬͯʁ
    ͬ͘͟Γ͍͏ͱऑࢹͷํͷ͜ͱ
    w ΊͬͪΌࢹྗ͕ѱ͍
    w ݟ͑Δൣғ͕ڱ͍
    w ୺͕͚͍ͬܽͯͨ͜Γ
    w ৭͕ҧͬͯΈ͑ͨΓ
    ਓʹΑͬͯݟ͑ํ͕͞·͟·ɺ࣮͸ΊͬͪΌଟ͍

    View Slide

  39. ը૾ʹ͸BMUΛ͚ͭΔ
    BMUFSOBUJWFUFYUɿ୅ସςΩετ
    ஛ଜ݈Ұ͍͍ͩͨ΍Ͷ͐஛ଜ݈Ұ
    ը૾ͷ୅ΘΓͱͳΔจࣈ
    JNHBMUlةݥͰ͢ɺา͖εϚϗɻz

    View Slide

  40. View Slide

  41. ͲΜͳ΋ͷ͕͍͍͔͠Βʁ
    BMUlz
    BMUlνϣίϨʔτέʔΩz
    BMUlը૾z



    View Slide

  42. ը૾͕ඇදࣔͷͱ͖
    BMUlz BMUlνϣίϨʔτέʔΩz BMUlը૾z
    ᶃ ᶅ

    ը૾ͷଘࡏ͕
    ͳ͍ʂ

    View Slide

  43. BMUlը૾z
    εΫϦʔϯϦʔμʔͰ

    ʮը૾ʯͬͯಡΉΜͰ͢Αɻ

    ͦΜͳͷ஌ͬͯ·͢Αɻ

    ͲΜͳը૾ͳͷ͔͕஌Γ͍͍ͨΜͰ͢Αɻ
    "DD4FMMதࠜխจ͞Μ
    ʢશ໡ྺ೥ྸʣ

    View Slide

  44. εΫϦʔϯϦʔμʔʁ
    ύιίϯ΍εϚϗͷը໘ΛػցͷԻ੠ͰಡΈ্͛Διϑτ
    w 7PJDF0WFS J04.BDɿඪ४ʣ
    w φϨʔλʔʢ8JOEPXTɿඪ४ʣ
    w /7%"ʢແྉʣ
    w 1$5BMLFSʢ༗ྉʣ
    BOENPSFʜ

    View Slide

  45. ϞΞϕλʔΑ
    w ࣸਅ͔Πϥετ͔
    w ݟͨ໨উෛʂ

    View Slide

  46. ΍Γ͗͢ྫ
    ऩ࿥෩ܠɿࠨ͔Βʹ͜΍͔ͳήετͷଠా͞ΜɺʮΦϨʂʯͳ২໦ɺ΄ͬ΃Λԡ
    ͑ͯ͞૫ͤͨ෩ʹݟͤͯΔ͍͍ͣͣɺੜஆ͔͍໨Ͱݟ͍ͯΔήετͷҏݪ͞Μɺ
    Ұ൪खલʹγϟπʹटΛߜΊΒΕ͍ͯΔதࠜɻ

    View Slide

  47. BMUܯ࡯
    ؾΛ͚ͭΖʂ

    View Slide

  48. ͜Ε͚ͩ͸͓͑͞Ζʂ΢ΣϒΞΫηγϏϦςΟ
    ϖʔδͷ಺༰͕Θ͔ΔϖʔδλΠτϧ
    Λ͚ͭΔʢUJUMFλάʣ
    ݟग़͠΍ϦετͳͲจষߏ଄ΛϚʔΫ
    Ξοϓ͢Δ
    ߏ଄ΛηΫγϣχϯά͢Δ
    ϦϯΫςΩετ͸ϦϯΫઌ͕Θ͔Δจ
    ݴʹ͢Δ
    ৘ใΛ఻͍͑ͯΔը૾ʹ୅ସςΩετ
    Λ͍ΕΔ
    จࣈ৭ͱഎܠ৭ͷίϯτϥετΛ֬อ͢
    Δ
    ΩʔϘʔυ͚ͩͰ΋ૢ࡞Ͱ͖ΔΑ͏ʹ͢
    Δ
    Ի੠΍ө૾Λࣗಈ࠶ੜͤ͞ͳ͍
    ࠶ੜϘλϯͱετοϓϘλϯΛ͚ͭΔ
    ΈͨΊ͸$44Ͱௐ੔͢Δ

    View Slide

  49. ಛผͳ୭͔ͷͨΊͷ΋ͷͰ͸ͳ͍Α
    ΞΫηγϏϦςΟ͸඼࣭อূ
    ϛπΤʔϦϯΫε໦ୡҰਔ͞Μ
    ʢΞΫηγϏϦςΟ͓͡͞Μʣ

    View Slide

  50. ·ͣ͸͜ΕΛಡ΋͏

    View Slide

  51. View Slide

  52. ͳΔ΄ͲɺΘ͔ΒΜɾɾɾ

    View Slide

  53. ͓͢͢ΊεϥΠυ
    IUUQCJUMZ"DYH&

    View Slide

  54. 8$"(΋͘΋͘ձ
    IUUQTDBZDPOOQBTTDPN

    View Slide

  55. ΞΫηγϏϦςΟপʹ͸·Βͳ͍ͨΊʹ
    ʮͻͱΓͰ೰·ͳ͍ʯ
    w ΞΫηγϏϦςΟؔ࿈ษڧձ૿͑ͯΔ
    w "DD4FMM΋͋ΔΑ
    w ϐϯΫຊͷྠಡձΛ΍͍ͬͯΔձࣾ΋

    View Slide

  56. ʮΈΜͳͰ΍Δʯ
    ΞΫηγϏϦςΟ

    View Slide

  57. ͓͢͢Ί5XJUUFSΞΧ΢ϯτ
    !BIPNV
    !CBLFSB !NPNEP@
    !NBTV1
    !4BXBEB4UE%FTJHO !NJML
    !LB[VIJUP !NBLPKP
    !XBJD@KQ !NBHJ
    !TVLPZBLBSJ[VNV
    !NBLPUP@VFLJ
    !XFCBZ
    !BDDTFMM@OFU

    View Slide

  58. ͜͜Ͱͪΐͬͱ$.
    ೥݄೔ʢ౔ʣ
    "DD4FMM.FFUVQWPM
    ։࠵ܾఆʂʂ

    View Slide

  59. ΞΫηγϏϦςΟʹڧ͘ͳΔͱ
    w ଞࣾͱͷࠩผԽ
    w Ҋ݅਺͕૿͑·͘Γ
    w ͜Ε͔ΒͷΩϟϦΞύεʹඇৗʹ༗ར

    View Slide

  60. ҰਓͰ΋࢖͑ͳ͍ਓ͕͍ͨΒ
    ࣗࣾͷαʔϏεΛ

    ࢖ͬͯ΋Β͑ͳ͍
    αΠϘ΢ζখྛେี͞Μ

    View Slide

  61. ΞΫηγϏϦςΟΛ΍Γͨͯ͘
    αΠόʔΤʔδΣϯτʹ

    స৬ͨ͠
    αΠόʔΤʔδΣϯτ

    ຟా૲Ұ͞Μ
    ʢCVUUPOܯ࡯ʣ

    View Slide

  62. ٸื͍ͯ͠Δͱ͜Ζଟ਺

    View Slide

  63. ΍Ε͹Ṷ͔Δ

    View Slide

  64. ·ͱΊ
    w ΞΫηγϏϦςΟͷ೾͕΍͖͍ͬͯͯΔ
    w ͍Ζ͍Ζͳاۀ͕͢Ͱʹ͸͡Ί͍ͯΔ
    w ໌೔͔Β͙͢ʹͰ͖Δ΋ͷ͕ͨ͘͞Μ
    w ΞΫηγϏϦςΟରԠ͸඼࣭อূ

    View Slide

  65. ʮࠓ΍Βͳ͍ཧ༝͸ͳ͍ʯ
    ΠϯϑΥΞΫγΞ২໦ਅ͞Μ
    ʢΞΫηγϏϦςΟγϟϯʣ

    View Slide

  66. ৐Γ஗ΕΔͳʂ
    ͜ͷϏοΫ΢Σʔϒʹʂ

    View Slide

  67. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    !J[VJ[V
    IUUQJ[VJ[VKQ

    View Slide