Ideas 5 - Roger Hudson - Understanding WCAG 2.0

1. Accessibility 2.0 Seminar April 2009

2. <ul><li>Moving from WCAG 1.0 to WCAG 2.0 </li></ul><ul><li>Preparing accessible PDF with Andrew Downie </li></ul><ul><li>Questions and discussion </li></ul>This evening

3. 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. <ul><li>Can be used by people with physical and cognitive impairments </li></ul><ul><li>Can be used by people in situations where they are unable to use their hands </li></ul><ul><li>Can be used by people who are technically and educationally disadvantaged </li></ul><ul><li>Are more effective for people who live in remote and regional areas </li></ul><ul><li>Are easy for the elderly and novice users to use </li></ul><ul><li>Work with the widest range of browsers and other current internet technologies </li></ul><ul><li>Will migrate to future technologies </li></ul>Accessible sites benefit everyone Accessible Sites:

5. “ 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.

6. Moving to WCAG 2.0 Please Note: The Australian Human Rights Commission still uses WCAG 1 as the benchmark for website accessibility. I expect that we will move to WCAG 2 in the near future.

7. Time to move forward <ul><li>Development of WCAG 2 has been a long and at times contentious process </li></ul><ul><li>Extensive consultation with the web industry and accessibility advocates </li></ul><ul><li>Battles won, battles lost and compromises made </li></ul>This presentation will not be a look back to the past. My aim is to provide an overview of the changes between WCAG 1.0 and WCAG 2.0

8. WCAG 2 Overview Checking out the features …

9. WCAG 1 – Recap <ul><li>14 Guidelines, containing </li></ul><ul><li>65 Checkpoints </li></ul>WCAG 1.0 has: Priority 1 : Designers must satisfy this checkpoint for all people to access the content. (16 checkpoints) Priority 2 : Designers should satisfy this checkpoint to remove significant barriers. (30 checkpoints) Priority 3 : Designers may address this checkpoint to further improve accessibility. (19 checkpoints) Each checkpoint has a Priority Level.

10. POUR - four principles of accessibility <ul><li>Content must be P erceivable </li></ul><ul><li>Interface components in the content must be O perable </li></ul><ul><li>Content and controls must be U nderstandable </li></ul><ul><li>Content should be R obust enough to work with current and future user agents (including assistive technologies) </li></ul>WCAG 2 Structure – POUR Principles Web Content Accessibility Guidelines 2.0 W3C Recommendation (11 December 2008) http://www.w3.org/TR/WCAG20/

11. 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

12. 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. WCAG 1.0 Checkpoint: 3.5 User Header elements to convey document structure and use them according to specifications. In HTML, use H2 to indicate a subsection of H1”

13. 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

14. WCAG 2 Structure – Success Criteria Techniques Techniques Sufficient Techniques: Ways of meeting the Success Criteria. Advisory Techniques: Goes beyond what is required to help authors better address the Guideline. <ul><li>Success Criteria </li></ul><ul><li>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 </li></ul><ul><li>16 Sufficient Techniques for very different HTML issues, for example: </li></ul><ul><li>Using caption elements to associate data table captions with data tables </li></ul><ul><li>Using label elements to associate text labels with form controls </li></ul><ul><li>Using ol, ul and dl for lists </li></ul><ul><li>Using h1-h6 to identify headings </li></ul>

15. “ 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.

16. 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]”

17. 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]”

18. Web content technology must meet two requirements to qualify as an accessibility-supported Web content technology : <ul><li>The way that the Web content technology is used must be supported by users' assistive technology. </li></ul><ul><li>AND … </li></ul>Accessibility Supported # 1 Source: Understanding Accessibility Support www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-support-head

19. <ul><li>The technology is supported natively in widely-distributed user agents that are also accessibility supported; </li></ul><ul><li>OR </li></ul><ul><li>The technology is supported in a widely-distributed plug-in that is also accessibility supported; </li></ul><ul><li>OR </li></ul><ul><li>The content is available in a closed environment where the required technology is also accessibility supported; </li></ul><ul><li>OR </li></ul><ul><li>The user agent that supports the technology is accessibility supported and equally available to a person with a disability as it is for someone without a disability. </li></ul>AND <ul><li>The Web content technology must have accessibility-supported user agents available to users. This means that at least one of the following statements is true: </li></ul>Accessibility Supported # 2

