Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WCAG 2.0, Simplified


Published on

Basic info to begin understanding the new WCAG 2.0 Guidelines from the W3C WAI committee.

Published in: Technology, Design

WCAG 2.0, Simplified

  1. 1. WCAG, Simplified What is it and what do I have to do?
  2. 2. Topics <ul><li>What is WCAG? Is it a law? </li></ul><ul><li>Changes from WCAG 1 to version 2 </li></ul><ul><li>Examples </li></ul><ul><li>Accessibility vs. Usability </li></ul><ul><li>Easy First Steps </li></ul><ul><li>WCAG 2.0 Basics </li></ul>
  3. 3. What is WCAG? Guidelines vs. Laws
  4. 4. Country Laws <ul><li>Australia </li></ul><ul><li>Canada </li></ul><ul><li>Denmark </li></ul><ul><li>European Union </li></ul><ul><li>Finland </li></ul><ul><li>France </li></ul><ul><li>Germany </li></ul><ul><li>Hong Kong </li></ul><ul><li>India </li></ul><ul><li>Ireland </li></ul><ul><li>Israel </li></ul><ul><li>Italy </li></ul><ul><li>Japan </li></ul><ul><li>New Zealand </li></ul><ul><li>Portugal </li></ul><ul><li>Spain </li></ul><ul><li>Switzerland </li></ul><ul><li>United Kingdom </li></ul><ul><li>United States of America </li></ul>
  5. 5. USA <ul><li>Section 255 of the Telecommunications Act </li></ul><ul><li>Rehabilitation Act, Section 504 </li></ul><ul><li>Rehabilitation Act Amendments of 1998, Section 508 </li></ul><ul><li>Americans with Disabilities Act (ADA) </li></ul><ul><li>Individuals with Disabilities Education Act (IDEA) </li></ul><ul><li>New Freedom Initiative </li></ul><ul><li>+ State Laws </li></ul><ul><li> </li></ul>
  6. 6. Example: Kentucky <ul><li>Additional Kentucky state laws regarding accessibility of digital content </li></ul><ul><ul><li>AIT – Accessible Information Technology Statute stating state information, technology, equipment and software must be accessible to employees and the general public. </li></ul></ul><ul><ul><li>Textbook Act – publishers must provide an accessible digital version within 15 days of request. </li></ul></ul>
  7. 7. What is WCAG? <ul><li>Web Content Accessibility Guidelines </li></ul><ul><li>Other WAI Guidelines </li></ul><ul><ul><li>ATAG - Authoring Tool Accessibility Guidelines </li></ul></ul><ul><ul><li>EARL - Evaluation and Report Language </li></ul></ul><ul><ul><li>UAAG - User Agent Accessibility Guidelines </li></ul></ul><ul><ul><li>WAI ARIA - Accessible Rich Internet Applications Suite </li></ul></ul>
  8. 8. <ul><li>The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C's mission is: To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. </li></ul><ul><li>WAI, in coordination with organizations around the world, pursues accessibility of the Web through four primary areas of work: technology, tools, education and outreach, and research and development. </li></ul>Who develops WCAG?
  9. 9. <ul><li>The W3C Web Accessibility Initiative (WAI) develops... </li></ul><ul><ul><ul><li>guidelines widely regarded as the international standard for Web accessibility </li></ul></ul></ul><ul><ul><ul><li>support materials to help understand and implement Web accessibility </li></ul></ul></ul><ul><ul><ul><li>resources, through international collaboration </li></ul></ul></ul><ul><ul><li>WAI welcomes... </li></ul></ul><ul><ul><ul><li>participation from around the world (price prohibitive) </li></ul></ul></ul><ul><ul><ul><li>volunteers to review, implement, and promote guidelines </li></ul></ul></ul><ul><ul><ul><li>dedicated participants in working groups </li></ul></ul></ul>Who develops WCAG?
  10. 10. The WCAG guidelines are widely regarded as the voluntary international standard for web accessibility
  11. 11. Technology Changes <ul><li>In 1999… </li></ul><ul><li>HTML, PDF, Javascript </li></ul><ul><li>Static, information pages </li></ul><ul><li>Desktop, laptop </li></ul><ul><li>IE, Netscape </li></ul><ul><li>In 2009… </li></ul><ul><li>XHTML, CSS, Flash, PDF, Javascript, AJAX </li></ul><ul><li>Dynamic, interactive, social networking </li></ul><ul><li>+ phones, pdas, gps, car, tv, fridge… </li></ul><ul><li>+ Opera, Safari, Firefox… </li></ul>
  12. 12. Changes in WCAG 2.0 Adding testable criteria, principles, and understanding
  13. 13. What WCAG 2 gives you <ul><li>International standard, developed cooperatively </li></ul><ul><li>Applies to more advanced Web technologies </li></ul><ul><ul><li>current, future, non-W3C </li></ul></ul><ul><li>Clearer criteria, more precisely testable </li></ul><ul><li>Adaptable, flexible for different situations, and developing technologies and techniques </li></ul><ul><li>Extensive supporting materials, practical implementation guidance </li></ul>
  14. 14. Technology neutral <ul><li>WCAG 1 – Checkpoint 3.4 </li></ul><ul><ul><li>Use relative rather than absolute units in markup language attribute values and style sheet property values. </li></ul></ul><ul><li>WCAG 2 – Success Criterion 1.4.4 </li></ul><ul><ul><li>Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. </li></ul></ul>
  15. 15. WCAG 1.0 – WCAG 2.0 WCAG 1.0 WCAG 2.0 Principles: P-O-U-R Guidelines Guidelines <ul><ul><li>Checkpoints Priority 1, 2, 3 </li></ul></ul><ul><ul><li>Success Criteria Level A, AA, AAA </li></ul></ul>Support Support Techniques Techniques Understanding
  16. 16. Flexibility for Audience
  17. 17. Scripting allowed <ul><li>Back in 1999, screen readers and other assistive technology did not support scripting. </li></ul><ul><li>Scripted websites were inaccessible under Perceivable and Operable Principles. </li></ul><ul><li>Now major browsers and assistive technologies support scripting and it can be used to enhance accessibility if the proper techniques are used. </li></ul>
  18. 18. Examples CAPTCHAs, Animation, etc.
  19. 19. More design flexibility <ul><li>WCAG 1.0 </li></ul><ul><ul><li>7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. </li></ul></ul><ul><li>WCAG 2.0 allows more movement within defined parameters (for instance) </li></ul><ul><ul><li>Three Flashes or Below Threshold: 2.3.1 Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A) </li></ul></ul>
  20. 20. Example - CAPTCHA <ul><li>CAPTCHA notes </li></ul><ul><ul><li>Providing more than two modalities of CAPTCHAs </li></ul></ul><ul><ul><li>Providing access to a human customer service representative who can bypass CAPTCHA </li></ul></ul><ul><ul><li>Not requiring CAPTCHAs for authorized users </li></ul></ul>
  21. 21. Example: Contrast <ul><li>WCAG 1.0 Checkpoint </li></ul><ul><ul><li>2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. </li></ul></ul>
  22. 22. <ul><li>WCAG 2.0 Success Criteria </li></ul><ul><ul><li>1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 5:1 , except for the following: </li></ul></ul><ul><ul><ul><li>Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1 ; </li></ul></ul></ul><ul><ul><ul><li>Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. </li></ul></ul></ul><ul><ul><ul><li>Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. (from the Dec 2008 Draft) </li></ul></ul></ul>Example: Contrast
  23. 23. Example: Navigation <ul><li>WCAG 1 - Provide clear and consistent navigation mechanisms -- orientation information, navigation bars, a site map, etc. -- to increase the likelihood that a person will find what they are looking for at a site. </li></ul><ul><li>WCAG 2 - Provide ways to help users navigate, find content and determine where they are. </li></ul><ul><ul><li>2.4.1 Bypass Blocks </li></ul></ul><ul><ul><li>2.4.2 Page Titled </li></ul></ul><ul><ul><li>2.4.3 Focus Order </li></ul></ul><ul><ul><li>2.4.4 Link Purpose </li></ul></ul>
  24. 24. Exception Example <ul><li>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. </li></ul><ul><ul><li>Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. </li></ul></ul><ul><ul><ul><li>Controls, Input (function rather than description) </li></ul></ul></ul><ul><ul><ul><li>Time-Based Media (streams of live events) </li></ul></ul></ul><ul><ul><ul><li>Test (art history test) </li></ul></ul></ul><ul><ul><ul><li>Sensory (no alternative text exists, however, it can be described) </li></ul></ul></ul><ul><ul><ul><li>CAPTCHA (security) </li></ul></ul></ul><ul><ul><ul><li>Decoration, Formatting, Invisible (not content) </li></ul></ul></ul>
  25. 25. CAPTCHA Notes <ul><li>If you must use CAPTCHAs </li></ul><ul><ul><li>Provide more than two modalities of CAPTCHAs </li></ul></ul><ul><ul><li>Provide access to a human customer service representative who can bypass CAPTCHA </li></ul></ul><ul><ul><li>Do not require CAPTCHAs for authorized users </li></ul></ul>
  26. 26. Sufficient Technique Example <ul><li>WCAG 2 – Success Criterion 1.4.4 [Resize text] </li></ul><ul><li>Sufficient Technique example </li></ul><ul><li>Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques: </li></ul><ul><ul><li>Techniques for relative measurements </li></ul></ul><ul><ul><ul><li>C12: Using percent for font sizes (CSS) </li></ul></ul></ul><ul><ul><ul><li>C13: Using named font sizes (CSS) </li></ul></ul></ul><ul><ul><ul><li>C14: Using em units for font sizes (CSS) </li></ul></ul></ul><ul><ul><li>Techniques for text container resizing </li></ul></ul><ul><ul><ul><li>Calculating size and position in a way that scales with text size (Scripting) </li></ul></ul></ul><ul><ul><ul><li>G146: Using liquid layout </li></ul></ul></ul>
  27. 27. Accessibility vs. Usability Your website can be accessible yet unusable
  28. 28. Accessibility ≠ Usability <ul><li>A website can comply with standards. </li></ul><ul><li>A website can pass all the automated accessibility checks. </li></ul><ul><li>A website can appear to be accessible. </li></ul><ul><li>HOWEVER </li></ul><ul><li>An accessible website is not necessarily usable. </li></ul><ul><li>Web pages can be verified accessible by focus groups, and still be inaccessible to a third party. </li></ul><ul><li>Individual users may have cognitive, technical, or other barriers. </li></ul>
  29. 29. Assume failure by someone <ul><li>Offer content in alternative formats </li></ul><ul><li>Provide phone, email, and other contact information </li></ul>
  30. 30. Closure… <ul><li>WCAG 2.0 </li></ul><ul><li>More generic </li></ul><ul><li>More testable </li></ul><ul><li>Doesn’t claim to meet everyone’s need </li></ul><ul><li>May need to be supplemented with other guidelines/standards/advisory techniques, and laws </li></ul><ul><li>User testing is still important </li></ul><ul><li>Understand your users, the technologies, and where these guidelines fit into the toolbox. </li></ul>
  31. 31. Easy First Steps You have already begun!
  32. 32. Fix the easy stuff first <ul><li>Alt text </li></ul><ul><li>Alternative formats </li></ul><ul><li>Correctly labeled links </li></ul><ul><li>Best practices for web development (Usability) </li></ul><ul><ul><li>Simplify pages (language, design, navigation) </li></ul></ul><ul><ul><li>Resizable, clear font face </li></ul></ul><ul><ul><li>Reduce links, and link throughs (three click rule) </li></ul></ul><ul><ul><li>Consistent navigation </li></ul></ul><ul><ul><li>Contact info </li></ul></ul><ul><ul><li>Quick loading pages </li></ul></ul><ul><ul><li>Verify code, hyperlinks, spelling, CSS </li></ul></ul>
  33. 33. Other Commons Sense Ideas <ul><li>Use templates </li></ul><ul><li>Policy to respond quickly to complaints </li></ul><ul><li>Give contact info for complaints </li></ul><ul><li>Disability statements </li></ul><ul><li>Use checklists or automated checkers </li></ul>
  34. 34. WGAC 2.0 Basics Digging in to the Guidelines
  35. 35. WCAG 2.0 Quick Ref
  36. 36. Guidance Hypertext <ul><li>Principles - POUR </li></ul><ul><li>Guidelines - Under the POUR principles are twelve basic goals to make content more accessible. </li></ul><ul><li>Success Criteria - For each Guideline, testable success criteria are provided. Conformance is defined by A (lowest), AA, and AAA (highest). </li></ul><ul><li>Sufficient and Advisory Techniques - For each of the Guidelines and Success Criteria, documentation includes techniques and explanations on why the guideline is necessary. </li></ul>
  37. 37. Hypertext Document
  38. 38. POUR Principles <ul><li>Perceivable </li></ul><ul><li>Operable </li></ul><ul><li>Understandable </li></ul><ul><li>Robust </li></ul>
  39. 39. POUR Principles <ul><li>Perceivable </li></ul><ul><ul><li>Provide text alternatives for any non-text content </li></ul></ul><ul><ul><li>Provide alternatives for time-based media </li></ul></ul><ul><ul><li>Separate content from style </li></ul></ul><ul><ul><li>Make it easier for users to see and hear content </li></ul></ul>
  40. 40. <ul><li>Operable </li></ul><ul><ul><li>Make all functionality available from a keyboard </li></ul></ul><ul><ul><li>Provide users enough time to read and use content </li></ul></ul><ul><ul><li>Do not design content known to cause seizures </li></ul></ul><ul><ul><li>Provide ways to help users navigate, find content and determine where they are </li></ul></ul>POUR Principles
  41. 41. <ul><li>Understandable </li></ul><ul><ul><li>Simplify text content </li></ul></ul><ul><ul><li>Web pages operate in predictable ways </li></ul></ul><ul><ul><li>Help users avoid and correct mistakes </li></ul></ul>POUR Principles
  42. 42. <ul><li>Robust </li></ul><ul><ul><li>Maximize compatibility with other products, including assistive technologies. </li></ul></ul>POUR Principles
  43. 43. 12 Guidelines Under POUR <ul><ul><li>Text Alternatives </li></ul></ul><ul><ul><li>Time Based Media </li></ul></ul><ul><ul><li>Adaptable </li></ul></ul><ul><ul><li>Distinguishable </li></ul></ul><ul><ul><li>Keyboard Accessible </li></ul></ul><ul><ul><li>Enough Time </li></ul></ul><ul><ul><li>Seizures </li></ul></ul><ul><ul><li>Navigable </li></ul></ul><ul><ul><li>Readable </li></ul></ul><ul><ul><li>Predictable </li></ul></ul><ul><ul><li>Input Assistance </li></ul></ul><ul><ul><li>Compatible </li></ul></ul>
  44. 44. Success Criteria Sufficient Techniques Advisory Techniques Failures
  45. 45. Source Material <ul><li> </li></ul><ul><li> / </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  46. 46. Parker Owens, Eastern Kentucky University, USA, 2009 Feel free to use this presentation. Please credit.