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

73239a63bba7e11d6f2621caceef76d1?s=47 majimasachi
July 15, 2018
Design
7
1.6k

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

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

73239a63bba7e11d6f2621caceef76d1?s=128

majimasachi

July 15, 2018
Tweet

More Decks by majimasachi

See All by majimasachi
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
10
720
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
8
2.2k
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
11
23k
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
1
660
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
4
400

Other Decks in Design

See All in Design
664cffa199f22da94fb83c6fe1c70bbb?s=48 jvetrau
0
8.6k
0d8a5f112b203f084178d4432b10e354?s=48 chyanime
0
130
2b0240d878444a15410d3f16b3ab2a97?s=48 siporin
2
120
07d788425ce835a38da4ab23a537b407?s=48 gavaru
0
110
C66a4b0ef3d970bfbe5cc00df63804d8?s=48 polverelli
1
190
6957dcf9e6e3d9243fa0a06228bfb7c0?s=48 coppelux
1
350
Cdf45605a1adfab81061bc1c4444847a?s=48 barsaka2
1
310
1777ae7e124a0cadd15d9f88d871c963?s=48 toranomanji
0
180
0d8a5f112b203f084178d4432b10e354?s=48 chyanime
0
120
4d8505652eb59851c53b1fac598dc57b?s=48 ceciliaditerlizzi
0
100
696e66ab859446f91081e37e56444730?s=48 event2020
0
230
2b0240d878444a15410d3f16b3ab2a97?s=48 siporin
1
280

Featured

See All Featured
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
25k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
8
1.2k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
10k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
256
24k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
11k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
51
1.8k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
123
21k
78b475797a14c84799063c7cd073962f?s=48 holman
446
130k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
330
29k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
2
290
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k

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 ʬ͓·͚ʭ