1 / 46

Enhance Accessibility: WCAG 2.0 Training for Effective Web Development

This comprehensive course on WCAG 2.0 provides analysts and web developers with essential knowledge on web accessibility standards. Learn why WCAG is crucial, discover its key principles (POUR: Perceivable, Operable, Understandable, Robust), and explore integration strategies for your website. Gain insights into creating distinguishable, navigable, and predictable content while ensuring compliance with legal standards. Understand how to design for various devices and audiences, implement keyboard accessibility, and enhance user experience through effective practices.

vivian
Télécharger la présentation

Enhance Accessibility: WCAG 2.0 Training for Effective Web Development

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 perspectives for analysts

  2. Course overview • Understanding why WCAG is important • What is WCAG 2.0? Ensure your website is: • Perceivable • Operable • Understandable • Robust • How to integrate WCAG 2.0 guidelines • Recap and top ten considerations

  3. Beyond the legality • WCAG sets a standard for great development practices that benefit us all in various ways • Flexible and extensible mark-up/code • Mobile devices • Adaptable content presentation • Reach a broader audience • Tied into wider network of world-wide standards

  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. Your website is perceivable • Non-text elements that convey information • Text alternatives for images of text or information • Long description pages/content for some images • Consider alternatives to using images/non-text • Documents with images are in the same boat

  10. Your website is perceivable • Time-based media • Video: provide captioning and descriptive text • Audio: provide text transcript • Flash: provide combination of the two (case by case)

  11. Your website is perceivable • Adaptable content • Proper use of document structure • Meaningful and accurate sequence of content • Sensory issues (size, color, contrast, etc.) • Separation of content and presentation • Layout controlled by CSS

  12. Your website is perceivable Layers of separation for web content • Content can be re-used • Formatting unique to end use • Easier to migrate and re-tool

  13. Your website is perceivable • Content is distinguishable • Color and contrast of your text and images • Controls for audio and video • Text can be resized and made color-neutral • Audio: background and foreground contrast • Put the user in control

  14. Your website is operable • Keyboard accessible • No mouse-only functionality • No keyboard traps (stuck position requiring mouse) • Page short-cuts and access keys

  15. Your website is operable • Time-sensitive data entry • Adjustable time for entry • Pausing, stopping or hiding content • Remembering user state and input

  16. Your website is operable • Visual issues • Seizures – minimal page flashing • Alternatives to color for conveying function/meaning

  17. Your website is operable • Navigable content • Bypass navigational and header elements • Descriptive page titles and document headings • Menu and focus order is intuitive and consistent • Purposeful and intuitive links • Multiple ways of reaching content • Context and location is made apparent

  18. Your website is understandable • Content is readable • Language barriers • Unusual words, acronyms and terms explained • Reading level • Contrast and sizing issues

  19. Your website is understandable • Content is predictable • Initial focus on page load (don’t confuse the user) • Notification of changes in page behavior on user input • Consistent navigation and document structure links • Instructions and cues for complicated tasks and forms

  20. Your website is understandable • Input assistance • Field labels, instructions and cues • Error identification with instructions and tips • Proactive error prevention steps • Context-sensitive helps

  21. Your website is reliable (robust) • Beyond compatible: adaptable and flexible • Avoid browser-specific requirements (e.g. IE only) • Use markup that facilitates accessibility • Design and build towards extensibility • Always validate your content and mark-up

  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