Overview of WCAG 2.0 and outline of some practical differences with WCAG 1.0

1. Session 1: Moving to WCAG 2.0 Presenter: Roger Hudson Web Usability Web Accessibility 2.0 Seminar November 2008

2. What is web accessibility? Site accessibility is a measure of how effectively all people, including those with disabilities, are able to access and use web pages. “ The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect .” Tim Berners-Lee Founder of the World Wide Web Director of W3C

4. “ The provision of information and online services through the Worldwide Web is a service covered by the DDA (Disability Discrimination Act). Equal access for people with a disability in this area is required by the DDA where it can reasonably be provided.” HREOC Advisory Note Version 3.2, 2002. Accessibility requirements in Australia Section 24 of the Disability Discrimination Act (1992) says that when providing goods or services, it is unlawful to discriminate against a person because of their disability. The Act is interpreted by the Australian Human Rights Commission (formally HREOC) in advisory notes.

5. “ From 1 December 2000, all websites were to follow the W3C guidelines to a sufficient extent that they pass recognised tests of accessibility.” Level of Compliance: “ The Human Rights and Equal Opportunity Commission's view is that compliance with the W3C WCAG 1.0 guidelines to the Single-A level (Priority 1) is a minimum rather than a desirable outcome. Websites that demonstrate such compliance may still be difficult or impossible to access for many users with a disability.” Australian Government Information Management Office: Guide to Minimum Website Standards – Accessibility, April 2003 www.agimo.gov.au/practice/mws/accessibility Also an AGIMO requirement

6. Moving to WCAG 2.0 Reference document version: Proposed Recommendation 3 November 2008.

9. WCAG 2 Overview Checking out the features …

12. WCAG 2 Structure – Guidelines WCAG 2 Guidelines Within the 4 Principles, 12 Guidelines provide the requirements for making content more accessible to people with different disabilities. Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can perceive. Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language Guideline 1.2 Time-based Media: Provide alternatives for time-based media Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure. Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background

13. WCAG 2 Structure – Success Criteria Success Criteria The 12 Guidelines contain a total of 61 Success Criteria. Success Criteria can be used for specifying website requirements and conformance testing.

14. WCAG 2 Success Criteria for 1.3 Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can perceive. Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure. Success Criteria 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. How to meet 1.3.1 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. How to meet 1.3.2 1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. How to meet 1.3.3

16. “ Normative” and “Informative” Normative Document is the “WCAG 2.0 W3C Recommendation”. It contains the Principles, Guidelines and Success Criteria that specify what is required to comply with the guidelines. Informative Documents “Understanding WCAG 2.0” and “Techniques for WCAG 2.0” provide advice on how to meet these requirements. Testable and Flexible Success Criteria are stable statements that can be applied to different technologies and are testable by machines and/or humans. Informative techniques are provided for different technologies and will evolve over time as new technologies emerge.

17. WCAG 1 - Technology specific WCAG 1.0 was specific to W3C formats like HTML and CSS Guideline 11. Use W3C technologies and guidelines. Checkpoint 11.4 “ If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible page. [Priority 1]”

18. WCAG 2 - Technology Neutral WCAG 1.0 was specific to W3C technologies like HTML and CSS WCAG 2.0 applies to all W3C and non-W3C technologies so long as their use is accessible. Guideline 11. Use W3C technologies and guidelines. Checkpoint 11.4 “ If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible page. [Priority 1]”

22. Levels of Conformance WCAG 2.0 has no direct equivalent to the WCAG 1.0 Priority Levels. WCAG 2.0 Success Criteria are organised into three levels of conformance. “ Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided. Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.” Source: http://www.w3.org/TR/2008/PR-WCAG20-20081103/#conformance-reqs

24. Let’s look under the bonnet

25. “ Guideline 10 Use interim solutions: Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly .” WCAG 1 “Until user agents …” WCAG 1.0 Guideline 10 contains five WCAG 1.0 Checkpoints, each starting with the phrase, “Until user agents”

