アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~

社内アクセシビリティ勉強会用の資料です。アメブロのリーダビリティ改善をしてみました。

Transcript

1. ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016೥Ն~ 2016೥8݄9೔ ݪ Ұ੒ @CyberAgent
2. ৽ଔ͓͡͞Μ @herablog @CyberAgent, Inc
3. εΫϦʔϯϦʔμʔ is Կ
4. ίϯϐϡʔλͷը໘ಡΈ্͛ι ϑτ΢ΣΞͰ͋Δɻ৘ใΛԻ੠ ͰಡΈ্͛Δ͜ͱʹΑͬͯͦͷ ૢ࡞Λิॿ͢Δ΋ͷͰ͋Δɻ
7. ɾΩʔϘʔυͰϑΥʔΧεΛҠಈͰ͖Δ ɾඞཁͳςΩετ͕ಡΈ্͛ΒΕΔ ΋͔ͨ͠͠Β… هࣄΛʮௌ͘ʯ࣌୅ʹͳΔ͔΋… ॏཁͳϙΠϯτ
8. Ξϝϒϩ is Կ
9. 2004೥͔Β΍ͬͯΔϒϩάαʔϏε
10. tama-web (ameblo 2016)
11. will be coming soon!
12. WAI-ARIA ঢ়ଶΛϚγϯʹ఻͑Δ
13. aria-hidden=“true” role=“presentation” role=“dialog” tabindex=“0” aria-label=“” aria-disabled=“true”
14. Icon, Emoji <i class=“menu” aria-hidden=“true”></i> <img src=“…1234.gif” alt=“” role=“presentation” />
15. http://fontawesome.io/accessibility/
16. Button <button aria-label=“ϝχϡʔΛ։͘”>…</button>
17. Modal <div aria-hidden=“true” role=“dialog” tabindex=“0” >…</div>
18. Pagination <div role=“navigation”> <ul> <li aria-disabled=“true”>…</li> <li> <button aria-label=“࠷ޙͷϖʔδϔ”></button> </li> </ul> </div>
20. Demo
21. ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016೥Ն~ ऴ
22. ࢀߟ : http://website-usability.info/2015/07/entry_150706.html http://blog.e-riverstyle.com/2011/01/waiariahtml5.html http://memolog.org/2012/05/aria-hidden.html http://shufulife.com/role/ http://xn--lcki7of.jp/502/ http://05step.com/2012/06/03/html5-role-markup/ http://blog.e-riverstyle.com/2011/01/rolewaiaria.html https://w3g.jp/blog/lets_role_fit http://fontawesome.io/accessibility/ http://www.webcreativepark.net/html/wai-aria/aria- disabled/