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
380
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
8.3k
Scalable PWA
herablog
7
8.9k
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
11k
Other Decks in Technology
See All in Technology
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
AWS IoT 超入門 2025
hattori
0
300
社内お問い合わせBotの仕組みと学び
nish01
1
560
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
110
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
150
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
110
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
120
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
600
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
430
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Leading Effective Engineering Teams in the AI Era
addyosmani
1
24
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Speed Design
sergeychernyshev
32
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Done Done
chrislema
185
16k
RailsConf 2023
tenderlove
30
1.2k
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/