Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tobotoboto
September 17, 2016

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

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

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

tobotoboto

September 17, 2016
Tweet

Other Decks in Technology

Transcript

  1. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. ૯຿ল ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ

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

    View Slide

  8. ૯຿ল ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ

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

    View Slide

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

    View Slide

  10. ো֐ऀݖར৚໿
    ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿

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

    View Slide

  11. ো֐ऀݖར৚໿
    ֎຿ল ো֐ऀͷݖརʹؔ͢Δ৚໿ɹ৚จʢ࿨จʣ

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

    View Slide

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

    http://www8.cao.go.jp/shougai/suishin/sabekai.html
    ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. 8PSE1SFTT$PEFY
    8PSE1SFTT$PEFY೔ຊޠ൛

    IUUQTXQEPDTPTEOKQΞΫηγϏϦςΟ

    View Slide

  25. ແྉͷ WordPress ςʔϚ > ΞΫηγϏϦςΟରԠ

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

    View Slide

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

    https://ja.wordpress.org/themes/tags/accessibility-ready/

    View Slide

  27. 8PSE1SFTT"DDFTTJCJMJUZ5FBN
    .BLF8PSE1SFTT"DDFTTJCMF

    IUUQTNBLFXPSEQSFTTPSHBDDFTTJCJMJUZXPSEQSFTTHPFTXDBH

    View Slide

  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

    View Slide

  29. 8$"(ͱ
    +*49

    View Slide

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

    Web Content Accessibility Guidelines (WCAG) 2.0ʢݪจʣ

    https://www.w3.org/TR/WCAG20/
    8$"(ͱ͸

    View Slide

  31. w ೔ຊ޻ۀن֨
    w ೔ຊಠࣗͷࢦ਑ΛؚΉن֨
    ͔Β*40*&$
    ͷҰகن֨
    ʢ*%5ʣ
    ΁
    w ೥݄ʹվగ
    Ӿཡɿʮ೔ຊ޻ۀඪ४ௐࠪձʢJISCʣʯWebαΠτͷʮJISݕࡧʯ

    http://www.jisc.go.jp/app/JPS/JPSO0020.html
    +*49ͱ͸

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. 8PSE1SFTT$PEFY
    8PSE1SFTT$PEFY೔ຊޠ൛

    IUUQTXQEPDTPTEOKQΞΫηγϏϦςΟ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    य़͸͚͋΅ͷɻ΍͏΍͏ന͘ͳΓΏ͘ࢁࡍɺগ͠໌͔Γͯɺࢵͩͪ
    ͨΔӢͷࡉͨ͘ͳͼ͖ͨΔɻ
    Ն
    Ն͸໷ɻ݄ͷ͜Ζ͸͞ΒͳΓɺҋ΋ͳ΄ɺܬͷଟ͘ඈͼ͕ͪͻͨΔɻ
    ·ͨɺͨͩҰͭೋͭͳͲɺ΄͔ʹ͏ͪޫͯߦ͘΋Λ͔͠ɻӍͳͲ߱
    Δ΋Λ͔͠ɻ

    ळ͸༦฻Εɻ༦೔ͷࠩͯ͠ࢁͷ୺͍ͱۙ͏ͳΓͨΔʹɺӊͷ৸ॴ΁
    ߦ͘ͱͯɺࡾ࢛ͭͭɺೋͭࡾͭͳͲඈͼٸ͙͞΁͋͸ΕͳΓɻ·͍
    ͯأͳͲͷ࿈ͶͨΔ͕ɺ͍ͱখ͘͞ݟΏΔ͸ɺ͍ͱΛ͔͠ɻ೔ೖΓ
    Ռͯͯɺ෩ͷԻɺ஬ͷԻͳͲɺ͸ͨݴ;΂͖ʹ͋Βͣɻ

    ౙ͸ͭͱΊͯɻઇͷ߱ΓͨΔ͸ݴ;΂͖ʹ΋͋Βͣɺૼͷ͍ͱന͖
    ΋ɺ·ͨ͞ΒͰ΋͍ͱפ͖ʹɺՐͳͲٸ͓͗ͯ͜͠ɺ୸࣋ͯ౉Δ΋ɺ
    ͍ͱ͖͖ͭͮ͠ɻனʹͳΓͯɺ͵Δ͘ΏΔͼ΋͍͚ͯ͹ɺՐԳͷՐ
    ΋ɺന͖փ͕ͪʹͳΓͯΘΖ͠ɻ

    View Slide

  44. ݟग़͠Ͱ໨తͷ৔ॴ΁εΩοϓ
    ྫɿWikipedia

    Table of Contents PlusϓϥάΠϯ

    View Slide

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


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. ը૾ͰؾΛ෇͚ΔϙΠϯτ
    w BMUଐੑͷ಺༰ΛͪΌΜͱߟ͑Δ

    ˠ୅ସͱͯͪ͠ΌΜͱػೳ͢Δ΋ͷΛ
    w BMUଐੑͷ಺༰͸ඞਢͰ͸ͳ͍ʢଐੑ͸ඞਢʣ

    ˠ૷০Ͱ͋ΔͷͳΒ͹BMU͸Ή͠ΖۭͰ
    w $44ͷഎܠը૾͸૷০Ҏ֎Ͱ࢖Θͳ͍

    ˠίϯςϯπʹඞཁͳ΋ͷ͸JNHཁૉͰ
    ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ
    • 1.1.1 ඇςΩετίϯςϯπ • 1.4.5 จࣈը૾

    View Slide

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

    View Slide

  51. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ
    ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉͱ
    GJHDBQUJPOཁૉͰϚʔΫΞοϓ͞ΕΔ

    ˞ςʔϚʹΑΔ
    ʢ5XFOUZ4JYUFFO΍@Tͳ
    Ͳ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

    View Slide

  52. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ
    w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ
    ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞
    ΕΔ

    ˞ςʔϚʹΑΔ
    ʢ5XFOUZ4JYUFFO΍
    @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

    width="150" height="150">
    Ωϟϓγϣϯ

    View Slide

  53. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ
    w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ
    ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞
    ΕΔ

    ˞ςʔϚʹΑΔ
    ʢ5XFOUZ4JYUFFO΍
    @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

    width="150" height="150">
    Ωϟϓγϣϯ

    View Slide

  54. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ
    w ΩϟϓγϣϯΛೖΕΔͱGJHVSFཁૉ
    ͱGJHDBQUJPOཁૉͰϚʔΫΞοϓ͞
    ΕΔ

    ˞ςʔϚʹΑΔ
    ʢ5XFOUZ4JYUFFO΍
    @TͳͲ༗໊ςʔϚ͸΄ͱΜͲ͜ͷܗʣ

    width="150" height="150">
    Ωϟϓ
    γϣϯ

    View Slide

  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

    View Slide

  56. Accessible Rich Internet Applications (WAI-ARIA) 1.0

    https://www.w3.org/TR/wai-aria/

    View Slide

  57. Font Awesome

    http://fontawesome.io/

    View Slide

  58. Bootstrap - Collapse

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

    View Slide

  59. alt=":)" width="6" height="5" id="wpstats">
    +FUQBDLͷαΠτ౷ܭͷը૾

    View Slide

  60. width="6" height="5" id="wpstats" aria-hidden="true">
    +FUQBDLͷαΠτ౷ܭͷը૾

    View Slide

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

    View Slide

  62. ಈը ऩ࿥ࡁΈʣ
    ͰؾΛ෇͚ΔϙΠϯτ
    w ΩϟϓγϣϯΛఏڙʢ˞ࣈນͰ͸ͳ͍ʣ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ
    ো֐ऀͷ΢Σϒϖʔδར༻ํ๏ͷ঺հϏσΦ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  70. ϦϯΫͰؾΛ෇͚ΔϙΠϯτ
    w ϦϯΫઌͷ۩ମ಺༰Λ༧ଌͰ͖ΔදݱͰ

    ˠؔ৺ͷແ͍ϦϯΫઌΛεΩοϓͰ͖Δ
    w ʮ৽نλϒͰ։͘ʯ
    ͸࢖͍Ͳ͜ΖΛߟ͑Δ

    ˠϒϥ΢βͷʮ໭ΔʯϘλϯͰ໭Εͳ͍
    w ϑΥʔΧεΛফ͞ͳ͍

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

    View Slide

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

    View Slide

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

    View Slide

  73. W3C Link Checker

    https://validator.w3.org/checklink

    View Slide

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

    View Slide

  75. ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ

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

    View Slide

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

    ʙίϯςϯπʙ
    ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ
    • 3.1.3 ҰൠతͰ͸ͳ͍༻ޠ
    • 3.1.5 ಡղϨϕϧɹɹɹɹ
    • 3.1.4 ུޠ

    View Slide


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

    View Slide

  78. ৭ͰؾΛ෇͚ΔϙΠϯτ
    w ৭͚ͩͰ৘ใΛ఻͑ͳ͍ɾૢ࡞ͤ͞ͳ͍
    w എܠ৭ͱจࣈ৭ͷίϯτϥετൺ

    ʢͨͩ͠ΞΫςΟϒͰͳ͍ཁૉɺ७ਮͳ૷০ɺ
    ࣸਅͷҰ෦ͳͲ͸আ͘ʣ
    w ৭ͷ൓స΍άϨʔεέʔϧͰ࢖ΘΕΔ৔߹΋૝ఆ
    ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ
    • 1.4.1 ৭ͷ࢖༻
    • 1.4.6 ίϯτϥετʢߴ౓Ϩϕϧʣɹɹɹɹ
    • 1.4.3 ίϯτϥετʢ࠷௿ݶϨϕϧʣ

    View Slide

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

    View Slide

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

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

    View Slide

  81. Colors on the Web - Color Contrast Analyzer

    http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer

    View Slide

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

    View Slide

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

    View Slide

  84. The W3C Markup Validation Service

    https://validator.w3.org/

    View Slide

  85. όϦσʔτ݁Ռ

    View Slide

  86. ·ͱΊ

    View Slide

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

    View Slide

  88. ΈΜͳͰҙࣝͯ͠

    ΑΓ༏͍͠
    ΢ΣϒαΠτΛʂ

    View Slide

  89. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide