明日からできるデザイン・コンテンツのアクセシビリティ入門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
850
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
8
2.3k
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
11
24k
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
1
680
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
4
410

Other Decks in Design

See All in Design
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
0
380
C970be04e110498ee6011bed00e90c23?s=48 airi0817
0
920
29ad89731f87796990191570c068c324?s=48 enpipi
0
320
Bdf445461753c32eb09fbf93bef32362?s=48 jtatelucas
0
230
2cf1be4c4ec31a6ec1f3229dafddb6a8?s=48 iwabm186
0
390
91e7aee9769836f448a9f1ce91255749?s=48 mathatelle
2
130
Cbad96d5495a9ba501d2518042c89502?s=48 kazuakiebe
3
370
9ff4380b912aed4cdbd44bc921614cc6?s=48 avyjonsay
0
120
7e0c7d1a8943ab11891a7e304eb384cd?s=48 tthhmmss
0
220
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
200
5478c15ea5fd291f3888b32652227cd5?s=48 futoshimotoyama
0
680
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
110

Featured

See All Featured
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
339
26k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
309
21k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
325
15k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
105
14k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
493
110k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k

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