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

9150ebd2f212dc7b2faf2b4de6ec4ea2?s=47 tobotoboto
September 17, 2016
Technology
7
5k

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

WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」で使用したスライドです。
リンクをクリックできなかったり、テキストでアウトラインが表示できないため、SlideShareにも公開しています。
SlideShare版：http://www.slideshare.net/sou_lab/wordcamptokyo2016

※代替コンテンツとして、近日中にテキストデータも公開予定です。

9150ebd2f212dc7b2faf2b4de6ec4ea2?s=128

tobotoboto

September 17, 2016
Tweet

Want more?

3ab1249be442027903e1180025340b3f?s=48 reverentgeek
9
470
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
250
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
160
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
310
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
210
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
290
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
550
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
160
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
810
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
200

Transcript

  1. 1.
    None
  2. 2.

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

  3. 3.

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

    ϚʔΫΞοϓΤϯδχΞ !UPCPUPCPUP
  4. 4.

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

  5. 5.

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

  6. 6.

    w ࢹ֮ো֐ʢશ໡ɾऑࢹͳͲʣ w ௌ֮ো֐ʢΖ͏͋ɾ೉ௌͳͲʣ w ӡಈো֐ w ೝ஌ো֐ w ݴޠো֐

    w ֶशো֐ʢಡࣈো֐ʣʜ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ ো֐ͷ͋ΔਓͷͨΊʹ
  7. 7.

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

  8. 8.

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

  9. 9.

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

  10. 10.

    ো֐ऀݖར৚໿ ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿
 http://www.mofa.go.jp/mofaj/gaiko/jinken/ index_shogaisha.html w ࠃ࿈ͷఆΊΔࠃࡍ৚໿ w ೔ຊ͸೥݄ʹక݁ɺ ಉ೥݄ΑΓޮྗΛൃੜ

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

    ো֐ऀݖར৚໿ ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿ɹ৚จʢ࿨จʣ
 http://www.mofa.go.jp/mofaj/files/000018093.pdf ɹక໿ࠃ͸ɺ·ͨɺ࣍ͷ͜ͱͷͨΊͷద౰ͳાஔΛͱΔ ʙུʙ H ো֐ऀ͕৽ͨͳ৘ใ௨৴ػثٴͼ৘ใ௨৴γεςϜʢΠϯλʔωοτΛ ؚΉɻʣΛར༻͢ΔػձΛ༗͢Δ͜ͱΛଅਐ͢Δ͜ͱɻ l

    z Ҿ༻ݩɿ֎຿লɹো֐ऀݖར৚໿ɹ࿨จΑΓ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ
  12. 12.

    w ೔ຊͷ๏཯ w ೥݄ʹࢪߦ wʮෆ౰ͳࠩผతऔѻ͍ʯΛ ېࢭ͠ʮ߹ཧత഑ྀͷఏ ڙʯ ΛٻΊΔ ো֐ऀࠩผղফ๏ ಺ֳ෎

    ো֐Λཧ༝ͱ͢Δࠩผͷղফͷਪਐ
 http://www8.cao.go.jp/shougai/suishin/sabekai.html ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ
  13. 13.

    ߹ཧత഑ྀͷఏڙͱ͸ʁ 2ʙུʙো֐ͷ͋ΔํͳͲ͔ΒԿΒ͔ͷ഑ྀΛٻΊΔҙࢥͷද໌͕͋ͬͨ৔߹ʹ͸ɺ ෛ୲ʹͳΓա͗ͳ͍ൣғͰɺࣾձతোน˞ΛऔΓআͨ͘ΊʹඞཁͰ߹ཧతͳ഑ྀʢҎԼ Ͱ͸ʮ߹ཧత഑ྀʯͱݺͼ·͢ɻʣΛߦ͏͜ͱ͕ٻΊΒΕ·͢ɻ͜͏ͨ͠഑ྀΛߦΘͳ ͍͜ͱͰɺো֐ͷ͋Δํͷݖརརӹ͕৵֐͞ΕΔ৔߹ʹ͸ɺࠩผʹ౰ͨΓ·͢ɻ 2ʙུʙ͜ͷ๏཯Ͱ͸ɺ߹ཧత഑ྀʹؔͯ͠͸ɺҰ཯ʹٛ຿ͱ͢ΔͷͰ͸ͳ͘ɺߦ੓ ػؔͳͲʹ͸཰ઌͨ͠औ૊Λߦ͏΂͖ओମͱͯٛ͠຿Λ՝͢ҰํͰɺຽؒࣄۀऀʹؔ͠ ͯ͸౒ྗٛ຿Λ՝্ͨ͠ͰɺରԠࢦ਑ʹΑͬͯࣗओతͳऔ૊Λଅ͢͜ͱͱ͍ͯ͠·͢ɻ l z

    w ߦ੓ػؔɿ๏ఆٛ຿ w ຽؒࣄۀɿ౒ྗٛ຿ Ҿ༻ݩɿ಺ֳ෎ɹো֐Λཧ༝ͱ͢Δࠩผͷղফͷਪਐʹؔ͢Δ๏཯ʹ͍ͭͯͷΑ͋͘Δ࣭͝໰ͱճ౴ʻࠃຽ޲͚ʼΑΓ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ
  14. 14.

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

  15. 15.

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

  16. 16.

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

  17. 17.

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

  18. 18.

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

  19. 19.

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

  20. 20.

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

  21. 21.

    w ୭͠΋͕ɺ͍ͭ΋͸ͷঢ়ଶͰ΋ৗʹ ͩͱ͸ݶΒͳ͍ w ୭Ͱ΋ɾ͍ͭͰ΋ɾͲ͜Ͱ΋ɾͲΜͳঢ়گͰ΋ ໨తͷ৘ใʹͨͲΓண͖ɺར༻Ͱ͖ΔΑ͏ʹ w ͋ͳͨͷൃ৴͢Δ৘ใʹΞΫηεͰ͖Δਓͷ਺ Λ࠷େʹ͠Α͏ શͯͷਓͷͨΊʹʂ

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

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

  23. 23.

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

  24. 24.

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

  25. 25.

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

  26. 26.

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

    ΞΫηγϏϦςΟରԠ
 https://ja.wordpress.org/themes/tags/accessibility-ready/
  27. 27.

    8PSE1SFTT"DDFTTJCJMJUZ5FBN .BLF8PSE1SFTT"DDFTTJCMF
 IUUQTNBLFXPSEQSFTTPSHBDDFTTJCJMJUZXPSEQSFTTHPFTXDBH

  28. 28.

    .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
  29. 29.

    8$"(ͱ +*49

  30. 30.

    w 8$͕קࠂ w ΢ΣϒίϯςϯπΛΑΓ ΞΫηγϒϧʹ͢ΔͨΊͷ ΨΠυϥΠϯ w *40*&$ ͱͯ͠ࠃࡍن֨ʹ ೥݄

    Web Content Accessibility Guidelines (WCAG) 2.0ʢݪจʣ
 https://www.w3.org/TR/WCAG20/ 8$"(ͱ͸
  31. 31.

    w ೔ຊ޻ۀن֨ w ೔ຊಠࣗͷࢦ਑ΛؚΉن֨ ͔Β*40*&$ ͷҰகن֨ ʢ*%5ʣ ΁ w ೥݄ʹվగ

    Ӿཡɿʮ೔ຊ޻ۀඪ४ௐࠪձʢJISCʣʯWebαΠτͷʮJISݕࡧʯ
 http://www.jisc.go.jp/app/JPS/JPSO0020.html +*49ͱ͸
  32. 32.

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

  33. 33.

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

  34. 34.

    .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
  35. 35.

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

    Ϩϕϧ""ʹ४ڌ
  36. 36.

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

    +*49ͷ ద༻ൣғ
  37. 37.

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

  38. 38.

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

  39. 39.

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

  40. 40.

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

  41. 41.

    ݟग़͠ Ϧετ΋ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ

    w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  42. 42.

    ݟग़͠ͰؾΛ෇͚ΔϙΠϯτ w ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ w ໨తͷ৘ใʹ୧Γண͚ΔΑ͏ʹ͢Δ w ઌ಄ʹ಺༰ΛࣝผͰ͖Δ৘ใ͕͋Δͱ๬·͍͠ ؔ࿈͢Δ JIS X

    8341-3:2016 ͷୡ੒ج४ɿ • 1.3.1 ৘ใٴͼؔ܎ੑɹɹɹɹ • 2.4.6 ݟग़͠ٴͼϥϕϧ • 2.4.1 ϒϩοΫεΩοϓ • 2.4.10 ηΫγϣϯݟग़͠
  43. 43.

    ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ य़͸͚͋΅ͷɻ΍͏΍͏ന͘ͳΓΏ͘ࢁࡍɺগ͠໌͔Γͯɺࢵͩͪ ͨΔӢͷࡉͨ͘ͳͼ͖ͨΔɻ Ն͸໷ɻ݄ͷ͜Ζ͸͞ΒͳΓɺҋ΋ͳ΄ɺܬͷଟ͘ඈͼ͕ͪͻͨΔɻ ·ͨɺͨͩҰͭೋͭͳͲɺ΄͔ʹ͏ͪޫͯߦ͘΋Λ͔͠ɻӍͳͲ߱ Δ΋Λ͔͠ɻ ळ͸༦฻Εɻ༦೔ͷࠩͯ͠ࢁͷ୺͍ͱۙ͏ͳΓͨΔʹɺӊͷ৸ॴ΁ ߦ͘ͱͯɺࡾ࢛ͭͭɺೋͭࡾͭͳͲඈͼٸ͙͞΁͋͸ΕͳΓɻ·͍ ͯأͳͲͷ࿈ͶͨΔ͕ɺ͍ͱখ͘͞ݟΏΔ͸ɺ͍ͱΛ͔͠ɻ೔ೖΓ Ռͯͯɺ෩ͷԻɺ஬ͷԻͳͲɺ͸ͨݴ;΂͖ʹ͋Βͣɻ

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

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

  45. 45.

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

    ରࡦɿߑਫ w ରࡦɿ୆෩ w ରࡦɿ஍਒ w ରࡦɿཕ
  46. 46.

    γϣʔτΧοτͰݟग़͠ͷૠೖ .BDɿDPOUSPM PQUJPO ʙ 8JOɿBMU TIJGU ʙ

  47. 47.

    .BSLEPXO෩Ͱݟग़͠ͷૠೖ  &OUFSͰݟग़͠ʹม׵Ͱ͖Δ

  48. 48.

    ը૾ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w

    ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  49. 49.

    ը૾ͰؾΛ෇͚ΔϙΠϯτ w BMUଐੑͷ಺༰ΛͪΌΜͱߟ͑Δ
 ˠ୅ସͱͯͪ͠ΌΜͱػೳ͢Δ΋ͷΛ w BMUଐੑͷ಺༰͸ඞਢͰ͸ͳ͍ʢଐੑ͸ඞਢʣ
 ˠ૷০Ͱ͋ΔͷͳΒ͹BMU͸Ή͠ΖۭͰ w $44ͷഎܠը૾͸૷০Ҏ֎Ͱ࢖Θͳ͍
 ˠίϯςϯπʹඞཁͳ΋ͷ͸JNHཁૉͰ

    ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.1.1 ඇςΩετίϯςϯπ • 1.4.5 จࣈը૾
  50. 50.

    ը૾௥Ճ࣌ͷBMUଐੑͷೖྗ w σϑΥϧτͰ ʮλΠτϧʯ ʹը૾໊͕ೖΔ wʮ୅ସςΩετʯ ͕ະೖྗͩͱλΠτϧ ʢը૾໊ʣ ͕BMUଐੑʹೖΔͷͰ஫ҙ w

    BMUଐੑΛۭʹ͍ͨ͠৔߹͸ ʮλΠτϧʯ ΋ۭʹ͢Δ
  51. 51.

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

  52. 52.

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

    id="attachment_1" style="width: 150px" class="wp-caption alignnone"> <img class="size-thumbnail wp-image-1" src="wapuu.png" alt="ઔΘ΀ʔ"
 width="150" height="150"> <figcaption class="wp-caption-text">Ωϟϓγϣϯ</figcaption> </figure>
  53. 53.

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

    id="attachment_1" style="width: 150px" class="wp-caption alignnone"> <img class="size-thumbnail wp-image-1" src="wapuu.png" alt="ઔΘ΀ʔ"
 width="150" height="150"> <figcaption class="wp-caption-text">Ωϟϓγϣϯ</figcaption> </figure>
  54. 54.

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

    id="attachment_1" style="width: 150px" class="wp-caption alignnone" aria-labelledby="caption-attachment_1"> <img class="size-thumbnail wp-image-1" src="wapuu.png" alt="ઔΘ΀ʔ"
 width="150" height="150"> <figcaption class="wp-caption-text" id="caption-attachment_1">Ωϟϓ γϣϯ</figcaption> </figure>
  55. 55.

    ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ
 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

  56. 56.

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

  57. 57.

    Font Awesome
 http://fontawesome.io/

  58. 58.

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

  59. 59.

    <img src="https://pixel.wp.com/g.gif?hoge" alt=":)" width="6" height="5" id="wpstats"> +FUQBDLͷαΠτ౷ܭͷը૾

  60. 60.

    <img src="https://pixel.wp.com/g.gif?hoge" alt=":)" width="6" height="5" id="wpstats" aria-hidden="true"> +FUQBDLͷαΠτ౷ܭͷը૾

  61. 61.

    ಈը w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w

    ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  62. 62.

    ಈը ऩ࿥ࡁΈʣ ͰؾΛ෇͚ΔϙΠϯτ w ΩϟϓγϣϯΛఏڙʢ˞ࣈນͰ͸ͳ͍ʣ
 ˠޮՌԻɺ Իָɺ স͍੠ɺ ࿩ऀͷಛఆɺ ҐஔͳͲΛؚΉ

    w ࠶ੜʗఀࢭͷૢ࡞͕Մೳ w ಈըϓϨΠϠʔ͕ΩʔϘʔυૢ࡞Մೳ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.2.1 Ի੠͚ͩٴͼө૾͚ͩʢऩ࿥ࡁΈʣ • 2.1.1 ΩʔϘʔυ • 2.2.2 Ұ࣌ఀࢭɺఀࢭٴͼඇදࣔ • 1.2.2 Ωϟϓγϣϯʢऩ࿥ࡁΈʣ • 2.1.2 ΩʔϘʔυτϥοϓͳ͠
  63. 63.

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

  64. 64.

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

  65. 65.

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

  66. 66.

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

  67. 67.

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

  68. 68.

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

  69. 69.

    ϦϯΫ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w

    ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  70. 70.

    ϦϯΫͰؾΛ෇͚ΔϙΠϯτ w ϦϯΫઌͷ۩ମ಺༰Λ༧ଌͰ͖ΔදݱͰ
 ˠؔ৺ͷແ͍ϦϯΫઌΛεΩοϓͰ͖Δ w ʮ৽نλϒͰ։͘ʯ ͸࢖͍Ͳ͜ΖΛߟ͑Δ
 ˠϒϥ΢βͷʮ໭ΔʯϘλϯͰ໭Εͳ͍ w ϑΥʔΧεΛফ͞ͳ͍


    ˠΩʔϘʔυͰૢ࡞͢Δ͜ͱ΋ߟ͑Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 2.4.4 ϦϯΫͷ໨తʢίϯςΩετ಺ʣɹɹɹɹ • 2.4.9 ϦϯΫͷ໨తʢϦϯΫ͚ͩʣ • 2.4.7 ϑΥʔΧεͷՄࢹԽ • 3.2.5 ཁٻʹΑΔมԽ
  71. 71.

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

  72. 72.

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

  73. 73.

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

  74. 74.

    ಡΈ΍͢͞ ʢϦʔμϒϧʣ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ

    w ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  75. 75.

    ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ
 ʙίʔσΟϯάʙ w ػೳΛଛͳΘͣςΩετΛαΠζมߋͰ͖Δ w ҰߦͣͭԣεΫϩʔϧΛͤͣʹಡΊΔ w ߦؒจࣈҎ্͕๬·͍͠ w ۉ౳ׂ෇͸͠ͳ͍ํ͕͍͍

    w ༨നΛޮՌతʹ࢖༻͢Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.4.4 ςΩετͷαΠζมߋɹɹɹɹ • 1.4.8 ࢹ֮తఏࣔ
  76. 76.

    w ؆ܿʹಡΈ΍͍͢จষʹ͢Δ w ۭεϖʔεʹؾΛ෇͚Δ w ҰൠతͰͳ͍༻ޠ΍ུޠ͸આ໌ΛೖΕΔ ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ
 ʙίϯςϯπʙ ؔ࿈͢Δ JIS

    X 8341-3:2016 ͷୡ੒ج४ɿ • 3.1.3 ҰൠతͰ͸ͳ͍༻ޠ • 3.1.5 ಡղϨϕϧɹɹɹɹ • 3.1.4 ུޠ
  77. 77.

    ৭ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w

    ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  78. 78.

    ৭ͰؾΛ෇͚ΔϙΠϯτ w ৭͚ͩͰ৘ใΛ఻͑ͳ͍ɾૢ࡞ͤ͞ͳ͍ w എܠ৭ͱจࣈ৭ͷίϯτϥετൺ
 ʢͨͩ͠ΞΫςΟϒͰͳ͍ཁૉɺ७ਮͳ૷০ɺ ࣸਅͷҰ෦ͳͲ͸আ͘ʣ w ৭ͷ൓స΍άϨʔεέʔϧͰ࢖ΘΕΔ৔߹΋૝ఆ ؔ࿈͢Δ

    JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.4.1 ৭ͷ࢖༻ • 1.4.6 ίϯτϥετʢߴ౓Ϩϕϧʣɹɹɹɹ • 1.4.3 ίϯτϥετʢ࠷௿ݶϨϕϧʣ
  79. 79.

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

  80. 80.

    Color Contrast Samples - Web-safe Colored Text shown on #000


    http://trace.wisc.edu/contrast-ratio-examples/
  81. 81.

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

  82. 82.

    όϦσʔτ w ݟग़͠Λਖ਼͘͠࢖͏ w Πϝʔδͷઆ໌ w ϦϯΫΛهड़ w ϦʔμϒϧͳϖʔδΛ࡞੒͢Δ w

    ݡ໌ͳΧϥʔΛ࢖͏ w όϦσʔτ
  83. 83.

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

    ͷୡ੒ج४ɿ • 4.1.1 ߏจղੳɹɹɹɹ
  84. 84.

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

  85. 85.

    όϦσʔτ݁Ռ

  86. 86.

    ·ͱΊ

  87. 87.

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

  88. 88.

    ΈΜͳͰҙࣝͯ͠
 ΑΓ༏͍͠ ΢ΣϒαΠτΛʂ

  89. 89.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