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

by majimasachi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ʢࡀҎ্ʣ 27.7ˋ ߴྸऀ ࠤ౻͞Μ ླ໦͞Μ ߴڮ͞Μ ࢀߟจݙɿฏ੒೥൛ো֐ऀനॻʦ಺ֳ෎ʧʗ໊ࣈ༝དྷOFUʛશࠃ໊ࣈϥϯΩϯάʗ౷ܭτϐοΫε/P౷ܭ͔ΒΈͨզ͕ࠃͷߴྸऀʦ૯຿লʧ ࠃຽͷ 6ˋ ʹ 5,114,000ਓ ԿΒ͔ͷ ো֐Λ΋ͭਓ ਎ମো֐ ஌తো֐ ਫ਼ਆো֐ 7,411,000ਓ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

6* Ϛγϯ Ϧʔμϒϧ ώϡʔϚϯ Ϧʔμϒϧ ηϚϯςΟοΫ Φʔϓϯσʔλ ϥΠςΟϯά ৘ใઃܭ ϏδϡΞϧ ΠϯλϥΫγϣϯ γεςϜ ΢ΣϒʹؔΘΔશͯͷਓͰͭ͘Δ΋ͷ ΞΫηγϏϦςΟͷ෼ղ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ۭࣨঢ়گΧϨϯμʔ Case 2

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

هࣄͷϥΠςΟϯά Case 3 ίʔυΛॻ͔ͳ͍ਓͰ΋ ϚγϯϦʔμϒϧʹग़དྷΔʂ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

΢ΣϒίϯςϯπΛ ΞΫηγϒϧʹ ͢ΔͨΊͷΨΠυϥΠϯ WCAG 2.0 = JIS X 8341-3 ͲΜͳ৔໘Ͱ ͲΜͳਓ͕ ͲΜͳ෩ʹࠔΔ͔Β ͜͏ରॲ͠Α͏ ΨΠυϥΠϯ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

·ͱΊ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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