Components of Web Accessibility

About WCAG 2.0

• W3C standard since 11 December 2008
• Developed through the W3C Process
• Broad international participation:
  • Experts
  • Researchers
  • Developers
  • Industry
  • End-users

Goals for WCAG 2.0

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

WCAG 2.0 - Documents

WCAG 2.0 - 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.0 - Principles

POUR accessibility with WCAG 2.0:

• Perceivable
• Operable
• Understandable
• Robust

WCAG 2.0 - Guidelines

Examples of WCAG 2.0 Guidelines:

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

WCAG 2.0 - Success Criteria

Examples of WCAG 2.0 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.0 - Documents

WCAG 2.0 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, ...)

WCAG 2.0 Techniques - Situations

Situations for Success Criteria 1.1.1 (text alternatives):

• A: If a short description can serve the same purpose
• B: If a short description can not serve the same purpose
• C: If non-text content is a control or accepts user input
• D: If non-text content is time-based media
• E: If non-text content is a CAPTCHA
• F: If non-text content should be ignored by assistive tech

WCAG 2.0 Techniques - Contents

Example Technique - H36 - Using alt attributes on images used as submit buttons:

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

WCAG 2.0 Techniques - Tests

Example test procedure for 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.0 - Hierarchy

• Principles
  • Guidelines
    • Success Criteria
      • Techniques (separate Document)

WCAG 2.0 - Documents

How To Meet WCAG 2.0

WCAG 2.0 Quick Reference

So, what really changed?

• Everything - new structure, much to read, ...
• Nothing - user requirements have not changed

WCAG 1.0 Comparison

Comparison by priority levels:

• Level A - 6 new requirements
• Level AA - 3 new requirements
• Level AAA - 11 new requirements
• ...approx 24 requirements removed

Little or no changes needed at Level AA conformance.

WCAG 2.0 is Precise

Example from WCAG 1.0:

• Checkpoint 2.2: Ensure that foreground and background color combinations provide sufficient contrast
• Success Criteria 1.4.3 Contrast: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

WCAG 2.0 is Modern

Better addresses areas such as:

• Mulitmedia contents
• Web applications
• Natural language
• Complete processes

WCAG 2.0 is Comprehensive

Documentation for WCAG 2.0 provides support:

• The Web is more complex and requires more knowledge
• The testing procedures need to be executed anyway
• The explanations are helpful for unaware developers
• The applicable checklist is dynamically generated

Usability with WCAG 2.0

WCAG 2.0 fits into usability design processes:

• Many possibilities to achieve the purpose
• Developer must decide appropriate methods
• Difference between sufficient and optimal
• User-testing complements implementations

Web Applications

Problem: Missing Semantics

What is the semantic meaning of the following code?

<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:

Solution: WAI-ARIA

Accessible Rich Internet Applications - WAI-ARIA provides the semantics:

<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>

WAI-ARIA Adoption

Several WAI-ARIA implementations exist already:

• Browsers: Firefox, Internet Explorer, Opera, Safari
• Assistive Technologies: JAWS, Orca, WindowEyes, ZoomText
• Libraries: Dojo Toolkit, Google Gears, jQuery, YUI
• Examples: AOL, Google, IBM, Yahoo!

Transitioning to WCAG 2.0

Some of the WAI resources to support transitioning:

• How WCAG 2.0 Differs from WCAG 1.0
• Comparison of WCAG 1.0 Checkpoints to WCAG 2.0
• How to Update Your Web Site from WCAG 1.0 to WCAG 2.0

Authorized Translations

Several authorized WCAG 2.0 Translations in progress:

• In progress: Danish, French, Italian, Spanish
• Announced: Catalan, Chinese, German, Japanese, Korean
• In discussion: Arabic, Dutch, Greek, Hindi
• Unofficial: Hungarian, Portuguese, Portuguese/Brazil

News: Swedish translation now in discussion!

Thank You

Shadi Abou-Zahra, W3C/WAI
Activity Lead, WAI International Program Office
http://www.w3.org/People/shadi/