Download presentation
Presentation is loading. Please wait.
Published byCaitlin Harris Modified over 9 years ago
1
ARIA intro WAI ARIA The problems being addressed Limitations of the web pidgin The old and new webs The ARIA solution (roles, states, properties, regions, keyboard, user agent implementation guide) How to proceed... Tools and compliant systems
2
ARIA’s place in the scheme of things W3C track (part of the Web Accessibility Initiative (WAI) – like WCAG. A W3C Draft Recommendation: (WAI-ARIA) http://www.w3.org/TR/wai- aria/ Dense! But different. Will see how…
3
The problem: the pidgin of the web HTML semantics != intended meaning
4
The pidgin of the web, improved etc… an example (CTools)example
5
AT has to rely on… making sense of a vocabulary-poor pidgin language skewed for presentation syntactical conventions a well trained AT user – and a steep learning curve
6
The old web sequential flow of information (get and post) –init by client logic on the server, client is just a get, post, and display technology Get and post Response
7
The new web: asynchronous Click “Like” Server updated in the background No new “page” DOM manipulations from response: “Like” > “Unlike” “You like this” added Comment box unhidden
8
The new web: asynchronous (2) Click on “View all 6 comments” Data retrieved from server async, manipulated into markup and inserted into the DOM
9
The WAI-ARIA solution Enrich the markup to help AT users read The document parts: landmark roles The function of a fragment: all roles Map events to a11y APIs to help AT interact with the new markup States of a fragment with a role Properties of a fragment with a role
10
The WAI-ARIA solution
11
Landmark roles: the problem being addressed ….etc Presentational markup does not add non visual meaning Headers, hidden text, etc. help.
12
Non-ARIA solutions University of Michigan Topic-Based Site-Wide Navigation About U-M Live exampleexample
13
ARIA Landmark roles Adding non visual meaning to document parts http://www.w3.org/TR/wai- aria/#roleattribute_inherits http://www.w3.org/TR/wai- aria/#roleattribute_inherits Example (Paciello Group) Example Full example (Univ Illin. U-C) Full example application banner complementary contentinfo main navigation search
14
Land mark roles: attribute/values Accessible names and description – calculated (aria-label, aria- describedby, title)
15
Other roles to structure: Content article definition grid heading (nestedness!) math note etc. (integration with HTML 5) Interactions application combobox dialog marquee progressbar toolbar etc.
16
Role taxonomy is: Descriptive (it does what the name says) tooltip tree directory Hierarchical widget > menu > menuitem (or menuitemcheckbox, menuitemradio) Grid > Row > ( gridcell, rowheader, columnheader)
17
Role taxonomy is: Related to other taxonomies (easy!) A grid role is sort of a table A heading role is sort of a HTML 4. Much like a HTML 5 Structured (no DTD, but is coming) Elements have required/allowed parents required/allowed children Inheritance ----- but fuzzy
18
Some role examples (1) A set of nested articles …. ….
19
Some role examples (2) A tool bar (CTools)CTools My Current Sites Joinable Sites
20
More complex role examples CITA Radio button groups CITA Radio button Lunch Options Thai Subway JJ
21
More complex role examples CITA slider 1950 2000
22
Properties: less likely to change, essential of the object Widget label States: likely to change in the interaction – store values to help AT Enter a number am not entering a number! To help assistive technology user interact with the fragment Properties and states
23
More state examples aria-disabled aria-hidden aria-expanded
24
Live Regions Any element that may change Some roles (timer, log, marquee, status) have default settings aria-atomic (false, true) - [parts/whole] aria-busy (false, true) aria-live (off, polite, assertive) - [inherited] aria-relevant (additions, removals, text, all)
25
Live Regions Example (potential!) Users present Chat
26
Keyboard A11y Extending tabindex tabindex=0 Element can receive focus tabindex=-1 Element (and maybe its parts) will be focused programmatically
27
Keyboard A11y - Examples CITA Radio button groups (again) CITA Radio button Lunch Options Thai Subway JJ
28
Adding ARIA Adding landmark role attributes to static html CTools (before / after)before after Issues: Non-valid attributes Namespacing, browser quirks….
29
Adding ARIA Adding landmark role attributes dynamically – several techniques Using class as seed Javascript parses class, adds all strings after axs as the value of a role. Adds role.
30
Adding ARIA – mapping ids to roles Adding landmark roles to MetafilterMetafilter ariamap.json : { "id":"logo", "role":"banner" },..... $('#ariame').click(function(){ jQuery.ajax({ url: 'MetaFilter_files/ariamap.json', success: function(data){ for (var i = 0; i < data.length; i++) { var id = data[i].id; var role = data[i].role; $('#' + id).addClass('lime'); $('#' + id).attr('role', role); } }, error: function(){ // console.log(‘error! '); } });
31
Adding ARIA +(roles/states) document structure article heading list group directory definition input states and properties (freedom from the * ) (after failed validation)
32
Adding ARIA: using components/libraries JQuery-UI Example: JQuery-UI Dialog (CTools Site Info)Site Info FLUID Example: List Reorderer (CTools Assignments) Assignments Dojo Others…
33
Integrating a FLUID compoment in CTools Assignments Load FLUID library in the application <script type="text/javascript" src="/sakai-assignment-tool/fluid/Fluid-all.js"> Create small script to identify targets, load options var opts = { selectors: { movables: "[id^=assignment.orderable]" }, listeners: {onBeginMove: preserveStatus, afterMove: registerChange} }; return fluid.reorderList("#assignment-reorder", opts); });
34
FLUID: CTools Assignments Customize FLUID callbacks onBeginMove: preserveStatus afterMove: registerChange Style elements and states .orderable-selected .orderable-drop-marker .orderable-hover .orderable-dragging .orderable-avatar
35
Links Working Draft http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/ A very nice introduction from Opera dev http://dev.opera.com/articles/view/introduction-to-wai- aria/ http://dev.opera.com/articles/view/introduction-to-wai- aria/ FLUID Project http://www.fluidproject.org/ http://www.fluidproject.org/ iCITA ARIA Examples http://test.cita.illinois.edu/ http://test.cita.illinois.edu/
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.