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

Transcript

1. 1.

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

2. 2.

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

3. 3.

   εΫϦʔϯϦʔμʔ is Կ

4. 4.

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

5. 5.

   None
6. 6.

   None
7. 7.

   ɾΩʔϘʔυͰϑΥʔΧεΛҠಈͰ͖Δ ɾඞཁͳςΩετ͕ಡΈ্͛ΒΕΔ ΋͔ͨ͠͠Β… هࣄΛʮௌ͘ʯ࣌୅ʹͳΔ͔΋… ॏཁͳϙΠϯτ

8. 8.

   Ξϝϒϩ is Կ

9. 9.

   2004೥͔Β΍ͬͯΔϒϩάαʔϏε

10. 10.

    tama-web (ameblo 2016)

11. 11.

    will be coming soon!

12. 12.

    WAI-ARIA ঢ়ଶΛϚγϯʹ఻͑Δ

13. 13.

    aria-hidden=“true” role=“presentation” role=“dialog” tabindex=“0” aria-label=“” aria-disabled=“true”

14. 14.

    Icon, Emoji <i class=“menu” aria-hidden=“true”></i> <img src=“…1234.gif” alt=“” role=“presentation” />

15. 15.

    http://fontawesome.io/accessibility/

16. 16.

    Button <button aria-label=“ϝχϡʔΛ։͘”>…</button>

17. 17.

    Modal <div aria-hidden=“true” role=“dialog” tabindex=“0” >…</div>

18. 18.

    Pagination <div role=“navigation”> <ul> <li aria-disabled=“true”>…</li> <li> <button aria-label=“࠷ޙͷϖʔδϔ”></button> </li>

    </ul> </div>
19. 19.

    None
20. 20.

    Demo

21. 21.

    ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016೥Ն~ ऴ

22. 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/