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
220
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
100
Intro to UX
laurakalbag
1
160
Ethical Design
laurakalbag
1
2.8k
Accessibility By Design
laurakalbag
1
93
Designing For Accessibility
laurakalbag
2
130
Indie Design
laurakalbag
4
1.8k
Designing for Accessibility
laurakalbag
0
67
Designing for Accessibility
laurakalbag
1
490
Indie Design
laurakalbag
1
350
Other Decks in Technology
See All in Technology
スレットハンティングについて知っておきたいこと
hacket
0
130
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
AOAI Dev Day - Opening Session
yoshidashingo
2
440
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Designing with Data
zakiwarfel
96
5k
Building an army of robots
kneath
301
42k
The Mythical Team-Month
searls
217
43k
Automating Front-end Workflow
addyosmani
1362
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
How GitHub (no longer) Works
holman
305
140k
RailsConf 2023
tenderlove
16
720
BBQ
matthewcrist
82
9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Bash Introduction
62gerente
607
210k
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