WCAG 2.0 training

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 (dont 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
• Its the right thing to do and its 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 users 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//acces
sibility.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 QA
Questions? Michael Tangen web interface
designer-developer Office of Enterprise
Technology michael.tangen_at_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