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
130
Google I/O Extended Japan 2023 - Web Performance at CyberAgent
herablog
0
370
2023年、知っておきたいWebのこと ~フレームワーク・Web UI~ / web-frameworks-and-web-ui-in-2023
herablog
0
1.7k
Enjoy the Web
herablog
5
1.6k
2022年、知っておきたいWebのこと ~パフォーマンス & セキュリティ~
herablog
3
610
Core Web Vitals in Practice
herablog
6
8k
Scalable PWA
herablog
7
8.6k
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
herablog
15
8.3k
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
herablog
23
10k
Other Decks in Technology
See All in Technology
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
Lambda management with ecspresso and Terraform
ijin
2
130
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
620
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
330
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
180
Claude Codeは仕様駆動の夢を見ない
gotalab555
7
1.5k
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
340
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
RailsConf 2023
tenderlove
30
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Facilitating Awesome Meetings
lara
54
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
73
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
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/