2019-08 アクセシビリティ/2019-08 Accessibility

Slide 1

Slide 1 text

ΞΫηγϏϦςΟ 開発研修 ΞΫηγϏϦςΟ

Slide 2

Slide 2 text

ΞΫηγϏϦςΟͱ͸ͳʹ͔ʁ 復習

Slide 3

Slide 3 text

ΞΫηγϏϦςΟʹো֐ऀɾߴྸऀରԠʁ

Slide 4

Slide 4 text

ΞΫηγϏϦςΟͱ͸ ো֐ऀɾߴྸऀΛؚΊͯʮ͢΂ͯͷਓʯ͕ ੡඼΍αʔϏεʹΞΫηεͰ͖Δ͜ͱ

Slide 5

Slide 5 text

ʮ͢΂ͯͷਓʯ 個⼈の特性デバイス場⾯・状況

Slide 6

Slide 6 text

αΠϘ΢ζͷཧ૝ νʔϜϫʔΫ͋;ΕΔࣾձΛ૑Δ

Slide 7

Slide 7 text

αΠϘ΢ζʹͱͬͯɺΞΫηγϏϦςΟͱ͸ ʮϢʔβ͕νʔϜʹΞΫηεͰ͖Δೳྗʯ

Slide 8

Slide 8 text

ΞΫηγϏϦςΟΛ֬อ͢Δ͜ͱ͸ ʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏Ϣʔβͷئ͍Λ ଚॏ͢Δ͜ͱ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

۩ମతʹͲ͏ରԠ͢Ε͹Α͍ʁ

Slide 11

Slide 11 text

https://waic.jp/docs/WCAG20/

Slide 12

Slide 12 text