20. What technologies are Accessibility Supported? <ul><li>W3C does not specify how much support by assistive technologies (e.g. Screen Readers) is necessary for the particular use of a Web technology (e.g. FLASH) to be considered “accessibility supported”. </li></ul><ul><li>The term "accessibility supported" does not imply all uses of the web content technology are accessible. </li></ul><ul><li>Only “ accessibility supported ways of using technologies ” can be relied upon to satisfy the WCAG Success Criteria. </li></ul><ul><li>The W3C expects that lists will emerge of technologies which are recognised to be accessibility supported. </li></ul>

21. Levels of Conformance WCAG 2.0 has no direct equivalent to the WCAG 1.0 Priority Levels. 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: Understanding Conformance http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

22. Conformance requirements <ul><li>Conformance level – one of the Success Criteria conformance levels is fully met. </li></ul><ul><li>Full pages – conformance is for full web pages only and can’t exclude parts of the page. </li></ul><ul><li>Complete processes – when a web page is part of a continuous process, all pages in the process must conform at the specified level. </li></ul><ul><li>Accessibility supported ways of using of technologies – only accessibility supported uses are relied on to meet the Success Criteria. </li></ul><ul><li>Non-interference - technologies that are not accessibility supported, or used in a non-conforming way, do not block the ability of users to access the rest of the page. </li></ul>Five requirements must be met for content to be classified as 'conforming' to WCAG 2.0.

23. Let’s look under the bonnet

24. “ 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”

25. 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.

26. 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 .

27. <ul><li>“ SCR14: Using scripts to make nonessential alerts optional” </li></ul><ul><li>" SCR19: Using an onchange event on a select element without causing a change of context” </li></ul><ul><li>" SCR21 : Using functions of the Document Object Model (DOM) to add content to a page” </li></ul>JavaScript can be accessible Not all JavaScript is accessible, it depends what you do with it. The specific use JavaScript must be deemed “accessibility supported” Only Accessibility supported uses of technologies can be relied on to meet WCAG 2 Success Criteria. ( Conformance Requirement 4 ) WCAG 2 techniques include these Sufficient Techniques (scripting) that have been tested with screen readers: Source: http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

28. 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) Useful JavaScript

29. 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).

30. “ 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 ".

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

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

33. New form requirements Error Detection and Messages WCAG 2 directly addresses the prevention, detection and correction of errors in forms. "Guideline 3.3 Input Assistance: Help users avoid and correct mistakes" 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 enough time to read and use content” Guideline contains five Success Criteria (two at Level A).

34. “ 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:

35. Data tables: Re-cap ‘id’ and ‘headers’ <th colspan="2" id="domestic"> Domestic </th> <th id="apples-dom"> Apples </th> <th id="sydney" colspan="5"> Sydney </th> <th headers="sydney" id="wholesale-sydney"> Wholesale </th> <td headers="domestic apples-dom sydney wholesale-sydney"> $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

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: 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

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

38. 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

39. 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

40. WCAG 1.0 Checkpoint 2.2 “ Ensure that foreground and background colour combinations provide sufficient contrast for viewing by someone having colour deficits. [Priority 2 for images Priority 3 for text]” <ul><li>1.4.3 Contrast (Minimum): Visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) </li></ul><ul><li>Large print: Contrast ratio of at least 3:1 </li></ul><ul><li>Incidental: Text or images of text that are decorative or an incidental part of a picture have no contrast requirement </li></ul><ul><li>Logotypes: Text in a logo or brand has no contrast requirement </li></ul><ul><li>1.4.6 Contrast (Enhanced): Visual presentation of text and images of text has a contrast ratio of at least 7:1, except for following: (Level AAA) </li></ul><ul><li>(much like above) </li></ul>In WCAG 2 replaced with: Colour contrast

41. 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 4.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:

42. Useful test palette from TRACE Source: http://trace.wisc.edu/contrast-ratio-examples/ColorSets_6x6x6_OnWhite.htm

43. 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 Colour – some useful tools

44. 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:

45. Primary documents: Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/WCAG20/ Understanding WCAG 2.0 http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Techniques for WCAG 2.0 http://www.w3.org/TR/WCAG20-TECHS/ Key WCAG 2 documents See Also: Migrating from WCAG 1.0 to WCAG 2.0 http://wipa.org.au/papers/wcag-migration.htm WCAG 2.0 Compliance Checklist (editable worksheet) http://www.usability.com.au/resources/wcag2checklist.cfm

46. Thank you Roger Hudson Web Usability Web: www.usability.com.au Blog: www.dingoaccess.com Email: [email_address]

Ideas 5 - Roger Hudson - Understanding WCAG 2.0

awia

Ideas 5 - Roger Hudson - Understanding WCAG 2.0