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
WAI-ARIA in 10
Search
Laura Kalbag
March 16, 2015
Technology
1
240
WAI-ARIA in 10
From a talk given at She Codes Brighton's Tech in 10 in March, 2015
Laura Kalbag
March 16, 2015
Tweet
Share
More Decks by Laura Kalbag
See All by Laura Kalbag
Ethical Design
laurakalbag
1
110
Intro to UX
laurakalbag
1
160
Ethical Design
laurakalbag
1
2.9k
Accessibility By Design
laurakalbag
1
97
Designing For Accessibility
laurakalbag
2
140
Indie Design
laurakalbag
4
1.9k
Designing for Accessibility
laurakalbag
0
70
Designing for Accessibility
laurakalbag
1
510
Indie Design
laurakalbag
1
350
Other Decks in Technology
See All in Technology
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
130
生成AIによるテスト設計支援プロセスの構築とプロセス内のボトルネック解消の取り組み / 20241220 Suguru Ishii
shift_evolve
0
180
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
25k
20241125 - AI 繪圖實戰魔法工作坊 @ 實踐大學
dpys
1
440
Denoで作るチーム開発生産性向上のためのCLIツール
sansantech
PRO
0
140
Unsafe.BitCast のすゝめ。
nenonaninu
0
150
Qiita埋め込み用スライド
naoki_0531
0
5.5k
Storage Browser for Amazon S3
miu_crescent
1
350
Evolving Architecture
rainerhahnekamp
3
220
新しいスケーリング則と学習理論
taiji_suzuki
9
3.6k
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
1.5k
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
A designer walks into a library…
pauljervisheath
205
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Bash Introduction
62gerente
609
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
4 Signs Your Business is Dying
shpigford
182
21k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Docker and Python
trallard
43
3.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Transcript
WAI-ARIA in 10 Laura Kalbag @laurakalbag @indie
Why is web accessibility important?
Accessibility makes the web a good experience for as many
people as possible
Accessibility isn’t just about screen readers
Web accessibility is built on a foundation of meaningful HTML
<ul class="links-‐list rooms"> <li>
<a href="#hall">Hall</a> </li> <li> <a href="#kitchen">Kitchen</a> </li> … </ul> <div class="links-‐list rooms"> <a href="#hall">Hall</a> <br> <a href="#kitchen">Kitchen</a> </div> Meaningful vs not-so meaningful HTML
Screen readers
None
<ul class="links-‐list rooms"> <li>
<a href="#hall">Hall</a> </li> <li> <a href="#kitchen">Kitchen</a> </li> … </ul> list 2 items • • internal, link, Hall internal, link, Kitchen end of list How VoiceOver reads it
<div class="links-‐list rooms"> <a href="#hall">Hall</a> <br>
<a href="#kitchen">Kitchen</a> </div> internal, link, Hall internal, link, Kitchen How VoiceOver reads it
What is WAI-ARIA?
Web Accessibility Initiative – Accessible Rich Internet Applications (or ARIA
for short) Born March 2013
Dynamic content / “complex web apps” (Sites that update without
refreshing the page)
ARIA is particularly useful for keyboard navigation and screen readers
Tabs
Tabs WAI-ARIA Overview, selected, tab, 1 of 3 Laura Kalbag,
tab, 2 of 3 Ind.ie, tab, 3 of 3
None
visited, link, Images link, Fonts link, Ways To Pay link,
Offers link, Ideas link, Subscriptions
Web browsers need a few more cues to assist the
human
ARIA is a layer on top of markup content structure
(HTML) additional structure (ARIA)
WAI-ARIA gives developers a way to describe roles, states, and
properties for custom widgets
<a role="tab">Images</a> ARIA Roles
tab, Images tab, Fonts tab, Ways To Pay tab, Offers
tab, Ideas tab, Subscriptions
ARIA Roles vs Implied Roles <button>Images</button> Images, button <button role="tab">Images</button>
tab, Images
<div role="alert">Incorrect password, please try again</div> <div role="dialog">Successfully saved</div>
Other roles Full list at http://www.w3.org/TR/wai-aria/roles#abstract_roles_header
<a role="tab" aria-‐selected="true">Images</a> ARIA States http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected
tab, Images, selected tab, Fonts tab, Ways To Pay tab,
Offers tab, Ideas tab, Subscriptions
Expanding/collapsing menu <button class="menu" aria-‐expanded="false"> <button class="menu"
aria-‐expanded="true"> Menu, collapsed, button Menu, expanded, button
ARIA Landmarks <div class="site-‐header" role="header"> <ul class="site-‐navigation" role="navigation"></ul>
</div>
When we shouldn’t use WAI-ARIA
<ul class="site-‐navigation" role="navigation"> HTML5 vs Landmarks <nav> <ul
class="site-‐navigation"></ul> </nav> http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
ARIA vs HTML <span role="link"> <div role="list"> <span
role="button"> <span role="checkbox"> <a> <ul> <button> <input type="checkbox"> http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
ARIA should be your last resort
However, there’s a lot ARIA can do, that HTML can’t…
Live Regions
New tweets available. Press period to review them. <div id="event-‐log"
aria-‐live="assertive"> <p>New Tweets available. Press period to review them.</p> </div>
Without ARIA, people can miss out
http://caniuse.com/#search=WAI-ARIA
http://html5accessibility.com by The Paciello Group
ARIA can’t fix an unusable site
Thank you! @laurakalbag @indie