| Time | Session | Presenter |
|---|---|---|
| 10:00 – 11:00 | Overview and Introduction to WCAG and WAI-ARIA | Michael Cooper |
| 11:00 – 11:30 | Break | |
| 11:30 – 12:30 | Session 1: Browser and Screen Reader Implementations | Steven Faulkner |
| 12:30 – 13:30 | Lunch | |
| 13:30 – 14:15 | Session 2: Authoring Practices and Frameworks I | Andrew Ronksley |
| 14:15 – 15:00 | Session 3: Authoring Practices and Frameworks II | Joshue O'Connor |
| 15:00 – 15:30 | Break | |
| 15:30 – 16:15 | Session 4: Example Application and Solution I | Lynn Holdsworth |
| 16:15 – 17:00 | Session 5: Example Application and Solution II | Artur Ortega |
| 17:00 – 17:30 | Closing Q&A | Michael Cooper |
Comparison of WCAG 1.0 Checkpoints to WCAG 2.0
| Not programmatically determined | Caption and redundant alt | Caption programmatically determined | |
|---|---|---|---|
| Example |  Manji making a face |
Manji making a face |
Manji making a face |
| Code | <img src="manji.png" />
<p>Manji making a face</p> |
<img src="manji.png"
alt="Mangi making a face" />
<p>Manji making a face</p> |
<img src="manji.png"
aria-labelledby="img_ex1" />
<p id="img_ex1">Manji making a face</p> |
| Screen reader | "graphic Manji making a face" | "Manji making a face Manji making a face" | "Manji making a face" |
| Example | Code |
|---|---|
|
<ul>
<li>Check out the video report for last year's
<a href="http://example.com/festival.htm">
National Folk Festival</a>.
</li>
</ul> |
Article titleDescription of article | <h3>Article title</h3>
<p>Description of article</p>
<p><a href="http://example.com/">Read more</a></p> |
tabindex attribute extended to all elements, not just links and form controlstabindex={positive integer} defines tab position of elementtabindex=0 puts element in focus order, in default ordertabindex=-1 makes element script-focusable, but not in focus order:focus pseudo-class often covers this
role attributearia-{propertyname} attributes
| HTML Button | Styled "Button" | ARIA Button | |
|---|---|---|---|
| Example | Styled | ARIA | |
| Code | <button
onclick="updateButton
('HTML Button')>
HTML
</button> |
<span class="mybutton"
onclick="updateButton
('HTML "Button"')">
Styled
</span> |
<span class="mybutton"
onclick="updateButton
('HTML "Button"')"
role="button">
ARIA
</span> |
| Screen reader | "Button HTML" | "Styled" | "Button ARIA" |
Notes about these examples:
span to do buttons since buttons can be styled| Example | Code |
|---|---|
<button onclick="exToggleCheckboxes()"
role="button"
aria-pressed="false">
Check all
</button>
function exToggleCheckboxes() {
var curState = button.getAttribute("aria-pressed");
//for each checkbox
if (curState == "false" || curState == "mixed")
element.checked = true;
else element.checked = false;
} |
Notes about this example:
button element, making it a toggle buttonspan, but must override default behaviour by returning false from actionaria-pressed state, ensuring everything kept in syncrole="button", even though this is already a button, to activate processing of the ARIA statesaria-grabbed—whether object is selected for drag and drop, or is unselectablearia-dropeffect—possible effects (e.g., move, copy, etc.) when an object dropped inaria-dropeffect usually only set after something has been grabbed aria-labelledby and aria-describedby—reference to alternative content elsewhere on the pagearia-activedescendant—indicates the subcomponent that has the focusaria-owns and aria-controls—non-descendant elements that are part of or controlled by the objectaria-posinset—position of an element in a set (when part of the set is elided)<div aria-live="polite" aria-relevant="text">0</div>
Live regions have content that updates without user intervention, e.g., stock tickers, chat programs
aria-live
aria-relevant—what kind of update occurredaria-atomic—change to any part of element triggers update of entire elementHow WAI Develops Accessibility Guidelines through the W3C Process
Working Draft
Last Call Working Draft
Candidate Recommendation
Proposed Recommendation
W3C Recommendation (Web Standard)Questions?
Michael Cooper: cooper@w3.org
This presentation: http://www.w3.org/2009/Talks/09-16-TECHSHARE-MC/