• Share
  • Email
  • Embed
  • Like
  • Private Content
A quick Introduction to WAI-ARIA
 

A quick Introduction to WAI-ARIA

on

  • 9,633 views

A quick introduction to WAI-ARIA including a brief history, some examples of Landmark roles and some simple examples of using ARIA in forms.

A quick introduction to WAI-ARIA including a brief history, some examples of Landmark roles and some simple examples of using ARIA in forms.

Statistics

Views

Total Views
9,633
Views on SlideShare
9,010
Embed Views
623

Actions

Likes
31
Downloads
139
Comments
13

12 Embeds 623

http://www.maxdesign.com.au 475
http://charin.dothome.co.kr 106
https://twitter.com 23
http://thinkery.me 6
http://us-w1.rockmelt.com 4
http://www.linkedin.com 2
http://meltwaternews.com 2
http://131.253.14.66 1
https://si0.twimg.com 1
http://paper.li 1
http://twicli.neocat.jp 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 13 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • YES, completely correct. There are several instances where I should have used 'complementary'. I'll try to update these slides to reflect this soon. Thanks for raising this (also raised by others in comments)
    Are you sure you want to
    Your message goes here
    Processing…
  • 'complimentary' should be 'complementary'
    Are you sure you want to
    Your message goes here
    Processing…
  • @benrosset you can use ARIA with HTML4.01, XHTML1.0 or HTML5. There are some components that tie in much more specifically to HTML5 but that is not a requirement.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation. Still unsure whether ARIA can be used with HTML 4 / XHTML 1, or is it only compatible with HTML 5? Thanks!
    Are you sure you want to
    Your message goes here
    Processing…
  • There are some IE quirks with aria-describedby - see notes at bottom of: http://www.html5accessibility.com/tests/mulitple-labels.html
    Are you sure you want to
    Your message goes here
    Processing…

110 of 13 previous next

