Web Content Accessibility Guidelines (WCAG) 2.0: Developing with POUR Model

1. WCAG 2.0 training & orientation • Fundamentals and how-to’s for web & content developers

2. Developer’s course overview • Overview and understanding WCAG 2.0 • Page content and behavior • Navigation • Images and Flash • Forms and form behavior • Client-side scripting • Working WCAG into your development cycle • Top ten issue recap

3. Beyond the legality • Understanding the importance of compliance to WCAG 2.0 guidelines • Standards that are accepted world-wide • Improved development practices and end results • It’s in the statutes and will be an enterprise-wide baseline • Everyone benefits from these improvements

4. WCAG principle: POUR • Developing with the POUR model • Perceivable • Operable • Understandable • Robust

5. WCAG principle: POUR • Developing with the POUR model: perceivable • Non-text elements must have a text alternative • Provide alternatives for time-based media • Create content that can be presented in different ways without losing structure or information • Give sufficient distinction between foreground and background (not just text and images of text, but audio and video as well)

6. WCAG principle: POUR • Developing with the POUR model: operable • Make all functionality available from a keyboard • Provide sufficient time to read and use content • Do not design in ways that cause seizures • Provide clear and consistent navigation and context

7. WCAG principle: POUR • Developing with the POUR model: understandable • Make text readable and understandable • Make your website appear and operate predictably • Help your users avoid and correct their mistakes

8. WCAG principle: POUR • Developing with the POUR model: robust • Maximize compatibility with current and future user agents • Support for assistive technologies

9. Page content presentation & behavior • Your content is perceivable • Received via sight, hearing or touch • Context and relationship is conveyed through mark-up • Always use proper document structure • Your content is distinguishable and adaptable • Separation of content from presentation • Do not depend upon visuals to convey information

10. Your website is perceivable Layers of separation for web content • Content is format neutral • Formatting unique to end use • Easier to migrate and re-tool • Benefits of re-use of content /code

11. Page content presentation & behavior • Your website is operable • Interactive, allowing multiple ways of accessing info • Concerns with time limitations (remember state) • Keyboard accessible (no mouse-only restrictions) • Your content, forms and applications are navigable • Help the user recover from errors (prevention is key)

12. Page content presentation & behavior • Your website is understandable • Language barriers (when applicable) are addressed • Meaning enhanced with supplemental information • Predictable page behavior • Relevant helps and assistance with user interaction • Self-descriptive links (“click here” is not helpful)

13. Navigation is intuitive • Your navigation is perceivable • Proper context and structure to your menu system • Consistency on every page • Navigation links are intuitive and self-explanatory

14. Navigation is intuitive • Your navigation is operable • Keyboard accessible • What is your plan for no Javascript? • Skip past redundant sections to content • Considerations for disabled mouse users )

15. Navigation is intuitive • Your navigation is understandable • Predictable behavior • Self-descriptive menu items • Sufficient contrast of text against background

16. Working with images & flash • Visual issues • Seizures – minimal page flashing • Alternatives to color for conveying function

17. Working with images & flash • Essential vs. non-essential images • Does it convey information? • Decorative images presented with CSS • Informative images presented in-line • ALT / title attributes • Links to descriptions for longer text • CSS alternative

18. Working with forms • Perceivable • See, hear, touch – forms accessible to all • Label tags for all input points • Exceptions: buttons (image, submit, reset) & hidden • Accessible CAPTCHA

19. Working with forms • Operable • Keyboard accessible (including on submit) • Correct tab sequence • Provide access keys for laborious and repetitive forms • For process-oriented forms, indicate their current step

20. Working with forms • Understandable • Make your form labels legible • Give clear instructions and cues to prevent mistakes • Don’t rely on color or visual elements to explain form functionality or processes

21. Working with client-side scripting • Considerations for working with Javascript • Javascript is OK, but there are associated risks • Progressive enhancement vs. Graceful degradation • Cue your user on user-driven event changes • Remember not to rely upon visual cues

22. WCAG 2.0 integration in your process • Fail to plan, plan to fail • Iterative testing reduces the burden of full-on site testing • You already test for functionality; add accessibility • It’s the right thing to do… and it’s in the statutes • Acting on WCAG 2.0 improves the quality of your site • Progressive Enhancement vs. Graceful Degradation

23. WCAG 2.0 integration in your process • Waterfall model • Requirements • Design • Implementation • Integration • Testing and debugging • Installation and maintenance

24. WCAG 2.0 integration in your process • Waterfall model: requirements • Require compliance with WCAG 2.0 guidelines • Require well-formed (x)HTML and CSS • OK to require reasonably modern browsers • Not OK to require a specific browser alone

