A Slide of session for accessibility ready theme in WordCamp Kansai 2016

A Slide of session for accessibility ready theme in WordCamp Kansai 2016

Transcript

1. ΞΫηγϏϦςΟରԠͷςʔϚ͕ ެࣜσΟϨΫτϦʹొ࿥͞ΕΔ·Ͱ WordCamp Kansai 2016 ࣮ߦҕһ ദݪɹ߶ʢΧογʔʣ ʙςʔϚ࡞੒ͷखॱͱϨϏϡʔ࣌ͷରॲํ๏ͷҰྫʙ
2. ࣗݾ঺հ ొஃऀɿദݪɹ߶ʢ͔͠͸Βɹ͚ͨ͠ʣ χοΫωʔϜɿΧογʔ Digistry ୅ද ϑϦʔϥϯεWebσβΠφʔ େֶɾઐ໳ֶߍͷߨࢣ ത࢜ʢܳज़ʣେࡕܳज़େֶ 2011೥ ઐ߈ɿ৘ใσβΠϯ
3. ͜ͷηογϣϯͷ֓ཁ ʮBG-PhotoFrameʯͱ͍͏ΞΫηγϏϦςΟରԠͷ ςʔϚΛ࡞੒ɻΞΫηγϏϦςΟͷςʔϚϨϏϡʔΛܦ ͯެࣜσΟϨΫτϦ΁ొ࿥͞Ε·ͨ͠ɻ ϨϏϡʔ࣌ͷঢ়گͱɺ࡞ͬͯྑ͔ͬͨ఺ͳͲΛ͓࿩͠ ͠·͢ɻ ͜Ε͔ΒςʔϚΛ࡞Δਓɺ·ͨ͸࡞ͬͨςʔϚΛΞΫ ηγϏϦςΟରԠʹ͢Δํ͸ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ
4. ໨࣍ • WebΞΫηγϏϦςΟͱ͸ • ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞͖͔͚ͬͨͬ • ΞΫηγϏϦςΟͷςʔϚϨϏϡʔ • ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞੒ͯ͠ྑ͔ͬͨ͜ͱ
5. WebΞΫηγϏϦςΟͱ͸ ߴྸऀ΍ো֐ऀͳͲ৺਎ͷػೳʹ੍໿ͷ͋Δ ਓΛؚΊɺWebΛར༻͢Δ͢΂ͯͷਓ͕Web Ͱఏڙ͞Ε͍ͯΔ৘ใΛऔಘ͠ɺαʔϏε΍ ػೳΛར༻Ͱ͖Δ͜ͱ (ࣾ)೔ຊWebΞΫηγϏϦςΟڠձϗʔϜϖʔδΑΓ http://www.jawaa.or.jp/Accessibility/
6. ΞΫηγϏϦςΟରԠͷ WordPressςʔϚΛ࡞Δҙٛ WordPressίϛϡχςΟ͚ͩͰͳ͘ ৘ใࣾձʹߩݙɻ WordPressςʔϚ΋ΞΫηγϏϦςΟʹରԠ͢Δ͜ͱͰɺ αΠτ΋୭Ͱ΋ར༻Ͱ͖ΔΑ͏ʹɻ ୭Ͱ΋ಋೖɺΧελϚΠζͰ͖ΔWordPressɻ
7. ΞΫηγϏϦςΟରԠͷ ςʔϚΛ࡞͖͔͚ͬͨͬ •WordCamp Tokyo 2015ͷίϯτϦϏϡʔλʔσΠ ʹࢀՃɻͦ͜ͰςʔϚ࡞੒Λߦ͏ɻ •࢓ࣄͷҊ݅Ͱͭͬͨࣗ͘࡞ͷjQueryϓϥάΠϯΛε λʔλʔςʔϚʮ_s(ΞϯμʔείΞʔɾΤε)ʯʹ ૊ΈࠐΈɻ
8. WordPressʹ͓͚Δ ΞΫηγϏϦςΟͷΨΠυϥΠϯ • ΩʔϘʔυૢ࡞ςετ • εΫϦʔϯϦʔμʔςετ • Χϥʔίϯτϥετɺ৭໡ςετ • ίʔυςετ ςʔϚϨϏϡʔ࣌ʹ͸͜ΕΒͷςετ͕ߦΘΕ·͢ɻ https://make.wordpress.org/accessibility/handbook/testing/how-to-test-for-accessibility/
9. ΩʔϘʔυૢ࡞ςετ • λϒΩʔͰϘλϯͷબ୒ͷલਐɺޙਐ͕Ͱ͖Δ͜ͱ • ͢΂ͯͷϘλϯʹΞΫηεͰ͖Δ͜ͱ • λϒΩʔͰͲͷϘλϯ͕ϑΥʔΧε͞Ε͍ͯΔ͔ɻ • ΩʔϘʔυͷΈͰૢ࡞͕׬ྃͰ͖ΔΑ͏ʹ͢Δɻ • ΢Οϯυ΢Λখͯ͘͞͠ϨεϙϯγϒϞʔυͰ΋࠶ςε τ • ҟͳΔϒϥ΢βɺλϒϨοτ΍εϚʔτϑΥϯͰ΋ςε τ͢Δ
10. εΫϦʔϯϦʔμʔςετ • ςετ؀ڥ • VoiceOver + Safari on Mac • NVDA + Firefox on Windows • JAWS and IE 11 (no Edge yet) on Windows
11. ΞΫηγϏϦςΟͷϨϏϡʔΛड͚Δʹ͸ /* Theme Name: Accessibility Ready Theme Theme URI: http://example.com/accessibility-ready-theme/ Description: Accessibility Ready Theme Author: John Doe Author URI: http://example.com Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: accessibility-ready-theme */ ςʔϚελΠϧγʔτ (style.css) ͷελΠϧγʔτϔομɺ ςʔϚͷಛ௃Λهड़͢ΔTagsʹʮaccessibility-readyʯΛ௥Ճ͢Δɻ ެࣜσΟϨΫτϦʹΞοϓϩʔυ https://wordpress.org/themes/upload/ ϨϏϡΞʔ͕ͭ͘·Ͱ໿3ʙ4͔݄ͻͨ͢Β଴ͭɻ
12. ϨϏϡʔ಺༰ͱߦͬͨमਖ਼
13. ϨϏϡʔ1 എܠ͍ͬͺ͍ʹը૾Λ഑ஔͯ͠Δ͚Ͳɺ͜Εͩ ͱจࣈ͕ݟ͑ͮΒ͍Ͱ͢ɻจࣈͷ෦෼ʹഎܠ৭Λ Ճ͑Δ͜ͱ͸Ͱ͖·͔͢ʁ ϨϏϡΞʔ จࣈͱഎܠͷΧϥʔίϯτϥετ
14. ςʔϚΧελϚΠβʔʹഎܠը૾ͱίϯςϯπΤϦΞͷ എܠͷಁ໌౓Λม͑ΒΕΔػೳΛ௥Ճ จࣈͱഎܠͷΧϥʔίϯτϥετ मਖ਼಺༰
15. ϘλϯͷϑΥʔΧε࣌ʹ৭͕൓స͢ΔΑ͏ʹ ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ2 ϘλϯͷΧϥʔίϯτϥετ
16. ͢΂ͯͷϘλϯͰϑΥʔΧε࣌ͷ৭Λ൓స ɹ मਖ਼಺༰ ௨ৗ࣌ ϗόʔ࣌ ϑΥʔΧε࣌ ϘλϯͷΧϥʔίϯτϥετ
17. ΩʔϘʔυૢ࡞ςετ TabΩʔͰϑΥʔΧεͰ͖Δ֤Ϙλϯͷ ॱ൪Λௐઅ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ3
18. TabΩʔૢ࡞ ɹ मਖ਼಺༰ tabΩʔ(safari͸tab+option)ͰϘλϯΛϖʔδ্ Ͱ഑ஔ͞Ε͍ͯΔॱ൪௨ΓʹϑΥʔΧεͰ͖ΔΑ ͏ʹमਖ਼ɻ όοΫάάϥ΢ϯυϞʔυ ϑΥτϑϨʔϜϞʔυ
19. എܠͷը૾΋ؚΊͯ഑ஔ͞Ε͍ͯΔ͢΂ͯ ͷը૾ʹaltଐੑΛ௥Ճ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ4 εΫϦʔϯϦʔμʔ
20. ɹ मਖ਼಺༰ εΫϦʔϯϦʔμʔ എܠʹ഑ஔ͍ͯ͠ΔΪϟϥϦʔը૾ʹରͯ͠ altଐੑΛ௥ՃʢϑΝΠϧ໊͕஋ʹೖΔΑ͏ʹʣ <ul> <li><img src="http://site.dev/wp-content/uploads/bg-1.jpg" alt="bg-1"></li> <li><img src="http://site.dev/wp-content/uploads/bg-2.jpg" alt="bg-2"></li> <li><img src="http://site.dev/wp-content/uploads/bg-3.jpg" alt="bg-3"></li> </ul> <ul> <li><img src="http://site.dev/wp-content/uploads/bg-1.jpg"></li> <li><img src="http://site.dev/wp-content/uploads/bg-2.jpg"></li> <li><img src="http://site.dev/wp-content/uploads/bg-3.jpg"></li> </ul>
21. ͢΂ͯͷϘλϯʹରͯ͠ʮscreen-reader-text ʯϥϕϧΛ௥ Ճ͍ͯͩ͘͠͞ɻ bootstrapͷάϥϑΟοΫΞΠίϯΛ࢖ͬͯΔϘλϯʹରͯ͠ ʮaria-hidden=trueʯͷଐੑΛ௥Ճ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ5 εΫϦʔϯϦʔμʔ
22. ɹ मਖ਼಺༰ εΫϦʔϯϦʔμʔ <span class="glyphicon glyphicon-chevron-right"></span> ΞΠίϯͷΈͷϘλϯ͸εΫϦʔϯϦʔμʔ౳Ͱಡ Έ্͛ΛεΩοϓɻ ୅ΘΓʹ"screen-reader-text"ΫϥεͷspanཁૉΛ ௥Ճ͠ɺͪ͜Βͷ಺༰͕ಡΈ্͛ΒΕΔΑ͏ʹ͢Δɻ <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> <span class="screen-reader-text">Switch Mode</span>
23. • ݕࡧϑΥʔϜͷSubmitϘλϯΛද͍ࣔͤͯͩ͘͞͞ɻ • ίϝϯτϑΥʔϜͷPost CommentϘλϯ͕খ͗͢͞ ΔͷͰαΠζΛे෼ʹͱ͍ͬͯͩ͘͞ɻ ϨϏϡΞʔ ϨϏϡʔ6 ϑΥʔϜͷϘλϯ
24. ɹ मਖ਼಺༰ εΫϦʔϯϦʔμʔ • ݕࡧϑΥʔϜͷݕࡧϘλϯ͕ඇදࣔʹͳ͍ͬͯͨͷͰɺදࣔͤͨ͞ɻ • ίϝϯτ౤ߘͷϘλϯͷେ͖͕͞খ͔ͬͨͨ͞Ίɺे෼ͳαΠζΛऔͬ ͨɻ
25. ଞʹ΋ϨϏϡʔͱमਖ਼ΛॏͶͯɾɾɾ
26. ΊͰͨ͘ొ࿥͞Ε·ͨ͠ʂ Ξοϓϩʔυ͔Βొ࿥·ͰԆ΂൒೥͙Β͍͔͔Γ·ͨ͠ɻ https://ja.wordpress.org/themes/bg-photo-frame/
27. ΞΫηγϏϦςΟରԠͷςʔϚΛ ࡞੒ͯ͠ྑ͔ͬͨ͜ͱ
28. ྑ͔ͬͨ͜ͱ • ਓʹ༏͍͠ςʔϚ͕࡞Ε·ͨ͠ɻ • ͜͜ʹొஃͰ͖Δωλ͕Ͱ͖·ͨ͠ • ԿΑΓΞΫηγϏϦςΟʹ͍͍ͭͯ͢͝ษڧʹ ͳΓ·ͨ͠ɻ
29. ଞʹྑ͔ͬͨ͜ͱ ݱࡏςʔϚσΟϨΫτϦʹ͸໿4000ݸ͙Β͍ͷςʔϚ ͕ొ࿥தɻͦͷ͏ͪΞΫηγϏϦςΟରԠͷςʔϚ͸ 100ݸͪΐͬͱɻඇৗʹগͳ͍Ͱ͢ɻ ࡞ͬͨςʔϚ͕໨ཱͭνϟϯεʂ ࣮ྗΛΞϐʔϧͰ͖Δνϟϯεʂ https://ja.wordpress.org/themes/tags/accessibility-ready/ https://ja.wordpress.org/themes/browse/new/
30. ϨϏϡʔͷܦҢ͸͜͜ͰݟΕ·͢ɻ https://themes.trac.wordpress.org/ticket/28202
31. ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞Δ࣌ʹ ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