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

明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents

majimasachi
July 15, 2018

明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents

2018.07.15 WordCamp Ogijima 2018 の登壇資料です。
発表内容のテキスト版はこちら:https://bit.ly/2zNnSSR

majimasachi

July 15, 2018
Tweet

More Decks by majimasachi

Other Decks in Design

Transcript

  1. WordCamp Ogijima 2018
    ؒౢࠫ஌
    σβΠϯɾίϯςϯπͷ
    ΞΫηγϏϦςΟೖ໳2018
    ໌೔͔ΒͰ͖Δʂ
    2018.07.15

    View full-size slide

  2. PROFILE
    ؒౢࠫ஌ @mjmjsachi
    ߴ஌ݝࡏॅ
    ϑϦʔϥϯεDTPʴ΢ΣϒσβΠϯ
    WordPress Ogijima 2018࣮ߦҕһ
    WordPressྺ4೥
    ΞΫηγϏϦςΟྺ2೥

    View full-size slide

  3. QͲ͏ͯ͠΢ΣϒͰ
    ൃ৴͢Δͷʁ

    View full-size slide

  4. A
    ΑΓଟ͘ͷਓʹ
    ৘ใΛ఻͑ΔͨΊ

    View full-size slide

  5. ҰਓͰ΋ɺࣗྗͰɺੈքʹ޲͚ͯൃ৴Ͱ͖Δ
    Power of WEB
    ࣗ෼ͷ૝૾Λ௒͑ͨ
    ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ఻͑ΒΕΔ

    View full-size slide

  6. ʬຊ೔ͷ͓͸ͳ͠ʭ
    ΑΓଟ͘ͷਓʹ৘ใΛ఻͑ΔͨΊͷ
    ΞΫηγϏϦςΟ
    ࠓͷࣗ෼ͷࢹ఺Λগ͠޿͛ͯ

    View full-size slide

  7. ҰਓͰ΋ɺࣗྗͰɺੈքʹ޲͚ͯൃ৴Ͱ͖Δ
    ࣗ෼ͷ૝૾Λ௒͑ͨ
    ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ఻͑ΒΕΔ
    ൃ৴͢Δଆ

    View full-size slide

  8. ୭Ͱ΋ɺ޷͖ͳͱ͖ʹ޷͖ͳ৔ॴͰ
    ޷͖ͳܗࣜͰ৘ใΛಘΒΕΔ
    Power of WEB
    ड͚औΔଆ

    View full-size slide

  9. ୭Ͱ΋ɺ޷͖ͳͱ͖ʹ޷͖ͳ৔ॴͰ
    ޷͖ͳܗࣜͰ ৘ใΛಘΒΕΔ
    Power of WEB
    ड͚औΔଆ

    View full-size slide

  10. ະདྷͷศརɹɹOK! Google, Alexa!
    ख͕࢖͑ͳ͍ɹɹΩʔϘʔυૢ࡞
    ೔ຊޠ͕ۤखɹɹ຋༁πʔϧ
    ݟ͑ͮΒ͍ɹɹ֦େπʔϧʗ৭ௐ൓సɾิਖ਼
    ݟ͑ͳ͍ɹɹεΫϦʔϯϦʔμʔ
    Ϣʔβʔʷར༻؀ڥ

    View full-size slide

  11. ༷ʑͳ୺຤΍ࢧԉٕज़Λ௨ͯ͠
    ͋ΒΏΔਓ͕ࣗྗͰ৘ใʹΞΫηεͰ͖Δ
    ΞΫηγϏϦςΟ
    Access + ability
    ΢Σϒͱ͍͏ϝσΟΞͷຊ࣭తͳಛ௃ɾେ͖ͳັྗ

    View full-size slide

  12. ?
    ΞΫηγϏϦςΟ͸
    ো֐ऀɾߴྸऀͷͨΊͷ΋ͷ
    ࣗ෼ʹ͸ؔ܎ͳ͍

    View full-size slide

  13. ʢࡀҎ্ʣ
    27.7ˋ
    ߴྸऀ
    ࠤ౻͞Μ
    ླ໦͞Μ
    ߴڮ͞Μ
    ࢀߟจݙɿฏ੒೥൛ো֐ऀനॻʦ಺ֳ෎ʧʗ໊ࣈ༝དྷOFUʛશࠃ໊ࣈϥϯΩϯάʗ౷ܭτϐοΫε/P౷ܭ͔ΒΈͨզ͕ࠃͷߴྸऀʦ૯຿লʧ
    ࠃຽͷ
    6ˋ ʹ 5,114,000ਓ
    ԿΒ͔ͷ
    ো֐Λ΋ͭਓ
    ਎ମো֐
    ஌తো֐
    ਫ਼ਆো֐
    7,411,000ਓ

    View full-size slide

  14. ஌Βͣ஌Βͣͷ͏ͪʹ
    ୭͔Λૄ֎͠ͳ͍ͨΊʹ΋

    View full-size slide

  15. ΞΫηγϏϦςΟ͸͡ΊͷҰา
    ໌೔͔ΒͰ͖Δʂ

    View full-size slide

  16. Ϛγϯ
    Ϧʔμϒϧ
    ώϡʔϚϯ
    Ϧʔμϒϧ
    ༷ʑͳ୺຤΍ࢧԉٕज़Λ௨ͯ͠ɺ͍ΖΜͳਓ͕ΞΫηεͰ͖Δ
    ΞΫηγϏϦςΟͷ෼ղ

    View full-size slide

  17. 6*
    Ϛγϯ
    Ϧʔμϒϧ
    ώϡʔϚϯ
    Ϧʔμϒϧ
    ηϚϯςΟοΫ
    Φʔϓϯσʔλ
    ϥΠςΟϯά
    ৘ใઃܭ
    ϏδϡΞϧ
    ΠϯλϥΫγϣϯ
    γεςϜ
    ΢ΣϒʹؔΘΔશͯͷਓͰͭ͘Δ΋ͷ
    ΞΫηγϏϦςΟͷ෼ղ

    View full-size slide

  18. ςʔϚ ίϯςϯπ
    ΢ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ͸྆ྠ͕ෆՄܽ
    WordPressͷ෼ղ

    View full-size slide

  19. ςʔϚ ίϯςϯπ
    ΢ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ͸྆ྠ͕ෆՄܽ
    WordPressͷ෼ղ

    View full-size slide

  20. OgiOgi hotel ͷαΠτΛ
    WordPressͰ࡞ͬͨΑʂ
    ͍ΖΜͳਓʹདྷͯ΄͍͔͠Β
    ΞΫηγϒϧʹ͢Δͧʙʂ
    Case Study

    View full-size slide

  21. ͓͢͢Ίϓϥϯ঺հόφʔ
    Case 1
    ը૾͕ݟΕͳ͍ਓʹ΋఻͑Δʹ͸ʜʁ

    View full-size slide

  22. Good morning, OgiOgi!
    ੉ށ಺ͷ͓͍͠͞ຬࡌ
    ϫϯϓϨʔτϞʔχϯάϓϥϯ
    ୅ସςΩετ
    ը૾Ͱ఻͍͑ͨ৘ใ
    ʹ

    View full-size slide

  23. εΫϦʔϯϦʔμʔͰಡΈ্͛
    ը૾ͷ୅ΘΓʹςΩετΛදࣔ
    ୅ସςΩετ

    View full-size slide

  24. ը૾͕ݟ͑Δਓʹ΋ςΩετͰ
    ఻͑ͨํ͕ྑ͍৘ใ͸ɺ
    ΩϟϓγϣϯΛ׆༻͠Α͏ʂ

    View full-size slide

  25. ۭࣨঢ়گΧϨϯμʔ
    Case 2

    View full-size slide

  26. ۭࣨঢ়گΧϨϯμʔ
    Case 2

    ʢܕʣ
    ৭֮ো֐ͷํ͕ݟΔͱʜʁ
    ϞϊΫϩͰϓϦϯτͨ͠Βʜʁ

    View full-size slide

  27. ۭࣨঢ়گΧϨϯμʔ
    Case 2
    ৭͚ͩʹґଘ͠ͳ͍఻͑ํΛߟ͑Α͏

    View full-size slide

  28. ۭࣨঢ়گΧϨϯμʔ
    Case 2
    ৭͚ͩʹґଘ͠ͳ͍఻͑ํΛߟ͑Α͏
    จࣈͱഎܠͷ
    ίϯτϥετ΋
    νΣοΫʂ

    View full-size slide

  29. هࣄͷϥΠςΟϯά
    Case 3
    ૷০໨తͰ͸ͳ͘
    ҙຯ΍ߏ଄Λ఻͑ΔͨΊʹ
    ࢖͏ͷ͕ϙΠϯτʂ

    View full-size slide

  30. هࣄͷϥΠςΟϯά
    Case 3
    ʻλάʼςΩετʻλάʼ
    ྫʣಉ͡ݟग़͠Ϩϕϧ͚ͩൈ͖ग़ͯ͠ಡΉ
    ϚʔΫΞοϓ

    View full-size slide

  31. هࣄͷϥΠςΟϯά
    Case 3
    ίʔυΛॻ͔ͳ͍ਓͰ΋
    ϚγϯϦʔμϒϧʹग़དྷΔʂ

    View full-size slide

  32. هࣄͷϥΠςΟϯά
    Case 3
    ͜Ε΋ཱ೿ͳΞΫηγϏϦςΟʂ
    ݟग़͠ߏ଄Λҙࣝ͢Δ
    ར༻ऀʹͱͬͯ෼͔Γ΍͍͢ݴ༿Λ࢖͏
    ϦϯΫઌ͕༧ଌͰ͖ΔϦϯΫςΩετʹ͢Δ
    ૷০໨తͷจࣈ৭ͷཚ༻͸ආ͚Δ

    View full-size slide

  33. ΞΫηγϏϦςΟ࣍ͷҰา
    ΋ͬͱ஌Γ͍ͨʂ
    ϙΠϯτ͸ࣗ෼Ҏ֎ͷ
    ʮࢹ఺ʯ
    Λ૿΍͢͜ͱ

    View full-size slide

  34. ߹ཧత഑ྀ౳۩ମྫσʔλू
    2016.4.1
    ো֐ऀࠩผղফ๏
    http://www8.cao.go.jp/shougai/suishin/jirei/index.html
    ো֐ͷछผ΍ੜ׆ͷ৔໘͔ΒࣄྫΛ୳ͤΔ

    View full-size slide

  35. ΢ΣϒίϯςϯπΛ
    ΞΫηγϒϧʹ
    ͢ΔͨΊͷΨΠυϥΠϯ
    WCAG 2.0
    = JIS X 8341-3

    View full-size slide

  36. ΢ΣϒίϯςϯπΛ
    ΞΫηγϒϧʹ
    ͢ΔͨΊͷΨΠυϥΠϯ
    WCAG 2.0
    = JIS X 8341-3
    ͲΜͳ৔໘Ͱ
    ͲΜͳਓ͕
    ͲΜͳ෩ʹࠔΔ͔Β
    ͜͏ରॲ͠Α͏
    ΨΠυϥΠϯ

    View full-size slide

  37. ͜ͷΨΠυϥΠϯʹै͏ͱɺ
    ଟ͘ͷ৔߹ɺ
    ΄ͱΜͲͷར༻ऀʹͱͬͯ
    ΢Σϒίϯςϯπ͕
    ΑΓ࢖͍΍͘͢ͳΔɻ

    View full-size slide

  38. ࣗ෼ͷ஌Βͳ͍୭͔ͷ࢖͍ํΛ஌Γ
    ଟ༷ੑΛड͚ೖΕΔ͜ͱͰ
    ΈΜͳͷϢʔβϏϦςΟ΋޲্͢Δ

    View full-size slide

  39. ΑΓଟ͘ͷਓʹಧ͚ΔͨΊʹ
    ΞΫηγϏϦςΟͷ
    ʮࢹ఺ʯ
    Λ
    औΓೖΕͯΈΑ͏
    ࠓͷࣗ෼ͷࢹ఺Λগ͠޿͛ͯ

    View full-size slide

  40. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    Empower the smalls to go big.
    @mjmjsachi

    View full-size slide

  41. ߴদ࠙਌ձͰ഑෍ͨ͠
    ʮA11yϙελʔʯ

    A4൛PDF https://bit.ly/2Lnil6D
    ʬ͓·͚ʭ

    View full-size slide