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
• Working WCAG into your development cycle
• Top ten issue recap
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
WCAG principle: POUR
Developing with the POUR model
• Perceivable
• Operable
• Understandable
• Robust
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)
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
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
WCAG principle: POUR
Developing with the POUR model: robust
• Maximize compatibility with current and future user agents
• Support for assistive technologies
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
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
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)
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)
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
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
Navigation is intuitive
Your navigation is understandable
• Predictable behavior
• Self-descriptive menu items
• Sufficient contrast of text against background
Working with images & flash
Visual issues
• Seizures – minimal page flashing
• Alternatives to color for conveying function
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
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
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
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
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
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
WCAG 2.0 integration in your process
Waterfall model
• Requirements
• Design
• Implementation
• Integration
• Testing and debugging
• Installation and maintenance
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
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
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
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
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
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
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
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
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
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
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
WCAG 2.0 top ten considerations
2. Document structure
• Meaningful page titles
• Heading tags
• Tags that convey meaning (paragraph, lists, etc.)
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
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
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
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)
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
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
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
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
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/
WCAG 2.0 resources
Tools and testing
Must-have Firefox extensions:
• WAVE toolbar
• Web Developer Toolbar
• WCAG Contrast Checker
• Fangs Screen Reader Emulator
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