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
210
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
97
Intro to UX
laurakalbag
1
160
Ethical Design
laurakalbag
1
2.8k
Accessibility By Design
laurakalbag
1
89
Designing For Accessibility
laurakalbag
2
120
Indie Design
laurakalbag
4
1.7k
Designing for Accessibility
laurakalbag
0
64
Designing for Accessibility
laurakalbag
1
470
Indie Design
laurakalbag
1
340
Other Decks in Technology
See All in Technology
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
160
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
380
統計的学習理論読み Chapter 1
kmatsui
4
960
生成AIサービスPanorama AIご説明資料
sdt
0
300
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2.1k
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
550
Building a RAG app to chat with your data (on Azure)
pamelafox
0
130
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
How GitHub (no longer) Works
holman
301
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Music & Morning Musume
bryan
39
5.5k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Embracing the Ebb and Flow
colly
78
4.1k
Debugging Ruby Performance
tmm1
68
11k
In The Pink: A Labor of Love
frogandcode
137
21k
Six Lessons from altMBA
skipperchong
19
2.9k
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