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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. ۭࣨঢ়گΧϨϯμʔ
    Case 2
    1ܕ
    ʢܕʣ
    ৭֮ো֐ͷํ͕ݟΔͱʜʁ
    ϞϊΫϩͰϓϦϯτͨ͠Βʜʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide