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

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

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

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