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
19k
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
社内アクセシビリティ勉強会用の資料です。アメブロのリーダビリティ改善をしてみました。
Kazunari Hara
August 09, 2016
Tweet
Share
More Decks by Kazunari Hara
See All by Kazunari Hara
2022年、知っておきたいWebのこと ~パフォーマンス & セキュリティ~
herablog
1
360
Core Web Vitals in Practice
herablog
6
3.1k
Scalable PWA
herablog
7
3.1k
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
herablog
15
7.6k
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
herablog
23
8.8k
こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4
herablog
8
3.7k
こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA
herablog
8
3k
“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜
herablog
19
12k
アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~
herablog
12
7.9k
Other Decks in Technology
See All in Technology
PUTとPOSTどっち使う?
hankehly
0
180
誰が正解を知っているのか / Who knows the right answer
takaking22
1
230
インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033
sorami
2
210
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
1k
さいきんのRaspberry Pi。 / osc22do-rpi
akkiesoft
4
4.9k
2022年度新卒技術研修「DNS」講義
excitejp
PRO
1
380
JDK Flight Recorder入門
chiroito
1
490
アーキテクチャを明文化して開発に臨んだ話
akihiyo76
0
260
Design for Humans: How to make better modernization decisions
indualagarsamy
2
110
Retca Cloud
bau
0
240
HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る
iwaken71
0
180
多様な成熟度のデータ活用を総合支援するKADOKAWA Connectedのデータ組織について
kadokawaconnected
PRO
0
190
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
The Pragmatic Product Professional
lauravandoore
19
3k
Web development in the modern age
philhawksworth
197
9.3k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Music & Morning Musume
bryan
35
4.2k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Practical Orchestrator
shlominoach
178
8.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Become a Pro
speakerdeck
PRO
3
830
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/