Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
Search
Kazunari Hara
August 09, 2016
Technology
1
20k
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
社内アクセシビリティ勉強会用の資料です。アメブロのリーダビリティ改善をしてみました。
Kazunari Hara
August 09, 2016
Tweet
Share
More Decks by Kazunari Hara
See All by Kazunari Hara
Amebaデザインシステム Spindleの開発 / The Development of Spindle
herablog
2
69
Google I/O Extended Japan 2023 - Web Performance at CyberAgent
herablog
0
280
2023年、知っておきたいWebのこと ~フレームワーク・Web UI~ / web-frameworks-and-web-ui-in-2023
herablog
0
1.4k
Enjoy the Web
herablog
5
1.5k
2022年、知っておきたいWebのこと ~パフォーマンス & セキュリティ~
herablog
2
560
Core Web Vitals in Practice
herablog
6
6.6k
Scalable PWA
herablog
7
7k
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
herablog
15
8.1k
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
herablog
23
10k
Other Decks in Technology
See All in Technology
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
190
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
200
サプライチェーン攻撃に備える
ryunen344
0
270
Road to Single Activity
yurihondo
1
230
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
140
リアルお遍路+SORACOM IoT
ozk009
1
130
Discovering AI Models
picardparis
4
3.9k
eBPFのこれまでとこれから
yutarohayakawa
9
3.1k
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
130
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.3k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
85
5.6k
Unsuck your backbone
ammeep
667
57k
Designing Experiences People Love
moore
138
23k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Why Our Code Smells
bkeepers
PRO
334
56k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Building Your Own Lightsaber
phodgson
101
6k
Code Review Best Practice
trishagee
62
16k
How GitHub (no longer) Works
holman
310
140k
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/