WCAG 2.0 の技術解説

マイケル・クーパー Michael Cooper
Web Accessibility Initiative
cooper@w3.org

葛飾北斎の「津波」

WCAG 2.0 の特徴

  1. 規定と参考で構成されたコンテンツ
  2. 非W3C技術および新技術のサポート
  3. テクニック
  4. テスト

規定と参考で構成されたコンテンツ

“Normative” parts of the guidelines define what must be done to conform to WCAG 2.0.

Most of the materials available are “Advisory”, which explain the Working Group's intent and provide recommended ways to meet the requirements. However, it is not mandatory to follow the advice in advisory materials, if you have another way to meet the specific requirement of the Success Criteria.

Normative sections: Conformance, Principles, Success Criteria, Definitions.

非W3C技術および新技術のサポート

ベースラインにより、WCAGはより多くの技術をサポートできる

Examples

テクニック

テクニック文書で達成基準を満たす方法に関するアドバイスを提供。3つのタイプのテクニックがある:

テクニック

テクニックの種類:

皆さんもワーキンググループにテクニックを提出することが可能。あるいは、非W3C技術における別のテクニックを提出することもできる。

WCAG 2.0 currently provides technology-specific techniques for:

WCAG 2.0 テスト

十分なテクニックに従っているかを検証する

まだ不十分だが、最終的にはガイドライン関連文書の一部となる

WCAG 2.0 テスト: テストの手順

スクリプトのテクニック “キーボードおよび他のデバイス特有の機能を用いること”

手順

  1. インタラクティブな機能を全て見つける
  2. 全てのインタラクティブな機能をキーボードだけで操作可能であることをチェックする

期待される結果

WCAG 2.0 テスト: テストファイル

スクリプトのテクニック “キーボードおよび他のデバイス特有の機能を用いること”

<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> <img id="menu" src="menu_off.gif" alt="メニュー" /> </a>

In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.

WCAG 2.0 における要件の概要

  1. 重要なコンセプト
  2. 原則
    • 原則 1: 知覚可能である(Perceivable)
    • 原則 2: 操作可能である(Operable)
    • 原則 3: 理解可能である(Understandable)
    • 原則 4: 現在および将来の利用に耐えうる(Robust)

重要なコンセプト

Assistive technology (AT): special tools used by people with disabilities to interact with Web content. AT can adapt the page to the user's requirements so the author doesn't have to anticipate every user need. Most AT are not tested by authors, and require the encoding of content to support standard practices and accessibility APIs so it can reliably access it.

Text alternatives: because not all forms of non-text content can be transformed into accessible formats, WCAG 2.0 commonly requires text alternatives. Although some richness is lost, text can be transformed in a variety of ways and therefore provides the widest interoperability with AT.

Programatically determined: AT can reliably determine a state or property of content. Normally this requires that explicit, standard coding practices be followed, but it is also possible to use design practices that support widely-implemented heuristics.

Change of context: a change in the current browser window, or a change in input focus that the user did not initiate.

Keyboard interface: pointing devices (like a mouse) provide continuous, graphical-based input that is difficult for many people with disabilities to use. Keyboards and devices that use keyboard interfaces provide discrete input that most people can use. WCAG 2.0 requires compatability with keyboard interfaces, which allow standard keyboards as well as a wide variety of keyboard emulation hardware and software.

原則 1: 知覚可能である(Perceivable)

感覚(視覚・聴覚など)の障害に対応する

事例: 輝度コントラスト

Visual contrast is specified in terms of a Luminosity Contrast Ratio, which is defined as a mathematical formula.

原則 2: 操作可能である(Operable)

入力デバイスの使用に影響を及ぼす、手あるいは感覚の障害の有無に関係なく、ユーザーはコンテンツを操作できるようにすべきである。

事例: プログラム的に決められたリンクの文脈

不十分なリンク先の説明:
ココをクリック

十分な リンク先の説明:
ウェブ・コンテンツ・アクセシビリティ・ガイドラインのHOMEページ

発見可能なリンク先の説明:
ウェブ・コンテンツ・アクセシビリティ・ガイドラインに関する情報について、詳細を読む

Description of examples:

  1. The link to the WCAG home page does not have a description of where it goes. The description is in this paragraph but the association is not programatically determined.
  2. The link has its destination directly associated.
  3. The link has its destination explained in the same paragraph. AT could retrieve this information easily, although it does not now. This is not programatically determined, but may be if AT support evolves.

原則 3: 理解可能である

ユーザーがコンテンツを理解できなければならない。

事例: テキストの読みがなを提供するルビ(ruby要素)

慶應義塾大学 ( けいおうぎじゅくだいがく )

Ruby is used to give the reading of Han characters (Kanji). The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)

原則 4: 現在および将来の利用に耐えうる(Robust)

事例: 構文分析

<p>ここに <b>太字と<i>イタリックの</b>テキスト</i> がある。</p>

このHTMLソースコードは、ユーザーエージェントによって、さまざまな表現に構文解析される可能性がある。

参考となるリソース(英語)

ありがとうございました Thank You

マイケル・クーパー(Michael Cooper)
cooper@w3.org