Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
Kazunari Hara
August 09, 2016
Technology
1
18k
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
社内アクセシビリティ勉強会用の資料です。アメブロのリーダビリティ改善をしてみました。
Kazunari Hara
August 09, 2016
Tweet
Share
More Decks by Kazunari Hara
See All by Kazunari Hara
herablog
7
1.6k
herablog
15
7.2k
herablog
24
7.7k
herablog
8
3.2k
herablog
8
2.6k
herablog
19
12k
herablog
12
7.4k
herablog
0
99
herablog
0
76
Other Decks in Technology
See All in Technology
ozuma
0
130
recruitengineers
0
140
mukai21
2
550
adarapata
2
360
chaspy
3
1.1k
ocise
0
170
koba789
0
470
muras
0
120
hisaichi5518
0
200
harshbothra
1
170
kanaugust
PRO
0
120
kenya888
1
140
Featured
See All Featured
yeseniaperezcruz
302
31k
jasonvnalue
82
8.1k
searls
204
35k
denniskardys
220
120k
aarron
257
36k
chriscoyier
145
19k
thoeni
4
550
carmenhchung
26
1.3k
mza
80
4.1k
danielanewman
200
20k
ddemaree
274
31k
iamctodd
17
1.9k
Transcript
ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016Ն~ 20168݄9 ݪ Ұ @CyberAgent
৽ଔ͓͡͞Μ @herablog @CyberAgent, Inc
εΫϦʔϯϦʔμʔ is Կ
ίϯϐϡʔλͷը໘ಡΈ্͛ι ϑτΣΞͰ͋ΔɻใΛԻ ͰಡΈ্͛Δ͜ͱʹΑͬͯͦͷ ૢ࡞Λิॿ͢ΔͷͰ͋Δɻ
None
None
ɾΩʔϘʔυͰϑΥʔΧεΛҠಈͰ͖Δ ɾඞཁͳςΩετ͕ಡΈ্͛ΒΕΔ ͔ͨ͠͠Β… هࣄΛʮௌ͘ʯ࣌ʹͳΔ͔… ॏཁͳϙΠϯτ
Ξϝϒϩ is Կ
2004͔ΒͬͯΔϒϩάαʔϏε
tama-web (ameblo 2016)
will be coming soon!
WAI-ARIA ঢ়ଶΛϚγϯʹ͑Δ
aria-hidden=“true” role=“presentation” role=“dialog” tabindex=“0” aria-label=“” aria-disabled=“true”
Icon, Emoji <i class=“menu” aria-hidden=“true”></i> <img src=“…1234.gif” alt=“” role=“presentation” />
http://fontawesome.io/accessibility/
Button <button aria-label=“ϝχϡʔΛ։͘”>…</button>
Modal <div aria-hidden=“true” role=“dialog” tabindex=“0” >…</div>
Pagination <div role=“navigation”> <ul> <li aria-disabled=“true”>…</li> <li> <button aria-label=“࠷ޙͷϖʔδϔ”></button> </li>
</ul> </div>
None
Demo
ΞϝϒϩΛεΫϦʔϯϦʔμʔͰ ಡΈ্͛ͯΈͨ ~2016Ն~ ऴ
ࢀߟ : 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/