The Big Picture

About WCAG 2.0

Web Content Accessibility Guidelines (WCAG) 2.0
Internationally recognized standard for web accessibility, developed by:

• Experts
• Researchers
• Developers
• Industry
• Policy makers
• End-users

Design of WCAG 2

• Technology-independent
• Objectively testable
• Flexible for situations
• Support for developers

WCAG 2 Structure

• Principles (4)
  • Guidelines (12)
    • Success Criteria - Level A (25)
    • Success Criteria - Level AA (13)
    • Success Criteria - Level AAA (23)
• Conformance

Note: WCAG 1.0 had 14 Guidelines and 65 Checkpoints

WCAG 2 Principles

Functional principles of WCAG 2.0:

• P - Perceivable
• O - Operable
• U - Understandable
• R - Robust

To help memorize: P-O-U-R like pouring water.

Example Guidelines

Examples of WCAG 2 Guidelines:

• Guidelines 2.1 Keyboard Accessible: Make all functionality available from a keyboard
• Guideline 3.3 Input Assistance: Help users avoid and correct mistakes

Example Success Criteria

Examples of WCAG 2 Success Criteria:

• 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose - Level A
• 2.2.4 Interruptions: Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency - Level AAA

WCAG 2 Techniques

Techniques are documented separately. There are three types of Techniques:

• Sufficient Techniques - minimum requirements
• Advisory Techniques - additional improvements
• Common Failures - often encountered mistakes

Techniques are Technology-specific (e.g. HTML, CSS, AJAX, ...)

Example Technique

Contents of WCAG 2 Technique "H36 - Using alt attributes on images used as submit buttons":

• Applicability
• Description
• Examples
• Resources
• Related Techniques
• Tests

Example Test Procedure

Test procedure from WCAG 2 Technique H36:

Procedure

1. For all input elements that have a type attribute value of "image", check for the presence of an alt attribute.
2. Check that the alt attribute indicates the button's function.

Expected Results

#1 und #2 are true

WCAG 2 Hierarchy

• Principles (POUR)
  • Guidelines (12)
    • Success Criteria (61)
      • Techniques (documented separately)

How To Meet WCAG 2.0

http://www.w3.org/WAI/WCAG20/quickref/:

WCAG 2.0 Quick Reference

Web Accessibility Tutorials

WCAG 2.0 Adoption

WCAG 2.0 is being increasingly adopted by policies internationally:

• Drafts for updated US Section 508 (ANPRM)
• Drafts for EC Mandate 376 (EN 301 549)
• Proposed EC Directive on Web Accessibility
• Austria, Germany, Ireland, Italy, Spain, ...
• Australia, Canada, Japan, New Zealand, ...

WCAG2ICT

Applying WCAG 2.0 to Non-Web ICTs (WCAG2ICT):

• Describes how WCAG can be applied to non-web ICT
• Does not make statements about what should be applied
• Does not necessarily address all user requirements
• Supports uniform accessibility requirements across ICTs

Note: Also a non-normative supporting document.

WCAG2ISO

WCAG 2.0 is now also ISO/IEC 40500:

• Referenceable international ISO/IEC standard
• Unmodified version of WCAG 2.0 with cover page
• Continues to be freely available from W3C/WAI
• WCAG 2.0 Translations available from W3C/WAI

The Big Picture

HTML5 Accessibility

In coordination with HTML Accessibility Task Force:

• HTML5: Techniques for providing useful text alternatives
• HTML to Platform Accessibility APIs Implementation Guide
• HTML5 Accessibility Change Proposals
• Media Accessibility User Requirements

WAI-ARIA

Accessible Rich Internet Applications (WAI-ARIA):

<div>
  <div>Veggies
    <div>
      <div>Green
        <div>
          <div>Asparagus</div>
          <div>Kale</div>
          <div>Leafy
            <div>
              <div>Lettuce</div>
              <div>Kale</div>
              <div>Spinach</div>
              <div>Chard</div>
            </div>
          </div>
          <div>Green beans</div>
        </div>
      </div>
      <div>Legumes</div>
      <div>Yellow
        <div>
          <div>Bell peppers</div>
          <div>Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

A Tree-View

The previous code visually represents a Tree-View:

WAI-ARIA Semantics

WAI-ARIA provides semantics for roles and attributes:

<div role="wairole:tree">
  <div role="wairole:treeitem">Veggies
    <div role="wairole:group">
      <div role="wairole:treeitem">Green
        <div role="wairole:group">
          <div role="wairole:treeitem">Asparagus</div>
          <div role="wairole:treeitem">Kale</div>
          <div role="wairole:treeitem">Leafy
            <div role="wairole:group">
              <div role="wairole:treeitem">Lettuce</div>
              <div role="wairole:treeitem">Kale</div>
              <div role="wairole:treeitem">Spinach</div>
              <div role="wairole:treeitem">Chard</div>
            </div>
          </div>
          <div role="wairole:treeitem">Green beans</div>
        </div>
      </div>
      <div role="wairole:treeitem">Legumes</div>
      <div role="wairole:treeitem">Yellow
        <div role="wairole:group">
          <div role="wairole:treeitem">Bell peppers</div>
          <div role="wairole:treeitem">Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

IndieUI

Independent User Interfaces (IndieUI):

Educational Resources

W3C/WAI also develops educational resources such as:

• How People with Disabilities Use the Web
• Web Accessibility Tutorials
• Before and After Demonstration (BAD)
• Strategic Planning for Web Accessibility