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

Transcript

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

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

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

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

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

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

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

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

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

10. None

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

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

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

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

    5,114,000ਓ ԿΒ͔ͷ
    ো֐Λ΋ͭਓ ਎ମো֐
    ஌తো֐
    ਫ਼ਆো֐ 7,411,000ਓ

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

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

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

18. 6* Ϛγϯ
    Ϧʔμϒϧ ώϡʔϚϯ
    Ϧʔμϒϧ ηϚϯςΟοΫ Φʔϓϯσʔλ ϥΠςΟϯά ৘ใઃܭ ϏδϡΞϧ

    ΠϯλϥΫγϣϯ γεςϜ ΢ΣϒʹؔΘΔશͯͷਓͰͭ͘Δ΋ͷ ΞΫηγϏϦςΟͷ෼ղ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ͲΜͳਓ͕
    ͲΜͳ෩ʹࠔΔ͔Β
    ͜͏ରॲ͠Α͏ ΨΠυϥΠϯ

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

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

40. ·ͱΊ

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

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

43. 
    ߴদ࠙਌ձͰ഑෍ͨ͠
    ʮA11y
    ϙελʔʯ
 A4൛PDF https://bit.ly/2Lnil6D ʬ
    ͓·͚
    ʭ