• 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOF • 8$͕ൃߦ͍ͯ͠ΔΞΫηγϏϦςΟΨΠυϥΠϯ • ࠃ಺֎ͷ๏཯΍+*4*40౳ͷن֨͸8$"(ʹ४ڌ • ߲໨ΛϨϕϧผʹ෼ྨʢ" "" """ʣ 8$"(

Slide 13

Slide 13 text

ΞΫηγϏϦςΟͷղ๤ ώϡʔϚϯ Ϧʔμϒϧ Ϛγϯ Ϧʔμϒϧ

Slide 14

Slide 14 text

ώϡʔϚϯϦʔμϒϧ

Slide 15

Slide 15 text

ʮ͢΂ͯͷਓʯ͕஌֮ɾཧղɾૢ࡞Ͱ͖Δ͔ ώϡʔϚϯϦʔμϒϧ

Slide 16

Slide 16 text

൑ผՄೳ ίϯςϯπΛɺར༻ऀʹͱͬͯݟ΍͘͢ɺฉ͖΍͍͢΋ͷʹ͢Δ͜ͱ ͜Εʹ͸લܠͱഎܠΛ۠ผ͢Δ͜ͱ΋ؚΉ ஌֮Մೳ

Slide 17

Slide 17 text

े෼ͳ࣌ؒ ར༻ऀ͕ίϯςϯπΛಡΈɺ࢖༻͢ΔͨΊʹे෼ͳ࣌ؒΛఏڙ͢Δ͜ͱ ൃ࡞ͷ๷ࢭ ൃ࡞Λى͜͢Α͏ͳίϯςϯπΛઃܭ͠ͳ͍͜ͱ φϏήʔγϣϯՄೳ ར༻ऀ͕φϏήʔτͨ͠ΓɺίϯςϯπΛ୳͠ग़ͨ͠Γɺ ݱࡏҐஔΛ֬ೝͨ͠Γ͢Δ͜ͱΛखॿ͚͢ΔखஈΛఏڙ͢Δ͜ͱ ཧղՄೳ

Slide 18

Slide 18 text

ಡΈ΍͢͞ ςΩετͷίϯςϯπΛಡΈ΍͘͢ཧղՄೳʹ͢Δ͜ͱ ༧ଌՄೳ 8FCϖʔδͷදࣔ΍ڍಈΛ༧ଌՄೳʹ͢Δ͜ͱ ೖྗࢧԉ ೖྗऀͷؒҧ͍Λ๷͗ɺमਖ਼Λࢧԉ͢Δ͜ͱ ૢ࡞Մೳ

Slide 19

Slide 19 text

https://developer.apple.com/design/human- interface-guidelines/accessibility/

Slide 20

Slide 20 text

͋ͳͨͷՁ஋ΛߴΊΔ8FCΞΫηγϏϦςΟ IUUQTXXXTMJEFTIBSFOFUSJLJIBXFC

Slide 21

Slide 21 text

ϚγϯϦʔμϒϧ

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

• ςΩετϒϥ΢β • ఺ࣈσΟεϓϨΠ • εΫϦʔϯϦʔμʔ • ະདྷͷσόΠε 8FCͷ͔ͨͪ͸͞·͟· • ϏδϡΞϧϒϥ΢β • εϚʔτϑΥϯ • ݕࡧΤϯδϯʹΑΔݕࡧ݁Ռ • εΫϨΠϐϯάαʔϏε

Slide 29

Slide 29 text

ίϯςϯπ͕Ϣʔβʹಧ͘·Ͱ ৘ใ ίϯςϯπ )5.-$44+4 ϒϥ΢β ࢧԉٕज़ Ϣʔβʔ

Slide 30

Slide 30 text

ϚγϯϦʔμϒϧͷྫ

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

͜ΕͰΑ͍ͩΖ͏͔

Slide 33

Slide 33 text

ը૾ͷ಺༰Λػցʹཧղͤ͞Α͏ kintoneアプリストア

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

ݟग़͠Ͱ͋Δ͜ͱΛػցʹཧղͤ͞Α͏

Slide 36

Slide 36 text

8FCΞΫηγϏϦςΟ֬อ جຊͷʮΩʯ

Slide 37

Slide 37 text

https://weba11y.jp/pdf/weba11y-10basics.pdf

Slide 38

Slide 38 text

֤ϖʔδʹݻ༗Ͱɺผͷ8FCαΠτͱ۠ผͰ͖ΔΑ͏ʹ ϖʔδͷ಺༰͕෼͔ΔϖʔδλΠτϧΛهड़͢Δ ࣾ௕ѫࡰ – αΠϘ΢ζגࣜձࣾ

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

ϚγϯϦʔμϒϧͷجຊ • εΫϦʔϯϦʔμʔ͸ʮݟग़͠ʯʮϦετʯͳͲɺߏ଄ΛಡΉ • ݟग़͠͝ͱʹδϟϯϓ͢ΔͳͲɺಡΈඈ͹͢͜ͱ͕Ͱ͖Δ ݟग़͠΍ϦετͳͲͷจॻߏ଄ΛϚʔΫΞοϓ͢Δ

kintoneΞϓϦετΞ

Slide 41

Slide 41 text

ϦϯΫจݴ͚ͩͰҙຯ͕Θ͔ΔΑ͏ʹ͢Δ ʮ͜͜ΛΫϦοΫʯʮ͞ΒʹදࣔʯʮৄࡉΛݟΔʯʜ จݴΛม͑Δͷ͕೉͚͠Ε͹ɺपғͷݟग़͠ͱ૊Έ߹ΘͤΔ ϦϯΫςΩετ͸ɺϦϯΫઌ͕෼͔Δจݴʹ͢Δ

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

͢΂ͯͷJNHཁૉʹద੾ͳBMUଐੑΛ͚ͭΔ ৘ใΛ఻͍͑ͯΔը૾ʹ୅ସςΩετΛఏڙ͢Δ

Slide 44

Slide 44 text

BMUଐੑͳ͠ BMU BMUը૾ BMUαΠϘ΢ζ https://jsfiddle.net/ux28cdvk/1/

Slide 45

Slide 45 text

୅ସςΩετͷྫ ݕࡧϘλϯ

Slide 46

Slide 46 text

Pie chart: Browser Share -
Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari
6% and Opera 4%.

୅ସςΩετͷྫ r ԁάϥϑ

Slide 47

Slide 47 text

୅ସςΩετΛলུ͢Δྫ

Home

Slide 48

Slide 48 text

৭ͷΈʹґଘͨ͠৘ใΛఏڙ͠ͳ͍ ৘ใΛ఻͑Δ৭ͷ࢖͍ํʹ஫ҙ͢Δ Ұൠ৭֮ 1ܕ৭֮ 5ܕ৭֮

Slide 49

Slide 49 text

" " " " " " " " " " จࣈͱഎܠ৭ͷίϯτϥετൺΛҎ্ʹ͢Δ ৘ใΛ఻͑Δ৭ͷ࢖͍ํʹ஫ҙ͢Δ

Slide 50

Slide 50 text

$ISPNF%FWFMPQFS5PPMTͰଌఆͰ͖Δ ίϯτϥετൺͷଌఆ

Slide 51

Slide 51 text

ը໘શମΛ֦େͯ͠ɺཧղɾૢ࡞Ͱ͖ͳ͍಺༰͕ͳ͍͔ ཁૉͷதͷจࣈ͕͸Έग़ͨ݁͠ՌɺผͷཁૉʹඃΔͳͲ Ϣʔβʔ͕ίϯςϯπΛ֦େදࣔͰ͖ΔΑ͏ʹ͢Δ

Slide 52

Slide 52 text

https://bozuman.cybozu.com/k/13084/show#record=3433

Slide 53

Slide 53 text

https://bozuman.cybozu.com/k/13084/show#record=3433

Slide 54

Slide 54 text

ΩʔϘʔυ͚ͩͰ΋ૢ࡞Ͱ͖ΔΑ͏ʹ͢Δ

保存

Slide 55

Slide 55 text

ଐੑ஋Ͱमਖ਼͠Α͏ͱ͢Δͱʜ

保存

Slide 56

Slide 56 text

ΫϦοΫͰ͖Δཁૉ͸ Bཁૉ PS CVUUPOཁૉ Ͱ࣮૷͠Α͏ ద੾ͳཁૉΛ࢖͓͏ ボタン

Slide 57

Slide 57 text

• σϑΥϧτͷ$44Ͱ͸ΩʔϘʔυ͕ࢹೝͰ͖Δ • PVUMJOFOPOF͢ΔͱɺσϑΥϧτελΠϧ͕ফ͑Δ ͜ͷ৔߹ɺඞͣGPDVTελΠϧΛ͚ͭΔ • SFTFUDTTΛ࢖͏৔߹͸ཁ஫ҙ ΩʔϘʔυૢ࡞ΛࢹೝͰ͖ΔΑ͏ʹ͠Α͏ a:focus { text-decoration: underline; }

Slide 58

Slide 58 text

http://www.outlinenone.com/

Slide 59

Slide 59 text

• εΫϦʔϯϦʔμʔ͸ϑΥʔϜʹϑΥʔΧεͨ͠ͱ͖ ϥϕϧΛಡΈ্͛Δ • ϥϕϧ͕͍͍ͭͯͳ͍ͱɺԿΛೖྗͯ͠ྑ͍͔Θ͔Βͳ͍ ϑΥʔϜίϯτϩʔϧͷϥϕϧ΍આ໌ΛϚʔΫΞοϓ͢Δ ユーザ名

Slide 60

Slide 60 text

ϥϕϧΛ͚ͭΔํ๏ Ϣʔβ໊ ラベルが配置できるときラベルが配置できないとき

Slide 61

Slide 61 text

Ϣʔβ͕ΤϥʔϝοηʔδΛಡΜͰɺ ͲͷΑ͏ʹमਖ਼͢Ε͹ྑ͍͔ཧղͰ͖Δ ΤϥʔϝοηʔδͰ͸ΤϥʔՕॴͱमਖ਼ํ๏Λ໌ࣔ͢Δ

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ ＝ Ի੠Ͱఏڙ͞ΕΔ৘ใ ө૾Ͱఏڙ͞ΕΔ৘ใ

Slide 64

Slide 64 text

• ొ৔ਓ෺ͷൃ࿩಺༰ • #(.ͳͲͷԻָ • ഥखɺ׻੠ • ؀ڥԻʢి࿩ͷݺग़ԻɺυΞ͕։ด͢ΔԻɺνϟΠϜɺཕ໐ͳͲʣ ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ

Slide 65

Slide 65 text

• ΞΫηγϏϦςΟ͸ʮ͢΂ͯͷਓʯͷͨΊ • ΞΫηγϏϦςΟͷղ๤ • ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ΞΫηγϏϦςΟجຊͷΩ ·ͱΊ

Slide 66

Slide 66 text

ΞΫηγϏϦςΟʹ ΑΓਂ͘औΓ૊Ήʹ͸ʁ

Slide 67

Slide 67 text

• σβΠχϯά8FCΞΫηγϏϦςΟ ΞΫηγϏϦςΟڭՊॻͷܾఆ൛ • ίʔσΟϯά8FCΞΫηγϏϦςΟ ΑΓϚγϯϦʔμϒϧͳ)5.-Λॻͨ͘Ίʹ • ΠϯΫϧʔγϒ)5.-$44+BWB4DSJQU ༏Εͨॻ੶Λಡ΋͏