Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WAI-ARIA in 10
Laura Kalbag
March 16, 2015
Technology
1
180
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
87
Intro to UX
laurakalbag
1
150
Ethical Design
laurakalbag
1
2.8k
Accessibility By Design
laurakalbag
1
73
Designing For Accessibility
laurakalbag
2
87
Indie Design
laurakalbag
4
1.5k
Designing for Accessibility
laurakalbag
0
52
Designing for Accessibility
laurakalbag
1
390
Indie Design
laurakalbag
1
330
Other Decks in Technology
See All in Technology
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.3k
The Fractal Geometry of Software Design
vladikk
1
1.3k
ROS再入門-はじめてのSLAM-
miura55
0
420
ソフトウェアライセンス 2022 / Software License 2022
cybozuinsideout
PRO
1
1.1k
The application of formal methods in Kafka reliability engineering
line_developers
PRO
1
210
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
300
Introduction to MLOps
asei
6
1.1k
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.2k
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
690
情報の世界 2022年度 第11回「都市のデータ」 #情報の世界 / Data of City 2022
yumulab
0
110
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
120
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Product Roadmaps are Hard
iamctodd
34
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Building Applications with DynamoDB
mza
83
4.7k
How to name files
jennybc
40
61k
The Invisible Side of Design
smashingmag
290
48k
Building Adaptive Systems
keathley
25
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
A Philosophy of Restraint
colly
192
15k
Web Components: a chance to create the future
zenorocha
303
40k
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