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

WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜...

Avatar for tobotoboto tobotoboto
September 17, 2016

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

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

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

Avatar for tobotoboto

tobotoboto

September 17, 2016
Tweet

Other Decks in Technology

Transcript

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

    w ֶशো֐ʢಡࣈো֐ʣʜ ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ ো֐ͷ͋ΔਓͷͨΊʹ
  2. w ೔ຊͷ๏཯ w ೥݄ʹࢪߦ wʮෆ౰ͳࠩผతऔѻ͍ʯΛ ېࢭ͠ʮ߹ཧత഑ྀͷఏ ڙʯ ΛٻΊΔ ো֐ऀࠩผղফ๏ ಺ֳ෎

    ো֐Λཧ༝ͱ͢Δࠩผͷղফͷਪਐ
 http://www8.cao.go.jp/shougai/suishin/sabekai.html ΢ΣϒΞΫηγϏϦςΟͬͯ୭ͷͨΊʹʁ
  3. w 8$͕קࠂ w ΢ΣϒίϯςϯπΛΑΓ ΞΫηγϒϧʹ͢ΔͨΊͷ ΨΠυϥΠϯ w *40*&$ ͱͯ͠ࠃࡍن֨ʹ ೥݄

    Web Content Accessibility Guidelines (WCAG) 2.0ʢݪจʣ
 https://www.w3.org/TR/WCAG20/ 8$"(ͱ͸
  4. w ೔ຊ޻ۀن֨ w ೔ຊಠࣗͷࢦ਑ΛؚΉن֨ ͔Β*40*&$ ͷҰகن֨ ʢ*%5ʣ ΁ w ೥݄ʹվగ

    Ӿཡɿʮ೔ຊ޻ۀඪ४ௐࠪձʢJISCʣʯWebαΠτͷʮJISݕࡧʯ
 http://www.jisc.go.jp/app/JPS/JPSO0020.html +*49ͱ͸
  5. ݟग़͠ͰؾΛ෇͚ΔϙΠϯτ w ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ w ໨తͷ৘ใʹ୧Γண͚ΔΑ͏ʹ͢Δ w ઌ಄ʹ಺༰ΛࣝผͰ͖Δ৘ใ͕͋Δͱ๬·͍͠ ؔ࿈͢Δ JIS X

    8341-3:2016 ͷୡ੒ج४ɿ • 1.3.1 ৘ใٴͼؔ܎ੑɹɹɹɹ • 2.4.6 ݟग़͠ٴͼϥϕϧ • 2.4.1 ϒϩοΫεΩοϓ • 2.4.10 ηΫγϣϯݟग़͠
  6. ݟग़͠Ͱߏ଄ԽΛҙࣝ͢Δ य़͸͚͋΅ͷɻ΍͏΍͏ന͘ͳΓΏ͘ࢁࡍɺগ͠໌͔Γͯɺࢵͩͪ ͨΔӢͷࡉͨ͘ͳͼ͖ͨΔɻ Ն͸໷ɻ݄ͷ͜Ζ͸͞ΒͳΓɺҋ΋ͳ΄ɺܬͷଟ͘ඈͼ͕ͪͻͨΔɻ ·ͨɺͨͩҰͭೋͭͳͲɺ΄͔ʹ͏ͪޫͯߦ͘΋Λ͔͠ɻӍͳͲ߱ Δ΋Λ͔͠ɻ ळ͸༦฻Εɻ༦೔ͷࠩͯ͠ࢁͷ୺͍ͱۙ͏ͳΓͨΔʹɺӊͷ৸ॴ΁ ߦ͘ͱͯɺࡾ࢛ͭͭɺೋͭࡾͭͳͲඈͼٸ͙͞΁͋͸ΕͳΓɻ·͍ ͯأͳͲͷ࿈ͶͨΔ͕ɺ͍ͱখ͘͞ݟΏΔ͸ɺ͍ͱΛ͔͠ɻ೔ೖΓ Ռͯͯɺ෩ͷԻɺ஬ͷԻͳͲɺ͸ͨݴ;΂͖ʹ͋Βͣɻ

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

    ରࡦɿߑਫ w ରࡦɿ୆෩ w ରࡦɿ஍਒ w ରࡦɿཕ
  8. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ 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>
  9. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ 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>
  10. ը૾௥Ճ࣌ͷΩϟϓγϣϯͷೖྗ 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>
  11. ಈը ऩ࿥ࡁΈʣ ͰؾΛ෇͚ΔϙΠϯτ w ΩϟϓγϣϯΛఏڙʢ˞ࣈນͰ͸ͳ͍ʣ
 ˠޮՌԻɺ Իָɺ স͍੠ɺ ࿩ऀͷಛఆɺ ҐஔͳͲΛؚΉ

    w ࠶ੜʗఀࢭͷૢ࡞͕Մೳ w ಈըϓϨΠϠʔ͕ΩʔϘʔυૢ࡞Մೳ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.2.1 Ի੠͚ͩٴͼө૾͚ͩʢऩ࿥ࡁΈʣ • 2.1.1 ΩʔϘʔυ • 2.2.2 Ұ࣌ఀࢭɺఀࢭٴͼඇදࣔ • 1.2.2 Ωϟϓγϣϯʢऩ࿥ࡁΈʣ • 2.1.2 ΩʔϘʔυτϥοϓͳ͠
  12. ϦϯΫͰؾΛ෇͚ΔϙΠϯτ w ϦϯΫઌͷ۩ମ಺༰Λ༧ଌͰ͖ΔදݱͰ
 ˠؔ৺ͷແ͍ϦϯΫઌΛεΩοϓͰ͖Δ w ʮ৽نλϒͰ։͘ʯ ͸࢖͍Ͳ͜ΖΛߟ͑Δ
 ˠϒϥ΢βͷʮ໭ΔʯϘλϯͰ໭Εͳ͍ w ϑΥʔΧεΛফ͞ͳ͍


    ˠΩʔϘʔυͰૢ࡞͢Δ͜ͱ΋ߟ͑Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 2.4.4 ϦϯΫͷ໨తʢίϯςΩετ಺ʣɹɹɹɹ • 2.4.9 ϦϯΫͷ໨తʢϦϯΫ͚ͩʣ • 2.4.7 ϑΥʔΧεͷՄࢹԽ • 3.2.5 ཁٻʹΑΔมԽ
  13. ಡΈ΍͢͞ͰؾΛ෇͚ΔϙΠϯτ
 ʙίʔσΟϯάʙ w ػೳΛଛͳΘͣςΩετΛαΠζมߋͰ͖Δ w ҰߦͣͭԣεΫϩʔϧΛͤͣʹಡΊΔ w ߦؒจࣈҎ্͕๬·͍͠ w ۉ౳ׂ෇͸͠ͳ͍ํ͕͍͍

    w ༨നΛޮՌతʹ࢖༻͢Δ ؔ࿈͢Δ JIS X 8341-3:2016 ͷୡ੒ج४ɿ • 1.4.4 ςΩετͷαΠζมߋɹɹɹɹ • 1.4.8 ࢹ֮తఏࣔ
  14. Color Contrast Samples - Web-safe Colored Text shown on #000


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