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
250
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
120
Intro to UX
laurakalbag
1
170
Ethical Design
laurakalbag
1
2.9k
Accessibility By Design
laurakalbag
1
110
Designing For Accessibility
laurakalbag
2
160
Indie Design
laurakalbag
4
2k
Designing for Accessibility
laurakalbag
0
77
Designing for Accessibility
laurakalbag
1
520
Indie Design
laurakalbag
1
360
Other Decks in Technology
See All in Technology
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
11
1.5k
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
220
PHPでResult型やってみよう
higaki_program
0
190
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
390
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
今日からあなたもGeminiを好きになる
subaruhello
1
580
PdM業務における使い分け
shinshiro
0
590
AI工学特論: MLOps・継続的評価
asei
10
1.6k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
330
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Ace a Technical Interview
jacobian
278
23k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fireside Chat
paigeccino
37
3.5k
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