25. WCAG 2.0 integration in your process • Waterfall model: design • Wireframes and document/page structure • Considerations with client/server side processing • How will people navigate through complex pages/forms • Correct document/code structure and CSS formatting • Content can be rendered solely as text • Plan for error handling, helps and other assistance

26. WCAG 2.0 integration in your process • Waterfall model: implementation • Pages and forms built with proper markup and structure • EVERY point of input has a label • Check tab order • Access keys for repetitive activities in long forms • Iterative testing of components and in page assembly

27. WCAG 2.0 integration in your process • Waterfall model: integration, testing & debugging • Redundancy (extra eyes) catches human error • Well-formed HTML/CSS reduces errors and debugging • Building for WCAG means well thought out code

28. WCAG 2.0 integration in your process • Waterfall model: installation and maintenance • No development effort is perfect • Address accessibility or usability issues as alerted • Striving for accessibility is evolutionary

29. WCAG 2.0 integration in your process • Spiral or Agile model • Determine objectives • Identify and resolve the risks • Development and test • Plan your next iteration

30. WCAG 2.0 integration in your process • Spiral or Agile model: determine objectives • Establish WCAG guidelines as a foundation • Consider accessibility factors into this build iteration

31. WCAG 2.0 integration in your process • Spiral or Agile model: identify and resolve risks • Plan for client-side degradation • Plan for navigating long content and complex forms • Conceptualize and construct proper page structure • Review your plan against WCAG high level areas

32. WCAG 2.0 integration in your process • Spiral or Agile model: development and test • Build it right with proper markup and structure • Test for well-formed HTML and CSS • Test for WCAG 2.0 compliance • Involve persons with disabilities into user acceptance

33. WCAG 2.0 integration in your process • Spiral or Agile model: plan the next iteration • Take note of what needs to be addressed and fixed • Bring in third parties to help with trouble issues • Minnesota STAR Program for additional assistance

34. WCAG 2.0 top ten considerations • 1. Forms • Label tags for ALL input points • Correct tab sequence • Access keys for complex, long and laborious forms that are used frequently • Navigable and able to submit with keyboard

35. WCAG 2.0 top ten considerations • 2. Document structure • Meaningful page titles • Heading tags • Tags that convey meaning (paragraph, lists, etc.)

36. WCAG 2.0 top ten considerations • 3. Navigation and links • Consistent navigation (predictable) • Skip to content • Navigating with anchor tags in long bodies of content • Meaningful link text that conveys purpose

37. WCAG 2.0 top ten considerations • 4. Images and non-text elements • ALT tags for informative images (non-decorative) • Link to descriptions for longer text blocks • Decorative images presented with CSS (not in content) • Contrast ratio between background and text

38. WCAG 2.0 top ten considerations • 5. Tables • Do NOT use tables to format your document • Tables are for tabular data • Use THEAD/TFOOT tags to convey data relationship • Rely on CSS and avoid depreciated tags

39. WCAG 2.0 top ten considerations • 6. Mouse and keyboard issues • Test and ensure you can navigate with keyboard only • Do not rely upon mouse clicks • Be cognizant of tedious clicking issues (e.g. menus)

40. WCAG 2.0 top ten considerations • 7. Client-side to server-side handling • It is OK to use Javascript • Build base-level, server-side functionality first • Add your AJAX/Javascript functionality on top • Have a plan to degrade from client- to server-side • Inform user of user input and changes in page behavior

41. WCAG 2.0 top ten considerations • 8. Cues, instructions and error handling • Inform and instruct the user • Provide contextual helps and guide user input • Offer intuitive error messages

42. WCAG 2.0 top ten considerations • 9. Display adaptation • Support multiple browser environments • Text: size, color, contrast, max width, no full justification • Allow user to override formatting

43. WCAG 2.0 top ten considerations • 10. Site and process context • Breadcrumb navigation • If there are multiple steps, indicate their context • Use title and heading tags to convey site context • Save user’s input/state if session times out • Let the user pick up where they left off • Provide a sitemap

44. WCAG 2.0 resources Resources WCAG 2.0 http://www.w3.org/TR/WCAG20/ WebAIM accessibility testing http://wave.webaim.org/ How people with disabilities use the web http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentation http://accessibility.designbymichael.com/examples/

45. WCAG 2.0 resources • Tools and testing • Must-have Firefox extensions: • WAVE toolbar • Web Developer Toolbar • WCAG Contrast Checker • Fangs Screen Reader Emulator

46. WCAG 2.0 Q&A Questions? Michael Tangen |web interface designer-developer Office of Enterprise Technology michael.tangen@state.mn.us (651) 201-1045 This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License Rev 2010-09.03.0947