Post Comment
Edit your comment

    A quick Introduction to WAI-ARIA A quick Introduction to WAI-ARIA Presentation Transcript

    • A QUICK INTRO TOWAI-ARIA
    • What is WAI- ARIA?
    • WAI-ARIA stands forAccessible Rich Internet Applications
    • The Protocols and Formats Working Group (PFWG) published WAI-ARIA 1.0 as a W3C Candidate Recommendation on 18 January 2011.
    • A bit ofbackground...
    • HTML is very static. It has avery limited set of interface controls and interactions.
    • As the demand for rich interaction increased,Javascript became our saviour!
    • JavaScript provides us with many things including:dynamic interactions such as drag and drop, resizing etc.a rich set of widgets such as date pickers, sliders etc.
    • However, many of dynamicinteractions and widgets are problematic for Assistive Technologies (ATs).
    • Many widgets are inaccessible by keyboard ATs may not be made aware ofdynamically generated content as it is updated.
    • ARIA to the rescue
    • ARIA allows us to describe properties, states, keyboard access improvements androles to help make widgets and dynamic content accessible.
    • PropertiesProperties describe the nature of a given object.<p id="item1">First item</p><div><a href="javascript:" role="button"aria-labelledby="item1">Content</a></div>
    • States States describe the dynamic property of an object that may change in response to user action.<section aria-expanded="true"class="expand"> Text</section>
    • Keyboard access Allows us to assign tabindex (including tabindex=-1) to any element for greater keyboard control.<div role="toolbar" id="Toolbar"tabindex="0"><div role="toolbar" id="Toolbar"tabindex="-1">
    • Roles Roles describe elements and their purpose: General concepts (Abstract roles) Interface widgets (Widget roles)Content structure (Document structure roles) Page structure (Landmark roles)
    • ARIA landmark roles
    • Landmark roles help us todescribe the overall document structure to assistive devices.
    • Landmark roles are wellsupported by JAWS, NVDA and Mac OSX Voiceover. They are not as well supported by Window-Eyes.
    • Roles are announced to the screen reader or braille device eg: “Navigation landmark”<nav role="navigation">! <ul>! ! <li><a href="#">home</a></li>! ! <li><a href="#">about</a></li>! </ul></nav>
    • Users can use keyboard shortcuts or (in the case ofJAWS) a dialog box to navigate around web pages via Landmark roles.
    • The landmarks
    • The banner role is used to describe a region that is overall site orientated, such as a header.Defined with HTML5 Described with ARIA <header role="banner"> ! <h1>Heading</h1> </header>
    • <header role=banner>
    • The search role is used to describe a search function.<form role="search">! search form info here</form>
    • <form role=search><header role=banner>
    • The navigation role is used to describe a collection of primary navigation elements.<nav role="navigation">! <ul>! ! <li><a href="#">home</a></li>! ! <li><a href="#">about</a></li>! </ul></nav>
    • <form role=search><header role=banner><nav role=navigation>
    • The main role is used to describe the main content of the document.<div role="main">! <section></section></div>
    • <form role=search><header role=banner><nav role=navigation><section role=main>
    • The complimentary role is used to describe a region that is complimentary to the main content - such as an aside.<aside role="complimentary">! <h3>Related info</h3></aside>
    • <form role=search><header role=banner><nav role=navigation><section role=main> <aside role= complimentary>
    • The contentinfo role is used to describe a regions that define the overall document, like a footer.<footer role="contentinfo">! <ul>! ! <li>Copyright</li>! ! <li>Contact info</li>! </ul></footer>
    • <form role=search><header role=banner><nav role=navigation><section role=main> <aside role= complimentary><footer role=contentinfo>
    • The form role is used to describe a form - surprisingly!<form action="#" role="form">! form info here...</form>
    • <form role=search><header role=banner><nav role=navigation><section role=main> <aside role= <form role=form> complimentary><footer role=contentinfo>
    • ARIA in forms
    • ARIA roles are particularly usefulwhen used with form controls,allowing us to describe functions in a variety of powerful ways.
    • For example, many instructions associated with form controlsuse presentational strategies alone.
    • We can enhance thesestrategies for ATs using ARIA todescribe aspects of the form and/or its functionality.
    • aria-required=true
    • The HTML5 “required” attribute defines the element as “required”.Defined with HTML5<input required aria-required="true"name="name" id="name" type="text">
    • The aria-required describes this to ATs. Described with ARIA<input required aria-required="true"name="name" id="name" type="text">
    • aria-disabled=true
    • The HTML5 “disabled” attribute defines the element as “disabled”.Defined with HTML5<input disabled aria-disabled="true"name="name" id="name" type="text">
    • The aria-required describes this to ATs. Described with ARIA<input disabled aria-disabled="true"name="name" id="name" type="text">
    • aria-invalid=true
    • The aria-invalid indicates to ATs which data fields have incorrect data.<input aria-invalid="true"name="email" id="email" type="text">
    • aria-describedby
    • How do you add detailedinstructions to form controls?
    • You could add the informationinside a <label> element, but this is often not the best location.<label for="date">Date (must be mm/dd/yyyy)</label><input type="text" name="date" id="date">
    • You could add the information outside the label, but then it may be ignored by ATs.<label for="date">Date</label><input type="text" name="date" id="date"><span>(must be mm/dd/yyyy)</span>
    • Using aria-describedby, we canassociate a form control with a label and additional information.
    • The aria-describedby takes the IDs of one or more elements to create an additional description for elements.<label for="date">Date:</label><input type="text" name="date" id="date"aria-describedby="format1" /><span id="format1">(must be mm/dd/yyyy)</span>
    • Things you can do right now
    • Step 1Add landmark roles to the main containers on your pages. role=banner role=navigation role=search role=main role=complimentary role=contentinfo
    • Step 2 Add some simple ARIAattributes into your forms. aria-required="true" aria-disabled="true" aria-invalid="true"aria-describedby="XXX"
    • Thank you
    • Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley