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
120
Google I/O Extended Japan 2023 - Web Performance at CyberAgent
herablog
0
350
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
2
610
Core Web Vitals in Practice
herablog
6
7.8k
Scalable PWA
herablog
7
8.4k
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
herablog
15
8.2k
Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend
herablog
23
10k
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
1
140
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
150
Agentic Workflowという選択肢を考える
tkikuchi1002
1
350
実践! AIエージェント導入記
1mono2prod
0
130
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
260
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
1k
OAuth/OpenID Connectで実現するMCPのセキュアなアクセス管理
kuralab
5
810
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
120
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
210
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
190
Definition of Done
kawaguti
PRO
6
460
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
190
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Visualization
eitanlees
146
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Site-Speed That Sticks
csswizardry
10
650
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Typedesign – Prime Four
hannesfritz
42
2.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/