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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

    None
11. 11.

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

12. 12.

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

13. 13.

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

14. 14.

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

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

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

16. 16.

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

17. 17.

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

18. 18.

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

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

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

20. 20.

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

21. 21.

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

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

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

29. 29.

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

30. 30.

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

31. 31.

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

32. 32.

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

33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

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

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

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

39. 39.

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

40. 40.

    ·ͱΊ

41. 41.

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

42. 42.

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

43. 43.

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