1 / 46

WCAG 2.0 training & orientation

WCAG 2.0 training & orientation. Fundamentals and how-to’s for web & content developers. 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

melvinh
Download Presentation

WCAG 2.0 training & orientation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related