26. WCAG 2 Success Criteria compliance assumes user agent support . No explicit Success Criteria for the following WCAG 1 Checkpoints No more “Until user agents …” 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. 10.3 Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative for all tables that lay out text in parallel, word-wrapped columns. 10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters between adjacent links.

27. Support for scripting WCAG 1.0 Checkpoint 6.3 “ Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]” WCAG 1 assumed accessibility problems with JavaScript Some JavaScript is now well supported by browsers and assistive technologies. Some JavaScript can improve the accessibility of sites for some users. WCAG 2 does not automatically preclude the use of JavaScript. There is no WCAG 2 equivalent for Checkpoint 6.3 .

29. Identifying form errors and providing help to correct them. ( Guideline 3.3 Input Assistance: Help users avoid and correct mistakes) Using an onchange event in a Select menu to change the content of another Select menu. ( Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways) Showing or hiding sections of the page (not AJAX) ( Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard) ( Guideline 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are) More information: “Accessible Forms Using WCAG 2.0” http://www.usability.com.au/resources/wcag2/ (Thanks to Chris Bentley, Andrew Downie and Russ Weakley) Three helpful JavaScript techniques

30. WAI-ARIA “ WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies .” WAI-ARIA Overview http://www.w3.org/WAI/intro/aria.php Additional accessibility features allow assistive technologies to interact with more advanced and complex user interface controls. ARIA Examples: Toggle button: http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html Tri-state checkbox: http://www.paciellogroup.com/blog/misc/ARIA/tristatecheck.html Slider control: http://www.paciellogroup.com/blog/misc/ARIA/slider/ Source: http://www.paciellogroup.com/blog/misc/ARIA/atmedia2008/

31. Form labels and controls WCAG 1.0 Checkpoint 10.2 “ Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. [Priority 2]” WCAG 1.0 Checkpoint 12.4 “ Associate labels explicitly with their controls. [Priority 2] ” No WCAG 2 equivalent for Checkpoint 10.2. These two Checkpoints require all form inputs to have a label that is correctly positioned and explicitly associated with the control (input).

32. “ 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)” Techniques: H44: Using label elements to associate text labels with form controls H65: Using the title attribute to identify form controls when the label element cannot be used In WCAG 2: Identifying form controls in WCAG 2 More information: “Accessible Forms Using WCAG 2.0” http://www.usability.com.au/resources/wcag2/ NB: Use of the form control “title” attribute is deemed a Sufficient Technique, " when the visual design cannot accommodate the label or where it might be confusing to display a label ".

33. Two useful uses of the “title” attribute for forms <input type=&quot;text&quot; title=&quot;site search&quot; name=&quot;query&quot; id=&quot;q&quot; value=&quot;&quot;> Offing “Off-left” with “Title”

34. Two useful uses of the “title” attribute for forms <input type=&quot;text&quot; title=&quot;site search&quot; name=&quot;query&quot; id=&quot;q&quot; value=&quot;&quot;> Offing “Off-left” with “Title” <th>Personal savings</th> <td align=&quot;center&quot;>$1,200.00</td> <td align=&quot;center&quot;><input type=&quot;text&quot; title=&quot;deposit amount for personal savings&quot; value=&quot;&quot;></td>

35. New form requirements Error Detection and Messages WCAG 2 directly addresses the prevention, detection and correction of errors in forms. &quot;Guideline 3.3 Input Assistance: Help users avoid and correct mistakes&quot; Guideline contains six Success Criteria (two at Level A). Timed responses Setting of time limits for forms is likely to exclude some users with certain disabilities from completing the form in the required time. “ Guideline 2.2 Enough time: Provide users with disabilities enough time to read and use content” Guideline contains five Success Criteria (two at Level A).

36. “ 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)” Techniques: H51: Using table markup to present tabular information H63: Using the scope attribute to associate header cells and data cells in data tables H43: Using id and headers attributes to associate data cells with header cells Data tables: Associating header and data cells WCAG 1.0 Checkpoint 5.1 “ For data tables, identify row and column headers. [Priority 1]” WCAG 1.0 Checkpoint 5.2 “ For data tables with two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]” In WCAG 2 replaced with:

