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

Transcript

1. ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016೥Ն~ 2016೥8݄9೔ ݪ Ұ੒ @CyberAgent

2. ৽ଔ͓͡͞Μ @herablog @CyberAgent, Inc

3. εΫϦʔϯϦʔμʔ is Կ

4. ίϯϐϡʔλͷը໘ಡΈ্͛ι ϑτ΢ΣΞͰ͋Δɻ৘ใΛԻ੠ ͰಡΈ্͛Δ͜ͱʹΑͬͯͦͷ ૢ࡞Λิॿ͢Δ΋ͷͰ͋Δɻ

5. None
6. None

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>
19. None

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/