WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ〜「優しいウェブサイト」作りをはじめよう〜」

by tobotoboto

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

8PSE1SFTTͰ΋ ҙ͍ࣝͨ͠ΞΫηγϏϦςΟ ʙ ʮ༏͍͠΢ΣϒαΠτʯ ࡞ΓΛ͸͡ΊΑ͏ʙ גࣜձࣾ(BKJ-BCP ԣా౦฼ࢠ৿ా૖ 8PSE$BNQ5PLZP

Slide 3

Slide 3 text

ࣗ ݾ ঺ հ ৿ా૖ 8FCσβΠφʔ ϚʔΫΞοϓΤϯδχΞ !TPV@MBC ԣా౦฼ࢠ ΞΫηγϏϦςΟʔαϙʔλʔ ϚʔΫΞοϓΤϯδχΞ !UPCPUPCPUP

Slide 4

Slide 4 text

΢ΣϒΞΫηγϏϦςΟ ͷ঺հ

Slide 5

Slide 5 text

΢ΣϒΞΫηγϏϦςΟͬͯ ୭ͷͨΊʹʁ

Slide 6

Slide 6 text

w ࢹ֮ো֐ʢશ໡ɾऑࢹͳͲʣ w ௌ֮ো֐ʢΖ͏͋ɾ೉ௌͳͲʣ w ӡಈো֐ w ೝ஌ো֐ w ݴޠো֐ w ֶशো֐ʢಡࣈো֐ʣʜ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ ো֐ͷ͋ΔਓͷͨΊʹ

Slide 7

Slide 7 text

૯຿ল ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ  http://www.soumu.go.jp/menu_news/s-news/ 2005/051215_1_wmv.html ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 8

Slide 8 text

૯຿ল ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ  http://www.soumu.go.jp/menu_news/s-news/ 2005/051215_1_wmv.html ࢹ֮ো֐ऀʢશ໡ʣͷ΢Σϒϖʔδར༻ํ๏ ࢹ֮ো֐ऀʢऑࢹʣͷ΢Σϒϖʔδར༻ํ๏ ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 9

Slide 9 text

໡໨ͷiPhoneϢʔβʔʹฉ͍ͨɺࢹ֮Λ࢖Θͳ͍ ڻ͖ͷεϚϗૢ࡞ज़ https://king.mineo.jp/magazines/special/387 ໡໨ͷJ1IPOFϢʔβʔʹฉ͍ͨɺ ࢹ֮Λ࢖Θͳ͍ڻ͖ͷεϚϗૢ࡞ज़ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 10

Slide 10 text

ো֐ऀݖར৚໿ ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿  http://www.mofa.go.jp/mofaj/gaiko/jinken/ index_shogaisha.html w ࠃ࿈ͷఆΊΔࠃࡍ৚໿ w ೔ຊ͸೥݄ʹక݁ɺ ಉ೥݄ΑΓޮྗΛൃੜ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 11

Slide 11 text

ো֐ऀݖར৚໿ ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿ɹ৚จʢ࿨จʣ  http://www.mofa.go.jp/mofaj/files/000018093.pdf ɹక໿ࠃ͸ɺ·ͨɺ࣍ͷ͜ͱͷͨΊͷద౰ͳાஔΛͱΔ ʙུʙ H ো֐ऀ͕৽ͨͳ৘ใ௨৴ػثٴͼ৘ใ௨৴γεςϜʢΠϯλʔωοτΛ ؚΉɻʣΛར༻͢ΔػձΛ༗͢Δ͜ͱΛଅਐ͢Δ͜ͱɻ l z Ҿ༻ݩɿ֎຿লɹো֐ऀݖར৚໿ɹ࿨จΑΓ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 12

Slide 12 text

w ೔ຊͷ๏཯ w ೥݄ʹࢪߦ wʮෆ౰ͳࠩผతऔѻ͍ʯΛ ېࢭ͠ʮ߹ཧత഑ྀͷఏ ڙʯ ΛٻΊΔ ো֐ऀࠩผղফ๏ ಺ֳ෎ ো֐Λཧ༝ͱ͢Δࠩผͷղফͷਪਐ  http://www8.cao.go.jp/shougai/suishin/sabekai.html ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 13

Slide 13 text

߹ཧత഑ྀͷఏڙͱ͸ʁ 2ʙུʙো֐ͷ͋ΔํͳͲ͔ΒԿΒ͔ͷ഑ྀΛٻΊΔҙࢥͷද໌͕͋ͬͨ৔߹ʹ͸ɺ ෛ୲ʹͳΓա͗ͳ͍ൣғͰɺࣾձతোน˞ΛऔΓআͨ͘ΊʹඞཁͰ߹ཧతͳ഑ྀʢҎԼ Ͱ͸ʮ߹ཧత഑ྀʯͱݺͼ·͢ɻʣΛߦ͏͜ͱ͕ٻΊΒΕ·͢ɻ͜͏ͨ͠഑ྀΛߦΘͳ ͍͜ͱͰɺো֐ͷ͋Δํͷݖརརӹ͕৵֐͞ΕΔ৔߹ʹ͸ɺࠩผʹ౰ͨΓ·͢ɻ 2ʙུʙ͜ͷ๏཯Ͱ͸ɺ߹ཧత഑ྀʹؔͯ͠͸ɺҰ཯ʹٛ຿ͱ͢ΔͷͰ͸ͳ͘ɺߦ੓ ػؔͳͲʹ͸཰ઌͨ͠औ૊Λߦ͏΂͖ओମͱͯٛ͠຿Λ՝͢ҰํͰɺຽؒࣄۀऀʹؔ͠ ͯ͸౒ྗٛ຿Λ՝্ͨ͠ͰɺରԠࢦ਑ʹΑͬͯࣗओతͳऔ૊Λଅ͢͜ͱͱ͍ͯ͠·͢ɻ l z w ߦ੓ػؔɿ๏ఆٛ຿ w ຽؒࣄۀɿ౒ྗٛ຿ Ҿ༻ݩɿ಺ֳ෎ɹো֐Λཧ༝ͱ͢Δࠩผͷղফͷਪਐʹؔ͢Δ๏཯ʹ͍ͭͯͷΑ͋͘Δ࣭͝໰ͱճ౴ʻࠃຽ޲͚ʼΑΓ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 14

Slide 14 text

ো֐ͷ͋ΔਓͷͨΊ͚ͩʹ ಛผͳίτΛ͢Δͷ͕ ΢ΣϒΞΫηγϏϦςΟʁ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 15

Slide 15 text

ো֐ͷ͋ΔਓͷͨΊ͚ͩʹ ಛผͳίτΛ͢Δͷ͕ ΢ΣϒΞΫηγϏϦςΟʁ ʜ͜Μͳ ܦݧ͋Γ·ͤΜ͔ʁ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 16

Slide 16 text

ٸ͍Ͱ͍Δɾ߄͍ͯͯΔ ɹɹɹɹˣ w Ϙλϯ͕খͯ͘͞λοϓͰ͖ͳ͍ w ݟग़͕͠ͳ͘ɺ จষྔ͕ଟ͗ͯ͢ ඞཁͳ৘ใ͕͙͢ݟ͔ͭΒͳ͍ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 17

Slide 17 text

௚ࣹ೔ޫͷԼ ɹɹˣ w ίϯτϥετ͕ऑͯ͘ɹɹɹɹɹ ݟͮΒ͍ɾಡΈͮΒ͍ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 18

Slide 18 text

ެڞػؔΛ࢖͍ͬͯΔ ɹɹɹɹˣ w ճઢঢ়گ͕ѱ͘σʔλ͕ಡΈ ࠐ·Εͳ͍ w ԻΛग़ͤͳ͍ w पғ͕૽͕͍͠ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 19

Slide 19 text

ոզΛͨ͠ɾ۩߹͕ѱ͍ ɹɹɹɹˣ w ΩʔϘʔυ΍Ϛ΢εΛ࢖͑ͳ͍ w Ի੠Ͱૢ࡞Λ͢Δ w ೖྗʹ͕͔͔࣌ؒΔ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 20

Slide 20 text

ࡀΛͱͬͨ ɹɹˣ w จࣈ͕ಡΈͮΒ͍ɾݟͮΒ͍ w Τϥʔʹؾ͔ͮͳ͍ w ཧղʹ͕͔͔࣌ؒΔ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 21

Slide 21 text

w ୭͠΋͕ɺ͍ͭ΋͸ͷঢ়ଶͰ΋ৗʹ ͩͱ͸ݶΒͳ͍ w ୭Ͱ΋ɾ͍ͭͰ΋ɾͲ͜Ͱ΋ɾͲΜͳঢ়گͰ΋ ໨తͷ৘ใʹͨͲΓண͖ɺར༻Ͱ͖ΔΑ͏ʹ w ͋ͳͨͷൃ৴͢Δ৘ใʹΞΫηεͰ͖Δਓͷ਺ Λ࠷େʹ͠Α͏ શͯͷਓͷͨΊʹʂ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 22

Slide 22 text

ΞΫηγϏϦςΟͱ͸੡඼ɺσόΠεɺαʔϏ εɺ͋Δ͍͸؀ڥ͕ͲΕ͚ͩଟ͘ͷਓʹར༻Մ ೳʹͳ͍ͬͯΔ͔ͱ͍͏͜ͱΛࣔ͢౓߹͍ͷ͜ ͱͰ͋Δɻ $ZOUIJB%8BEEFMMcIUUQXXXJDESJPSH$ZOUIJB8DZOUIJB@EIUN l z ΞΫηγϏϦςΟ੠໌ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

Slide 23

Slide 23 text

8PSE1SFTTͷ ΢ΣϒΞΫηγϏϦςΟ͸ʁ

Slide 24

Slide 24 text

8PSE1SFTT$PEFY 8PSE1SFTT$PEFY೔ຊޠ൛  IUUQTXQEPDTPTEOKQΞΫηγϏϦςΟ

Slide 25

Slide 25 text

ແྉͷ WordPress ςʔϚ > ΞΫηγϏϦςΟରԠ  https://ja.wordpress.org/themes/tags/accessibility-ready/ ΞΫηγϏϦςΟରԠͷެࣜςʔϚ

Slide 26

Slide 26 text

w ʮBDDFTTJCJMJUZ@SFBEZʯλάͷ͋ΔςʔϚ w ࣗ࡞ͨ͠ҰൠςʔϚ΋ɺΞΫηγϏϦςΟϨϏϡʔ Λड͚Δ͜ͱͰରԠςʔϚΛએݴͰ͖Δ ΞΫηγϏϦςΟରԠͷެࣜςʔϚ ແྉͷ WordPress ςʔϚ > ΞΫηγϏϦςΟରԠ  https://ja.wordpress.org/themes/tags/accessibility-ready/

Slide 27

Slide 27 text

8PSE1SFTT"DDFTTJCJMJUZ5FBN .BLF8PSE1SFTT"DDFTTJCMF  IUUQTNBLFXPSEQSFTTPSHBDDFTTJCJMJUZXPSEQSFTTHPFTXDBH

Slide 28

Slide 28 text

.BLF8PSE1SFTT"DDFTTJCMF  IUUQTNBLFXPSEQSFTTPSHBDDFTTJCJMJUZXPSEQSFTTHPFTXDBH 8PSE1SFTTͷίΞͱίΞʹ෇ଐ͢ΔςʔϚ܈ʹ৽ن௥ Ճ·ͨ͸Ξοϓσʔτ͞ΕΔίʔυ͸શͯɺΨΠυϥΠ ϯ8$"(ͷϨϕϧ""ʹ४ڌ͠ͳͯ͘͸ͳΒͳ͍ɻ All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA. l z 8PSE1SFTT"DDFTTJCJMJUZ5FBN

Slide 29

Slide 29 text

8$"(ͱ +*49

Slide 30

Slide 30 text

w 8$͕קࠂ w ΢ΣϒίϯςϯπΛΑΓ ΞΫηγϒϧʹ͢ΔͨΊͷ ΨΠυϥΠϯ w *40*&$ ͱͯ͠ࠃࡍن֨ʹ ೥݄ Web Content Accessibility Guidelines (WCAG) 2.0ʢݪจʣ  https://www.w3.org/TR/WCAG20/ 8$"(ͱ͸

Slide 31

Slide 31 text

w ೔ຊ޻ۀن֨ w ೔ຊಠࣗͷࢦ਑ΛؚΉن֨ ͔Β*40*&$ ͷҰகن֨ ʢ*%5ʣ ΁ w ೥݄ʹվగ Ӿཡɿʮ೔ຊ޻ۀඪ४ௐࠪձʢJISCʣʯWebαΠτͷʮJISݕࡧʯ  http://www.jisc.go.jp/app/JPS/JPSO0020.html +*49ͱ͸

Slide 32

Slide 32 text

+*49ʹରԠ͢Δͱ 8$"(ʢࠃࡍن֨ʣʹ ४ڌ͢Δ͜ͱʹͳΔ +*49 8$"( *40*&$ Ұகن֨ʢ*%5ʣ

Slide 33

Slide 33 text

Ϩϕϧ"ʜݸͷୡ੒ج४ Ϩϕϧ""ʜݸͷୡ੒ج४ Ϩϕϧ"""ʜݸͷୡ੒ج४ w վగͰ8$"(ͱಉ͡ୡ੒ج४ͱϨϕϧΛ࠾༻ w Ϩϕϧ"""ΛαΠτશମͷ੍࡞ํ਑ͱͯ͠ཁ݅ͱ ͢Δ͜ͱ͸ਪ঑͞Ε͍ͯͳ͍ +*49ͷ ୡ੒ج४ͱϨϕϧ

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Ϩϕϧ"ʜݸͷୡ੒ج४ Ϩϕϧ""ʜݸͷୡ੒ج४ Ϩϕϧ"""ʜݸͷୡ੒ج४ w վగͰ8$"(ͱಉ͡ୡ੒ج४ͱϨϕϧΛ࠾༻ w Ϩϕϧ"""ΛαΠτશମͷ੍࡞ํ਑ͱͯ͠ཁ݅ͱ ͢Δ͜ͱ͸ਪ঑͞Ε͍ͯͳ͍ +*49ͷ ୡ੒ج४ͱϨϕϧ Ϩϕϧ""ʹ४ڌ

Slide 36

Slide 36 text

l "ద༻ൣғ ͜ͷن֨͸ɺߴྸऀ͓Αͼো֐ͷ͋ΔਓΛؚΉશͯͷར༻ऀ͕ɺʙ ུʙ ΢Σϒίϯςϯπͱ͸ʙུʙྫ͑͹ɺΠϯλʔωοτຢ͸Πϯτϥ ωοτΛհͯ͠ఏڙ͞ΕΔ΢ΣϒαΠτɺ΢ΣϒΞϓϦέʔγϣϯɺ ΢ΣϒγεςϜͳͲͷίϯςϯπɺٴͼ$%30.ͳͲͷه࿥ഔମΛ հͯ͠഑෍͞ΕΔిࢠจॻ͕ڍ͛ΒΕΔɻͦͷଞɺ͜ͷن֨͸ࢧԉٕ ज़ΛؚΉϢʔβʔΤʔδΣϯτΛ༻͍ͯར༻͞ΕΔίϯςϯπશൠʹ ద༻͞ΕΔɻ +*49ͷ ద༻ൣғ

Slide 37

Slide 37 text

w ͋ͳͨ΋Θͨ͠΋ w ωοτʹؔΘΔ৘ใ͢΂ͯ ΢ΣϒΞΫηγϏϦςΟ͸ ࣗ෼͝ͱ

Slide 38

Slide 38 text

8PSE1SFTTʹ͓͚Δ ΞΫηγϏϦςΟࢪࡦ

Slide 39

Slide 39 text

8PSE1SFTT$PEFY 8PSE1SFTT$PEFY೔ຊޠ൛  IUUQTXQEPDTPTEOKQΞΫηγϏϦςΟ

Slide 40

Slide 40 text

wݟग़͠Λਖ਼͘͠࢖͏ wΠϝʔδͷઆ໌ wϦϯΫΛهड़ wϦʔμϒϧͳϖʔδΛ࡞੒͢Δ wݡ໌ͳΧϥʔΛ࢖͏ wόϦσʔτ 8PSE1SFTT$PEFY

Slide 41

Slide 41 text

ݟग़͠ Ϧετ΋ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 42

Slide 42 text

ݟग़͠ͰؾΛ෇͚ΔϙΠϯτ w ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ w ໨తͷ৘ใʹ୧Γண͚ΔΑ͏ʹ͢Δ w ઌ಄ʹ಺༰ΛࣝผͰ͖Δ৘ใ͕͋Δͱ๬·͍͠ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.3.1 ৘ใٴͼؔ܎ੑɹɹɹɹ • 2.4.6 ݟग़͠ٴͼϥϕϧ • 2.4.1 ϒϩοΫεΩοϓ • 2.4.10 ηΫγϣϯݟग़͠

Slide 43

Slide 43 text

ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ य़͸͚͋΅ͷɻ΍͏΍͏ന͘ͳΓΏ͘ࢁࡍɺগ͠໌͔Γͯɺࢵͩͪ ͨΔӢͷࡉͨ͘ͳͼ͖ͨΔɻ Ն͸໷ɻ݄ͷ͜Ζ͸͞ΒͳΓɺҋ΋ͳ΄ɺܬͷଟ͘ඈͼ͕ͪͻͨΔɻ ·ͨɺͨͩҰͭೋͭͳͲɺ΄͔ʹ͏ͪޫͯߦ͘΋Λ͔͠ɻӍͳͲ߱ Δ΋Λ͔͠ɻ ळ͸༦฻Εɻ༦೔ͷࠩͯ͠ࢁͷ୺͍ͱۙ͏ͳΓͨΔʹɺӊͷ৸ॴ΁ ߦ͘ͱͯɺࡾ࢛ͭͭɺೋͭࡾͭͳͲඈͼٸ͙͞΁͋͸ΕͳΓɻ·͍ ͯأͳͲͷ࿈ͶͨΔ͕ɺ͍ͱখ͘͞ݟΏΔ͸ɺ͍ͱΛ͔͠ɻ೔ೖΓ Ռͯͯɺ෩ͷԻɺ஬ͷԻͳͲɺ͸ͨݴ;΂͖ʹ͋Βͣɻ ౙ͸ͭͱΊͯɻઇͷ߱ΓͨΔ͸ݴ;΂͖ʹ΋͋Βͣɺૼͷ͍ͱന͖ ΋ɺ·ͨ͞ΒͰ΋͍ͱפ͖ʹɺՐͳͲٸ͓͗ͯ͜͠ɺ୸࣋ͯ౉Δ΋ɺ ͍ͱ͖͖ͭͮ͠ɻனʹͳΓͯɺ͵Δ͘ΏΔͼ΋͍͚ͯ͹ɺՐԳͷՐ ΋ɺന͖փ͕ͪʹͳΓͯΘΖ͠ɻ य़ य़͸͚͋΅ͷɻ΍͏΍͏ന͘ͳΓΏ͘ࢁࡍɺগ͠໌͔Γͯɺࢵͩͪ ͨΔӢͷࡉͨ͘ͳͼ͖ͨΔɻ Ն Ն͸໷ɻ݄ͷ͜Ζ͸͞ΒͳΓɺҋ΋ͳ΄ɺܬͷଟ͘ඈͼ͕ͪͻͨΔɻ ·ͨɺͨͩҰͭೋͭͳͲɺ΄͔ʹ͏ͪޫͯߦ͘΋Λ͔͠ɻӍͳͲ߱ Δ΋Λ͔͠ɻ ळ ळ͸༦฻Εɻ༦೔ͷࠩͯ͠ࢁͷ୺͍ͱۙ͏ͳΓͨΔʹɺӊͷ৸ॴ΁ ߦ͘ͱͯɺࡾ࢛ͭͭɺೋͭࡾͭͳͲඈͼٸ͙͞΁͋͸ΕͳΓɻ·͍ ͯأͳͲͷ࿈ͶͨΔ͕ɺ͍ͱখ͘͞ݟΏΔ͸ɺ͍ͱΛ͔͠ɻ೔ೖΓ Ռͯͯɺ෩ͷԻɺ஬ͷԻͳͲɺ͸ͨݴ;΂͖ʹ͋Βͣɻ ౙ ౙ͸ͭͱΊͯɻઇͷ߱ΓͨΔ͸ݴ;΂͖ʹ΋͋Βͣɺૼͷ͍ͱന͖ ΋ɺ·ͨ͞ΒͰ΋͍ͱפ͖ʹɺՐͳͲٸ͓͗ͯ͜͠ɺ୸࣋ͯ౉Δ΋ɺ ͍ͱ͖͖ͭͮ͠ɻனʹͳΓͯɺ͵Δ͘ΏΔͼ΋͍͚ͯ͹ɺՐԳͷՐ ΋ɺന͖փ͕ͪʹͳΓͯΘΖ͠ɻ

Slide 44

Slide 44 text

ݟग़͠Ͱ໨తͷ৔ॴ΁εΩοϓ ྫɿWikipedia  Table of Contents PlusϓϥάΠϯ

Slide 45

Slide 45 text

ઌ಄ʹ಺༰ΛࣝผͰ͖Δ৘ใΛ w ߑਫରࡦ w ୆෩ରࡦ w ஍਒ରࡦ w ཕରࡦ w ରࡦɿߑਫ w ରࡦɿ୆෩ w ରࡦɿ஍਒ w ରࡦɿཕ

Slide 46

Slide 46 text

γϣʔτΧοτͰݟग़͠ͷૠೖ .BDɿDPOUSPMPQUJPOʙ 8JOɿBMUTIJGUʙ

Slide 47

Slide 47 text

.BSLEPXO෩Ͱݟग़͠ͷૠೖ &OUFSͰݟग़͠ʹม׵Ͱ͖Δ

Slide 48

Slide 48 text

ը૾ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 49

Slide 49 text

ը૾ͰؾΛ෇͚ΔϙΠϯτ w BMUଐੑͷ಺༰ΛͪΌΜͱߟ͑Δ  ˠ୅ସͱͯͪ͠ΌΜͱػೳ͢Δ΋ͷΛ w BMUଐੑͷ಺༰͸ඞਢͰ͸ͳ͍ʢଐੑ͸ඞਢʣ  ˠ૷০Ͱ͋ΔͷͳΒ͹BMU͸Ή͠ΖۭͰ w $44ͷഎܠը૾͸૷০Ҏ֎Ͱ࢖Θͳ͍  ˠίϯςϯπʹඞཁͳ΋ͷ͸JNHཁૉͰ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.1.1 ඇςΩετίϯςϯπ • 1.4.5 จࣈը૾

Slide 50

Slide 50 text

ը૾௥Ճ࣌ͷBMUଐੑͷೖྗ w σϑΥϧτͰ ʮλΠτϧʯ ʹը૾໊͕ೖΔ wʮ୅ସςΩετʯ ͕ະೖྗͩͱλΠτϧ ʢը૾໊ʣ ͕BMUଐੑʹೖΔͷͰ஫ҙ w BMUଐੑΛۭʹ͍ͨ͠৔߹͸ ʮλΠτϧʯ ΋ۭʹ͢Δ

Slide 51

Slide 51 text

ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉͱ GJHDBQUJPOཁૉͰϚʔΫΞοϓ͞ΕΔ   ˞ςʔϚʹΑΔ ʢ5XFOUZ4JYUFFO΍@Tͳ Ͳ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

Slide 52

Slide 52 text

ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞ ΕΔ   ˞ςʔϚʹΑΔ ʢ5XFOUZ4JYUFFO΍ @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

Ωϟϓγϣϯ

Slide 53

Slide 53 text

ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞ ΕΔ   ˞ςʔϚʹΑΔ ʢ5XFOUZ4JYUFFO΍ @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

Ωϟϓγϣϯ

Slide 54

Slide 54 text

ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞ ΕΔ   ˞ςʔϚʹΑΔ ʢ5XFOUZ4JYUFFO΍ @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

Ωϟϓ γϣϯ

Slide 55

Slide 55 text

ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ  http://www.soumu.go.jp/menu_news/s-news/ 2005/051215_1_wmv.html Gist - sou-lab / functions.php  https://gist.github.com/sou-lab/61d4f1b2b492a2a33ef638ee35ae13ba

Slide 56

Slide 56 text

Accessible Rich Internet Applications (WAI-ARIA) 1.0  https://www.w3.org/TR/wai-aria/

Slide 57

Slide 57 text

Font Awesome  http://fontawesome.io/

Slide 58

Slide 58 text

Bootstrap - Collapse  http://v4-alpha.getbootstrap.com/components/collapse/

Slide 59

Slide 59 text

+FUQBDLͷαΠτ౷ܭͷը૾

Slide 60

Slide 60 text

+FUQBDLͷαΠτ౷ܭͷը૾

Slide 61

Slide 61 text

ಈը w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 62

Slide 62 text

ಈը ऩ࿥ࡁΈʣ ͰؾΛ෇͚ΔϙΠϯτ w ΩϟϓγϣϯΛఏڙʢ˞ࣈນͰ͸ͳ͍ʣ  ˠޮՌԻɺ Իָɺ স͍੠ɺ ࿩ऀͷಛఆɺ ҐஔͳͲΛؚΉ w ࠶ੜʗఀࢭͷૢ࡞͕Մೳ w ಈըϓϨΠϠʔ͕ΩʔϘʔυૢ࡞Մೳ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.2.1 Ի੠͚ͩٴͼө૾͚ͩʢऩ࿥ࡁΈʣ • 2.1.1 ΩʔϘʔυ • 2.2.2 Ұ࣌ఀࢭɺఀࢭٴͼඇදࣔ • 1.2.2 Ωϟϓγϣϯʢऩ࿥ࡁΈʣ • 2.1.2 ΩʔϘʔυτϥοϓͳ͠

Slide 63

Slide 63 text

ϧʔϓΞχϝʔγϣϯHJGΛ࢖͏ͱ͖͸ 5ඵҎ಺ʹఀࢭͤ͞Δ

Slide 64

Slide 64 text

:PV5VCFຒΊࠐΈϓϨΠϠʔ • ࠶ੜʗఀࢭՄೳ • ΩʔϘʔυૢ࡞Մೳ

Slide 65

Slide 65 text

:PV5VCF͸ΩϟϓγϣϯΛ෇͚ΒΕΔ ಈըΞοϓϩʔυͷޙ͔Β෇͚ΒΕΔ ଟݴޠʹ΋ରԠՄೳ

Slide 66

Slide 66 text

ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ  http://www.soumu.go.jp/menu_news/s-news/ 2005/051215_1_wmv.html ࢹ֮ো֐ऀʢશ໡ʣͷ΢Σϒϖʔδར༻ํ๏ ࢹ֮ো֐ऀʢऑࢹʣͷ΢Σϒϖʔδར༻ํ๏

Slide 67

Slide 67 text

8PSE1SFTTಈըϓϨΠϠʔ ࠶ੜʗఀࢭՄೳɾΩʔϘʔυૢ࡞Մೳ

Slide 68

Slide 68 text

εϥΠμʔʹ΋Ұ࣌ఀࢭΛ ࠶ੜʗఀࢭՄೳ

Slide 69

Slide 69 text

ϦϯΫ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 70

Slide 70 text

ϦϯΫͰؾΛ෇͚ΔϙΠϯτ w ϦϯΫઌͷ۩ମ಺༰Λ༧ଌͰ͖ΔදݱͰ  ˠؔ৺ͷແ͍ϦϯΫઌΛεΩοϓͰ͖Δ w ʮ৽نλϒͰ։͘ʯ ͸࢖͍Ͳ͜ΖΛߟ͑Δ  ˠϒϥ΢βͷʮ໭ΔʯϘλϯͰ໭Εͳ͍ w ϑΥʔΧεΛফ͞ͳ͍  ˠΩʔϘʔυͰૢ࡞͢Δ͜ͱ΋ߟ͑Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 2.4.4 ϦϯΫͷ໨తʢίϯςΩετ಺ʣɹɹɹɹ • 2.4.9 ϦϯΫͷ໨తʢϦϯΫ͚ͩʣ • 2.4.7 ϑΥʔΧεͷՄࢹԽ • 3.2.5 ཁٻʹΑΔมԽ

Slide 71

Slide 71 text

a:hover, a:active, a:focus { outline: none; } ϦϯΫͷϑΥʔΧε͸ফ͞ͳ͍

Slide 72

Slide 72 text

.nav__item > a:focus { color: #fff; background-color: #e00; } GPDVTΛࢦఆ͢Δ

Slide 73

Slide 73 text

W3C Link Checker  https://validator.w3.org/checklink

Slide 74

Slide 74 text

ಡΈ΍͢͞ ʢϦʔμϒϧʣ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 75

Slide 75 text

ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ  ʙίʔσΟϯάʙ w ػೳΛଛͳΘͣςΩετΛαΠζมߋͰ͖Δ w ҰߦͣͭԣεΫϩʔϧΛͤͣʹಡΊΔ w ߦؒจࣈҎ্͕๬·͍͠ w ۉ౳ׂ෇͸͠ͳ͍ํ͕͍͍ w ༨നΛޮՌతʹ࢖༻͢Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.4.4 ςΩετͷαΠζมߋɹɹɹɹ • 1.4.8 ࢹ֮తఏࣔ

Slide 76

Slide 76 text

w ؆ܿʹಡΈ΍͍͢จষʹ͢Δ w ۭεϖʔεʹؾΛ෇͚Δ w ҰൠతͰͳ͍༻ޠ΍ུޠ͸આ໌ΛೖΕΔ ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ  ʙίϯςϯπʙ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 3.1.3 ҰൠతͰ͸ͳ͍༻ޠ • 3.1.5 ಡղϨϕϧɹɹɹɹ • 3.1.4 ུޠ

Slide 77

Slide 77 text

৭ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 78

Slide 78 text

৭ͰؾΛ෇͚ΔϙΠϯτ w ৭͚ͩͰ৘ใΛ఻͑ͳ͍ɾૢ࡞ͤ͞ͳ͍ w എܠ৭ͱจࣈ৭ͷίϯτϥετൺ  ʢͨͩ͠ΞΫςΟϒͰͳ͍ཁૉɺ७ਮͳ૷০ɺ ࣸਅͷҰ෦ͳͲ͸আ͘ʣ w ৭ͷ൓స΍άϨʔεέʔϧͰ࢖ΘΕΔ৔߹΋૝ఆ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.4.1 ৭ͷ࢖༻ • 1.4.6 ίϯτϥετʢߴ౓Ϩϕϧʣɹɹɹɹ • 1.4.3 ίϯτϥετʢ࠷௿ݶϨϕϧʣ

Slide 79

Slide 79 text

ίϯτϥετൺΛҙࣝ͠Α͏ ࠷௿ݶʢϨϕϧ""ʣ w ɿʢେ͖ͳςΩετ͸ʣҎ্ ΑΓे෼ʹʢϨϕϧ"""ʣ w ɿʢେ͖ͳςΩετ͸ʣҎ্ ˞େ͖ͳςΩετͱ͸QUҎ্ʢશ֯͸QUҎ্ʣ ɹଠࣈQUҎ্ʢશ֯͸QUҎ্ʣ ςΩετͱഎܠͷίϯτϥετൺ͕

Slide 80

Slide 80 text

Color Contrast Samples - Web-safe Colored Text shown on #000  http://trace.wisc.edu/contrast-ratio-examples/

Slide 81

Slide 81 text

Colors on the Web - Color Contrast Analyzer  http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer

Slide 82

Slide 82 text

όϦσʔτ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ

Slide 83

Slide 83 text

όϦσʔτͰؾΛ෇͚ΔϙΠϯτ w ͪΌΜͱόϦσʔλʔ௨ͦ͏ w λά͕͚͍ܽͯͨΓ͢ΔͱΩʔૢ࡞΍ಡΈ্͛ ͳͲͰ૝ఆ֎ͷಈ࡞Λ͢Δ৔߹͕͋Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 4.1.1 ߏจղੳɹɹɹɹ

Slide 84

Slide 84 text

The W3C Markup Validation Service  https://validator.w3.org/

Slide 85

Slide 85 text

όϦσʔτ݁Ռ

Slide 86

Slide 86 text

·ͱΊ

Slide 87

Slide 87 text

8PSE1SFTTͷΞΫηγϏϦςΟ͸ ਓ͚ͩͰ͸Ͱ͖ͳ͍ʂ • 8PSE1SFTT։ൃऀ • ςʔϚ࣮૷ऀ • ίϯςϯπ੍࡞ ɾ ߋ৽ऀ