はじめに
Web Accessibility Scan ツールは、WCAG 2.2 や Section 508 などの Web アクセシビリティ ガイドラインに準拠しているかどうか、ブラウザーの再生中にブラウザーのコンテンツをチェックします。Web Accessibility Scan は、既存のブラウザー再生テストに連結させる必要があり、ブラウザー再生アクションを実行した直後に Web ページの現在の状態をスキャンします。
Web Accessibility Scan ツールと Browser Playback の連結
Web Accessibility Scan ツールはブラウザーでのアクセシビリティをテストするため、Browser Playback テストに連結する必要があります。
アクセシビリティ スキャンをブラウザー再生テストに連結するには、以下の操作を行います。
- Web アクセシビリティ スキャンを追加するブラウザー再生テストを右クリックし、[出力の追加] を選択します。
- 表示されたウィザードで、[ブラウザー コンテンツ (描画された HTML)] を有効にし、[次へ] をクリックします。
- 使用可能なツールのリストから Web Accessibility Scan を選択し、[完了] をクリックします。Web Accessibility Scan ツールが開きます。
- 必要に応じて名前を変更します。
- ページ全体をスキャンするのではなく、スキャンの範囲を要素に限定することができます。それには、[要素ロケーターに範囲を限定] パネルの上部にあるメニューから、要素を定義する方法を選択します。オプションは以下のとおりです。
- 要素プロパティの使用: 要素名、属性名、属性値、インデックス値の各フィールドを使用して要素を定義します。
- XPath の使用: 要素を識別するリテラル XPath 文字列を XPath フィールドに入力します。
- スクリプトの使用: 要素を識別する XPath 文字列を生成するスクリプトを入力します。スクリプトの使用の詳細については、「スクリプトを使用した拡張機能の基礎」を参照してください。
- 変更を保存します。
要素とルールの除外
Web Accessibility Scan ツールは、除外を行わずに少なくとも 1 回実行することを推奨します。レポートされた違反を今後のスキャンから除外したい場合は、Web Accessibility Scan ツールを更新して違反を無視することができます。
要素とルールを除外するには、次の操作を行います。
- (オプションだが推奨) Web Accessibility Scan ツールを実行し、レポートされた違反を確認します。レポートの要素ロケーターとルール ID は簡単に除外テーブルに追加できます。
- Web Accessibility Scan ツールをダブルクリックします。
- 除外を追加するテーブルの［追加］をクリックします。テーブルに新しい行が開き、要素ロケーターまたはルール ID を追加できます。
- 要素またはルールを違反レポートから適切なテーブルにコピーできます。「除外する要素」テーブルに要素ロケータを手動で入力することもできます。要素の検索に使用される接頭辞の詳細については、以下の表を参照してください。
- 変更を保存します。
次の表では、Web アクセシビリティ スキャン中に要素を見つけるために使用される接頭辞について説明します。
| 接頭辞 | 説明 |
|---|---|
alt= | alt 属性値によって要素を検索します。 |
| class= | 要素に関連付けられたクラスによって要素を検索します。クラス名は 1 つだけ使用する必要があります。 |
| css= | 接頭辞に続くテキストを CSS セレクターとして解釈します。その CSS セレクターを使用して要素を検索します。 |
| dom= | 接頭辞に続くテキストを 1 つ以上の Web 要素を返す JavaScript として解釈します。ページのコンテキストで JavaScript を実行し、JavaScript が返す要素を返します。 |
| id= | id 属性値によって要素を検索します。 |
| link= | 接頭辞に続くテキストをリンク テキストとして解釈します。そのリンク テキストを含むリンクを検索します。 |
| xpath= | 接頭辞に続くテキストを XPath セレクターとして解釈します。XPath セレクターを使用して要素を検索します。 |
| document. | document. を含む文字列全体を、1 つ以上の要素を返す JavaScript として解釈します。ページのコンテキストで JavaScript を実行し、JavaScript が返す要素を返します。 |
| / | / を含む文字列全体を XPath セレクターとして解釈します。XPath セレクターを使用して要素を検索します。 |
上記の接頭辞が見つからない場合、値は ID とみなされ、接頭辞 id= が付いているかのように機能します。
Web アクセシビリティ ルール
| ルール ID | 説明 |
|---|---|
| area-alt | イメージ マップの <area> 要素に代替テキストが含まれるようにします。 |
| aria-allowed-attr | 要素のロールがその ARIA 属性をサポートしていることを確認します。 |
| aria-braille-equivalent | aria-braillelabel と aria-brailleroledescription に点字以外の同等の文字列が必ずあるようにします。 |
| aria-command-name | すべての ARIA ボタン、リンク、メニュー項目にアクセス可能な名前が付けられるようにします。 |
| aria-conditional-attr | ARIA 属性が要素の役割の仕様に記載されているとおりに必ず使用されるようにします。 |
| aria-deprecated-role | 要素が非推奨のロールを使用しないようにします。 |
| aria-hidden-body | aria-hidden="true" がドキュメント本文に存在しないことを確認します |
| aria-hidden-focus | aria-hidden 要素がフォーカス可能でないこと、またはフォーカス可能な要素が含まれていないことを確認します。 |
| aria-input-field-name | すべての ARIA 入力フィールドにアクセス可能な名前が付けられるようにします。 |
| aria-meter-name | すべての ARIA メーター ノードにアクセス可能な名前が付けられるようにします。 |
| aria-progressbar-name | すべての ARIA プログレスバー ノードにアクセス可能な名前が付けられるようにします。 |
| aria-prohibited-attr | ARIA 属性が要素のロールに対して禁止されていないことを確認します。 |
| aria-required-attr | ARIA ロールを持つ要素に必要な ARIA 属性がすべて確実に含まれるようにします。 |
| aria-required-children | 子ロールを必要とする ARIA ロールを持つ要素にそのロールが含まれていることを確認します。 |
| aria-required-parent | 親ロールを必要とする ARIA ロールを持つ要素がそれらのロールに含まれていることを確認します。 |
| aria-roles | role 属性を持つすべての要素が有効な値を使用するようにします。 |
| aria-toggle-field-name | すべての ARIA トグル フィールドにアクセス可能な名前が付けられるようにします。 |
| aria-tooltip-name | すべての ARIA ツールチップ ノードにアクセス可能な名前が付いていることを確認します。 |
| aria-valid-attr-value | すべての ARIA 属性に有効な値があることを確認します。 |
| aria-valid-attr | aria- で始まる属性が有効な ARIA 属性であることを確認します。 |
| autocomplete-valid | オートコンプリート属性が正しく、フォームフィールドに適していることを確認してください。 |
| avoid-inline-spacing | スタイル属性を通じて設定されたテキスト間隔がカスタム スタイルシートで調整できるようにします。 |
| blink | <blink> 要素が使用されていないことを確認します。 |
| button-name | ボタンに識別可能なテキストが含まれるようにします。 |
| bypass | ユーザーがナビゲーションをバイパスしてコンテンツに直接ジャンプできるメカニズムが各ページに少なくとも 1 つあることを保証します。 |
| color-contrast | 前景色と背景色のコントラストが WCAG 2 AA の最小コントラスト比しきい値を満たしていることを確認します。 |
| definition-list | <dl> 要素が正しく構造化されていることを確認します。 |
| dlitem | <dt> 要素と <dd> 要素が <dl> に含まれていることを確認します。 |
| document-title | 各 HTML ドキュメントに空でない <title> 要素が含まれていることを確認します。 |
| duplicate-id-aria | ARIA とラベルで使用されるすべての id 属性値が一意であることを確認します。 |
| form-field-multiple-labels | フォームフィールドに複数のラベル要素が含まれないようにします。 |
| frame-focusable-content | フォーカス可能なコンテンツを含む <frame> 要素と <iframe> 要素に tabindex=-1 がないようにします。 |
| frame-title-unique | <iframe> 要素と <frame> 要素に一意の title 属性が必ず含まれるようにします。 |
| frame-title | <iframe> 要素と <frame> 要素にアクセス可能な名前が付いていることを確認します。 |
| html-has-lang | すべての HTML ドキュメントに lang 属性があることを確認します。 |
| html-lang-valid | <html> 要素の lang 属性に有効な値があることを確認します。 |
| html-xml-lang-mismatch | 有効な lang 属性と xml:lang 属性の両方を持つ HTML 要素がページの基本言語と一致するようにします。 |
| image-alt | <img> 要素に代替テキスト、役割なし、またはプレゼンテーションがあることを確認します。 |
| input-button-name | 入力ボタンに識別可能なテキストが含まれるようにします。 |
| input-image-alt | <input type="image"> 要素に代替テキストが含まれるようにします。 |
| label | すべてのフォーム要素にラベルが付けられていることを確認します。 |
| link-in-text-block | 色に依存しない方法で、リンクが周囲のテキストと区別されるようにします。 |
| link-name | リンクに識別可能なテキストが含まれていることを確認します。 |
| list | リストが正しく構造化されていることを確認します。 |
| listitem | <li> 要素がセマンティックに使用されていることを確認します。 |
| marquee | <marquee> 要素が使用されていないことを確認します。 |
| meta-refresh | <meta http-equiv="refresh"> が遅延更新に使用されないようにします。 |
| meta-viewport | <meta name="viewport"> がテキストの拡大縮小とズームを無効にしないようにします。 |
| nested-interactive | インタラクティブ コントロールが常にスクリーン リーダーによって読み上げられるとは限らず、支援テクノロジのフォーカスの問題を引き起こす可能性があるため、インタラクティブ コントロールがネストされないようにします。 |
| no-autoplay-audio | オーディオを停止またはミュートする制御メカニズムがなければ、<video> 要素または <audio> 要素が 3 秒を超えてオーディオを自動再生しないようにします。 |
| object-alt | <object> 要素に代替テキストが含まれるようにします。 |
| role-img-alt | [role="img"] 要素に代替テキストが含まれるようにします。 |
| scrollable-region-focusable | スクロール可能なコンテンツを含む要素にキーボードからアクセスできるようにします。 |
| select-name | 選択要素にアクセス可能な名前が付けられていることを確認します。 |
| server-side-image-map | サーバー側のイメージ マップが使用されないようにします。 |
| summary-name | サマリー要素に識別可能なテキストが含まれるようにします。 |
| svg-img-alt | img、graphics-document、または graphics-symbol の役割を持つ <svg> 要素にアクセス可能なテキストがあることを確認します。 |
| target-size | タッチターゲットに十分なサイズとスペースがあることを確認します。 |
| td-headers-attr | header 属性を使用するテーブル内の各セルが、そのテーブル内の他のセルのみを参照するようにします。 |
| th-has-data-cells | <th> 要素と role=columheader/rowheader を持つ要素に、それらが記述するデータ セルがあることを確認します。 |
| valid-lang | lang 属性に有効な値が含まれるようにします。 |
| video-caption | <video> 要素にキャプションがあることを確認します。 |
レポートでの Web アクセシビリティの問題の表示
Web アクセシビリティの問題は、他の問題とは別に、結果レポート のセクションに収集されます。レポートの上部にある [アクセシビリティの問題] リンクをクリックすると、このセクションに直接移動できます。
