2018年6月5日付けでWCAG (Web Content Accessibility Guidelines) の最新バージョンである、「Web Content Accessibility Guidelines (WCAG) 2.1」がW3Cより正式に勧告されました。2008年12月に「WCAG 2.0」が勧告されて以来、約9年半ぶりにアップデートされたことになります。

今回の改定によって、2008年の「WCAG 2.0」勧告時に十分にカバーできず、対応が不十分とされていたスマートフォンやタブレット端末をはじめとした「モバイル対応」さらに「弱視（ロービジョン）」や「認知・学習障害」への対応強化を目的に、新たに「17」の達成基準が追加されています。

なお、各適合レベルごとの達成基準数の変動（WCAG 2.0 → WCAG 2.1）は下記の通りです。

  • 適合レベル A： 25 → 30（+5）
  • 適合レベル AA： 13 → 20（+7）
  • 適合レベル AAA： 23 → 28（+5）

このコラムでは、WCAG 2.1で新たに追加された達成基準について、簡単にではありますが解説をしてみたいと思います。

WCAG 2.1で追加された達成基準

まずはWCAG 2.1で新たに追加された達成基準を確認してみましょう（達成基準の日本語訳は弊社によるもの）。前述の通り、17の達成基準が追加されています。

追加された各達成基準に関する解説

簡単にですが、各項目をWCAG 2.1の原文とあわせて解説していきます。

1.3.4 Orientation （AA） - オリエンテーション

原文：
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

『特定の表示方向（画面の向き）が重要でない限り、コンテンツの表示や操作は、デバイスの縦、あるいは横など、単一の表示方向に制限されない。』

スマートフォンやタブレットは画面を縦向きや横向きに持ち替えることができますが、そのどちらの状況においても、コンテンツの表示や操作が可能であることが望ましいとする達成基準です。

1.3.5 Identify Input Purpose （AA） - 入力目的の特定

原文：
The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

各入力コントロールの目的がプログラムによって解釈できることが望ましいとする達成基準です。プログラムによって解釈可能なことで、入力コントロールの意味を正確に認知できない場合でも、例えばプログラムからオートフィル機能が利用可能であれば、その負担を軽減することができます。

1.3.6 Identify Purpose （AAA） - 目的の特定

原文：
In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.

ユーザーインターフェイスコンポーネント、アイコンなどの目的はプログラムによって解釈可能であることが望ましいとする達成基準です。

詳しくは下記に解説がありますが、ユーザーの中にはユーザーインターフェイスコンポーネントやアイコンを、使い慣れた特定のシンボルに変換して利用している人がいます。この達成基準によって、ユーザーエージェントや支援技術が、ユーザーに対してパーソナライズされた表示方法を利用可能にし、より多くの人がコンテンツを理解して使用できるようになります。

1.4.10 Reflow （AA） - リフロー

原文：
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

320 CSS ピクセルに相当する幅で、情報や機能を損なうことなく、かつ2次元のスクロール（縦・横両方のスクロール）を必要とせずに閲覧できる、また256 CSS ピクセルに相当する高さで同様に閲覧できることが望ましいとする達成基準です。

この達成基準は「スクロールが発生することが問題」と言っているわけではありません。また「320 CSS ピクセル」の幅というのは、「1280 CSS ピクセル」の幅を「400%ズーム」で見た場合の最初の表示幅に相当し、「256 CSS ピクセル」の高さというのは、「1024 CSS ピクセル」の高さを「400%ズーム」で見た場合の最初の表示高さに相当するということが補足情報として示されています。

つまり、例えば横書きのコンテンツ（縦方向のスクロールが意図されているコンテンツ）に関しては、1280 CSS ピクセル幅で表示した状態から400%ズームしたとしても、横方向のスクロールが発生せずにコンテンツが閲覧可能であること、縦書きのコンテンツ（横方向のスクロールが意図されているコンテンツ）であれば、1024 CSS ピクセルの高さで表示した状態から400%ズームしたとしても、縦方向のスクロールが発生せずにコンテンツが閲覧可能であることが求められているということです。

ただし、2次元のスクロールが前提となるコンテンツ（例えば縦横斜めにスクロールして表示する地図コンテンツや拡大した画像を自由にスクロールして閲覧するコンテンツなど）に関しては例外となります。

1.4.11 Non-Text Contrast （AA） - 非テキストコントラスト

原文：
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components
    Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects
    Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

以下の視覚的表現に関して、隣接する色に対して少なくとも「3：1」のコントラスト比を有することが望ましいとする達成基準です。

  • ユーザーインターフェイス
    非アクティブなコンポーネント、またはコンポーネントの外観がユーザーエージェントによって決定され、制作者によって変更されていない場合を除いた、ユーザーインターフェイスコンポーネント、および状態を識別するために必要な視覚的情報。
  • グラフィックオブジェクト
    グラフィック内の特定の表現が伝達される情報にとって必要不可欠である場合を除く、コンテンツを理解するために必要なグラフィック部分。

1.4.12 Text Spacing （AA） - テキストの間隔（行間や段落の間隔、文字間隔）

原文：
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

