明日からできるデザイン・コンテンツのアクセシビリティ入門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
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 ड͚औΔଆ
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 ʬ
    ͓·͚
    ʭ