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 LicenseCreative Commons Attribution-ShareAlike 3.0 Unported License Rev 2010-09.03.0947