『以下に挙げるテキストのスタイルプロパティをサポートするマークアップ言語を使用して実装されたコンテンツにおいては、以下のすべてを設定して、他のスタイルプロパティを変更しなくても、コンテンツや機能が失われることはない。』

  • 行の間隔をフォントサイズの「1.5倍」以上に設定する
  • 段落の間隔をフォントサイズ「2倍」以上に設定する
  • 文字の間隔をフォントサイズの「0.12倍」以上に設定する
  • 単語の間隔をフォントサイズの「0.16倍」以上に設定する

つまり、上記の指定をすべて適用した場合でも、例えばテキストが重なったり、表示領域からはみ出して読むことができなくなるような問題が発生しないことがこの達成基準では求められています。

1.4.13 Content on Hover or Focus （AA） - ホバーまたはフォーカスで変化するコンテンツ

原文：
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable
    A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable
    If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent
    The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

ポインタホバー（マウスオーバーなど）やキーボードフォーカスを受け取ったり外れたりするによって追加コンテンツが表示されたり、非表示になる場合は、以下の要件を満たす必要があるという達成基準です。

  • キャンセル可能
    追加コンテンツが入力エラーを伝えたり、他のコンテンツを置き換えたりする場合を除き、ポインタホバーやキーボードフォーカスを動かさずに追加コンテンツを閉じるメカニズムが存在する。
  • ホバー可能
    ポインタホバーによって追加コンテンツが表示される場合は、追加コンテンツが消えることなく、ポインタをそのコンテンツ上に移動することができる。
  • 表示の継続
    追加コンテンツは、ホバーやフォーカスが解除されたり、ユーザーが非表示にしたり、あるいはその情報が有効でなくなるまでは表示されたままになる。

ただし、追加コンテンツが、ユーザーエージェントによって制御され、制作者によって変更されていない場合（例えばユーザーエージェント側で行われる、HTMLの title属性を使用したツールチップの表示などが該当します）を除く。

2.1.4 Character Key Shortcuts （A） - 文字キーのショートカット

原文：
If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off
    A mechanism is available to turn the shortcut off;
  • Remap
    A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
  • Active only on focus
    The keyboard shortcut for a user interface component is only active when that component has focus.

キーボードショートカットが、文字（大文字と小文字を含む）、句読点、数字、または記号のみを使用してコンテンツに実装されている場合、少なくとも下記のいずれかを満たす必要があるという達成基準です。

  • オフ
    ショートカットをオフにするメカニズムがある。
  • 再マッピング
    ショートカットを再マッピングして、1つ以上の文字キー以外のキー（Ctrl、Altなど）を含むショートカットに変更するメカニズムがある。
  • フォーカス時のみアクティブになる
    特定のユーザーインターフェイスコンポーネントにフォーカスがあるときのみ、そのキーボードショートカットがアクティブになる。

2.2.6 Timeouts （AAA） - タイムアウト

原文：
Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.

ユーザーの操作がない状態（非アクティブな状態）が続くことでデータが失われる場合は、非アクティブな状態がどの程度の時間続くとデータが失われるかをユーザに警告することが望ましいとする達成基準です。ただし、データが失われるまでの時間が20時間以上ある場合は除きます。

2.3.3 Animation from Interactions （AAA） - インタラクションからのアニメーション

原文：
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

アニメーション自体が機能や情報伝達に必要不可欠な場合を除き、ユーザーの動作によって引き起こされるアニメーションをユーザーが無効にできることが望ましいという達成基準です。

2.5.1 Pointer Gestures （A） - ポインタジェスチャ

原文：
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

マルチポイント、またはパスベースの（ポインタの軌道をベースとした）ジェスチャを使用するすべての機能は、それらが必要不可欠な場合を除き、シングルポインタで操作可能であることが望ましいとする達成基準です。

2.5.2 Pointer Cancellation （A） - ポインタキャンセル

原文：
For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event
    The down-event of the pointer is not used to execute any part of the function;
  • Abort or Undo
    Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
  • Up Reversal
    The up-event reverses any outcome of the preceding down-event;
  • Essential
    Completing the function on the down-event is essential.

シングルポインタを使用して操作できる機能については、少なくとも下記の1つを満たす必要があるとする達成基準です。

  • ダウンイベントの不使用
    機能を実行するためにポインタのダウンイベントを使用していない。
  • 中止または元に戻すことが可能
    機能の完了はポインタのアップイベントを使用し、かつ機能を完了前に中止する、または機能の完了後に元に戻すためのメカニズムが利用可能。
  • アップイベントによる復元
    アップイベントによって、直前のダウンイベントの結果を元に戻すことが可能。
  • 必要不可欠である
    ダウンイベントで機能を完了することが必要不可欠である。

ここでいう「ポインタのダウンイベント」とは、「コンテンツを押したタイミング」で発生するイベントのことです。つまり、ボタンなどをマウスクリックやタップで押して、指を離すまでと考えるとわかりやすいでしょう。

一方、「ポインタのアップイベント」は、ダウンイベントとは逆に「コンテンツを押すのをやめたタイミング」で発生するイベントのことですから、こちらはボタンなどを押した後、マウスのクリックやタップしていた指を離した瞬間ということになります。

