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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kazunari Hara
August 09, 2016
Technology
20k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~
社内アクセシビリティ勉強会用の資料です。アメブロのリーダビリティ改善をしてみました。
Kazunari Hara
August 09, 2016
More Decks by Kazunari Hara
See All by Kazunari Hara
Amebaデザインシステム Spindleの開発 / The Development of Spindle
herablog
2
160
Google I/O Extended Japan 2023 - Web Performance at CyberAgent
herablog
0
440
2023年、知っておきたいWebのこと ~フレームワーク・Web UI~ / web-frameworks-and-web-ui-in-2023
herablog
1
1.8k
Enjoy the Web
herablog
5
1.7k
2022年、知っておきたいWebのこと ~パフォーマンス & セキュリティ~
herablog
3
650
Core Web Vitals in Practice
herablog
6
9.7k
Scalable PWA
herablog
7
11k
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
herablog
15
8.4k
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
herablog
23
11k
Other Decks in Technology
See All in Technology
エラーバジェットのアラートのタイミングを考える.pdf
kairim0
0
150
日本 Fintech 未来予測レポート 2027〜2028年(オリジナル版)
8maki
0
2.2k
手塩にかけりゃいいってもんじゃない
ming_ayami
0
570
200個のGitHubリポジトリを横断調査したかった
icck
0
130
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
miyatakoji
0
660
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
hiroakis
3
1.9k
2026TECHFRESH畢業分享會 - Lightning Talk - 打造精準高效的 MCP 設計模式與測試實務
line_developers_tw
PRO
0
1k
【NRUG vol.18】KubernetesにおけるNew Relicデータ取得量削減の考え方
nrug_member
0
110
AIエージェントが名古屋の猛暑からあなたを守る
happysamurai294
0
120
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク ~実装編~
sonic
0
210
Snowflakeと仲良くなる第一歩
coco_se
4
470
プロダクト開発から業務改善コンサルまで。事業全体へ「染み出す」ことで広がるエンジニアの可能性
ham0215
0
130
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
WENDY [Excerpt]
tessaabrams
11
38k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
210
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
Visualization
eitanlees
152
17k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
170
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
780
Information Architects: The Missing Link in Design Systems
soysaucechin
0
970
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
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/