37. Data tables: Re-cap ‘id’ and ‘headers’ <th colspan=&quot;2&quot; id=&quot;domestic&quot;> Domestic </th> <th id=&quot;apples-dom&quot;> Apples </th> <th id=&quot;sydney&quot; colspan=&quot;5&quot;> Sydney </th> <th headers=&quot;sydney&quot; id=&quot;wholesale-sydney&quot;> Wholesale </th> <td headers=&quot;domestic apples-dom sydney wholesale-sydney&quot;> $1.00 </td> Heading cells, each with a unique “id” value. Data cell, with “headers” value that matches the “id” values of the related heading cells. Code excerpts (sections only) Source: http://www.usability.com.au/resources/tables.cfm

38. “ 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)” Techniques: H73: Using the summary attribute of the table element to give an overview of data tables H39: Using Using caption elements to associate data table captions with data tables Data tables: Summary attribute and Caption element WCAG 1.0 Checkpoint 5.5 “ Provide summaries for tables. [Priority 3] ” In WCAG 2, table ‘Summary’ and ‘Caption’ may now be required for Level A compliance

39. Orange and apple prices <table summary =&quot;Wholesale and retail prices of imported and domestic oranges and apples in Sydney and Melbourne. Table has two levels of column and row headings&quot;> < caption > Orange and apple prices < /caption > <thead> … rest of table Data tables: Summary and Caption example

40. WCAG 1.0 Checkpoint 13.1 “ Clearly identify the target of each link. [Priority 2]” “ 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)” “ 2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)” In WCAG 2 replaced with two Success Criteria at different compliance levels. Identifying the purpose (target) of links

41. WCAG 1.0 Checkpoint 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2] Bypassing blocks and skip links WCAG 1.0 does not address bypassing repeated blocks of text. WCAG 2.0 promotes the use of “skip links” “ 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)” Techniques: G1: Adding a link at the top of each page that goes directly to the main content area G123: Adding a link at the beginning of a block of repeated content to go to the end of the block G124: Adding links at the top of the page to each area of the content

43. Situation A: text is less than 18 point if not bold and less than 14 point if bold G18: Ensuring that a contrast ratio of at least 5:1 exists between text (and images of text) and background behind the text Situation B: text is as least 18 point if not bold and at least 14 point if bold G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text Colour techniques WCAG 2 uses a luminosity formula for determining contrast ratio (rather than the colour and brightness algorithms used in WCAG 1) WCAG 2 also takes into account the size of the text Key Techniques (same for both Success Criteria):

44. Paciello Group: Colour Contrast Analyser (download) http://www.paciellogroup.com/resources/contrast-analyser.html Colors on the Web: Color Contrast Analyzer (online) http://www.colorsontheweb.com/colorcontrast.asp Juicy Studio: Luminosity Contrast Ratio Analyser (online) http://juicystudio.com/services/luminositycontrastratio.php Trace: Index of Color Contrast Samples http://trace.wisc.edu/contrast-ratio-examples/Sample_Text_ColorsOnWhite.htm Test palette Color deficit samples Colour – some useful tools

45. Audio material WCAG 1 contains very little advice about making video and audio material accessible WCAG 2 has Guidelines and Success Criteria that directly address the use of this material, including: “ 1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A)” G60: Playing a sound that turns off automatically within three seconds G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically G171: Playing sounds only on user request Techniques:

46. Primary documents: Web Content Accessibility Guidelines 2.0 (Proposed Recommendation) http://www.w3.org/TR/2008/PR-WCAG20-20081103/ Understanding WCAG 2.0 (3 November) http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Techniques for WCAG 2.0 (3 November) http://www.w3.org/TR/WCAG20-TECHS/ WCAG 2.0 Quick Reference (3 November) http://www.w3.org/WAI/WCAG20/quickref/ Key WCAG 2 documents See Also: Migrating from WCAG 1.0 to WCAG 2.0 http://wipa.org.au/papers/wcag-migration.htm

47. Thank you Roger Hudson Web Usability www.usability.com.au [email_address]