WCAG 2.0 training & orientationFundamentals and perspectives for analysts

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

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

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

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

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)

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

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

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

Your website is operable

Keyboard accessible

• No mouse-only functionality

• No keyboard traps (stuck position requiring mouse)

• Page short-cuts and access keys

Your website is operable

Time-sensitive data entry

• Adjustable time for entry

• Pausing, stopping or hiding content

• Remembering user state and input

Your website is operable

Visual issues

• Seizures – minimal page flashing

• Alternatives to color for conveying function/meaning

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

Your website is understandable

Content is readable

• Language barriers

• Unusual words, acronyms and terms explained

• Reading level

• Contrast and sizing issues

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

Your website is understandable

Input assistance

• Field labels, instructions and cues

• Error identification with instructions and tips

• Proactive error prevention steps

• Context-sensitive helps

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

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 resourcesResources

WCAG 2.0http://www.w3.org/TR/WCAG20/

WebAIM accessibility testinghttp://wave.webaim.org/

How people with disabilities use the webhttp://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentationhttp://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-developerOffice of Enterprise Technologymichael.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 LicenseRev 2010-09.03.0947