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
Two approaches to client-side development:
Progressive enhancement:
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
Example table structure:

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
How people with disabilities use the web
Examples used in this presentation

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
(651)
This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License
Rev