2.5.3 Label in Name （A） - 名前（name）のラベル

原文：
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

『ユーザーインターフェイスコンポーネントがテキスト、または文字画像を含むラベルを持つ場合、視覚的に表示されたテキストが名前（name）に含まれる。』

視覚的に表示されたラベルと、ユーザーインターフェイスコンポーネントに付与される名前（「名前」とはname属性を指しているわけではありません。例えばtitle属性やaria-label属性で付与した値など、「ソフトウェアがWebコンテンツのコンポーネントをユーザーに識別させることができるテキスト」と定義されます）を一致させることが望ましいとする達成基準です。

2.5.4 Motion Actuation （A） - モーション（動作）による作動

原文：
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface
    The motion is used to operate functionality through an accessibility supported interface;
  • Essential
    The motion is essential for the function and doing so would invalidate the activity.

以下の場合を除き、デバイスの動作やユーザの動作で操作できる機能は、ユーザーインタフェースコンポーネントでも操作できること、または予期せぬ動作を防ぐため、無効にできること望ましいとする達成基準です。

  • 対応インターフェース
    その動作が支援技術を操作するために使用されている場合。
  • 必要不可欠である
    その動作が機能にとって必要不可欠であり、無効化することで機能が非アクティブになってしまう場合。

2.5.5 Target Size （AAA） - ターゲットのサイズ

原文：
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

  • Equivalent
    The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
  • Inline
    The target is in a sentence or block of text;
  • User Agent Control
    The size of the target is determined by the user agent and is not modified by the author;
  • Essential
    A particular presentation of the target is essential to the information being conveyed.

以下の場合を除き、ポインタ入力のターゲットは 44x44 CSSピクセル以上のサイズはあることが望ましいとする達成基準です。

  • 同等のターゲット
    ターゲットと同等のリンク、またはコントロールが、同じページ上に 44×22 CSS ピクセル以上のサイズで存在する場合。
  • インライン
    ターゲットが文章、またはテキストブロックに含まれている場合。
  • ユーザーエージェントのコントロール
    ターゲットのサイズはユーザーエージェントによってコントロールされており、制作者によって変更されていない場合。
  • 必要不可欠である
    ターゲットの表示方法が情報伝達にとって必要不可欠である場合。

2.5.6 Concurrent Input Mechanisms （AAA） - 多様な入力メカニズム

原文：
Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.

Webコンテンツは、その制限が必要不可欠な場合、コンテンツのセキュリティを確保するために必要な場合、または個別のユーザ設定を尊重するために必要な場合を除き、プラットフォームで提供されている入力方式の使用を制限しないことが望ましいとする達成基準です。

4.1.3 Status Messages （AA） - ステータスメッセージ

原文：
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

マークアップ言語を使用して実装されたコンテンツでは、ステータスメッセージは、役割（role）、またはプロパティを通してプログラムによる解釈が可能であり、フォーカスを受けとらなくても支援技術によってユーザーに提示できることが望ましいという達成基準です。

ステータスメッセージとは、アクションの成功、または結果、アプリケーションの待機状態、プロセスの進行状況、またはエラーの存在に関する情報をユーザーに提供するもので、かつコンテキストの変更によって伝達されないものです。例えば、何かを検索した際に「検索中･･･」といったメッセージが表示される場合などが挙げられます。

Webコンテンツの内容によっては、特に対応をしなくても自動的に適合となる達成基準もあるかと思いますし、通常のWebサイトであれば適用されない達成基準も多いかもしれません。一方で、「テキストの間隔」「非テキストコントラスト」（共に適合レベル AA）などは、通常のWebサイトにおいても関係してくる達成基準と言えそうです。

なお、WCAG 2.1の勧告によって、WCAG 2.0は古い規格となり、その価値がなくなる、あるいは今後のWebアクセシビリティ対応案件には使用できなくなると誤解される方がいらっしゃいますが、その心配は現時点では不要でしょう。

WCAG 2.0は2012年10月に国際規格「ISO/IEC 40500:2012」として策定されており、それを受けて国内規格である「JIS X 8341-3」も2016年、この「ISO/IEC 40500:2012」と一致規格となるよう「JIS X 8341-3:2016」として改訂されています。

つまりWCAG 2.1が勧告された現時点においても、WCAG 2.0は国内外を問わず、国際的に使用できるWebアクセシビリティの規格としてその効力を持ち、広く利用され続けるでしょう。もちろん、WCAG 2.1を使用してWebアクセシビリティ対応を行うことも有意義かと思いますので、今回追加された各達成基準について理解を深め、自社のWebサイトで検証してみるのもよいと思います。

弊社では、「Webアクセシビリティ対応（適合・準拠）サービス」「Webアクセシビリティ チェック（評価）サービス」「Webアクセシビリティコンサルティング」などの、Webアクセシビリティ関連サービスを提供していますが、これら各サービスにおける「WCAG 2.1」対応についてもご相談いただけますので、お気軽にご連絡ください。


関連する記事