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

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

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

2e0e89a34badf79dcff642cb7b5c126f?s=128

Kazunari Hara

August 09, 2016
Tweet

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/