このページは Cloud Translation API によって翻訳されました。

ユーザー補助（a11y）

拡張機能を使用すると、個人の能力と好みに合わせた理想的なブラウジングエクスペリエンスを作成できます。拡張機能には、視覚障がい、聴覚障がい、運動機能障がい、その他の障がいのあるユーザーがこの拡張機能にアクセスできるようにすることで、インクルーシブなユーザーベースを促進するユーザー補助コンポーネントを含める必要があります。

ユーザー補助機能は、特別な支援を必要とするユーザーだけでなく、すべてのユーザーが利用できます。キーボードショートカットは、目の不自由な方、細かい作業に支障のある方、パワーユーザーの皆様にメリットがあります。字幕と文字起こしは聴覚障がいのあるユーザーにとって不可欠ですが、言語学習者にとっても役立ちます。

ユーザーはさまざまな方法で拡張機能を使用できます。標準モニター、キーボード、マウスを使用しているユーザーもいれば、拡大鏡とスクリーンリーダーを使用しているユーザーもいます。ユーザーが拡張機能にアクセスする際にどのようなツールを使用するかを予測することは不可能ですが、拡張機能を可能な限りアクセス可能にするためにデベロッパーが実施できる対策はあります。

アクセス可能な UI コントロールを統合する

ユーザーインターフェースコントロールにアクセスできないユーザーは、拡張機能を使用できません。アクセス可能な UI を作成する最も簡単な方法は、標準の HTML コントロールを使用することです。

標準コントロール

可能な限り、標準の HTML UI コントロールを使用してください。標準の HTML コントロールはキーボードでアクセスでき、スケーリングが容易で、一般的にスクリーンリーダーが理解できます。

カスタムコントロールの WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications（WAI-ARIA）は、標準の DOM 属性セットを使用してスクリーンリーダーが UI コントロールにアクセスできるようにするための仕様です。これらの属性により、ウェブページのコントロールの機能と現在の状態に関する情報をスクリーンリーダーに提供できます。

カスタムコントロールに WAI-ARIA サポートを追加するには、拡張機能の DOM 要素を変更して、ユーザー操作中にイベントを発生させるために Chrome が使用する属性を含める必要があります。スクリーンリーダーはこれらのイベントに応答し、コントロールの機能を記述します。WAI-ARIA で指定された DOM 属性は、ロール、状態、プロパティに分類されます。

<div role="toolbar">

aria-activedescendant プロパティは、ツールバーがフォーカスを取得したときにフォーカスを受け取るツールバーの子を指定します。コード tabindex="0" は、ツールバーがドキュメント順にフォーカスを取得することを指定します。

以下は、ツールバーの完全な仕様の例です。

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

WAI-ARIA のロール、状態、プロパティがコントロールの DOM に追加されると、Google Chrome からスクリーンリーダーに対して適切なイベントが発行されます。WAI-ARIA のサポートはまだ開発中のため、Google Chrome ですべての WAI-ARIA プロパティに対してイベントが生成されず、スクリーンリーダーですべてのイベントが認識されない場合もあります。

WAI-ARIA コントロールをカスタムコントロールに追加する簡単なチュートリアルについては、WWW2010 の Dave Raggett のプレゼンテーションをご覧ください。

カスタムコントロールにフォーカスする

マウスを使わずにウェブを閲覧するユーザーには、キーボードフォーカスが不可欠です。ボタン、リストボックス、メニューバーなどの操作コントロールとナビゲーションコントロールが、キーボードフォーカスを受け取れるようにします。

デフォルトでは、キーボードフォーカスを受け取ることができる HTML DOM の要素は、アンカー、ボタン、フォームコントロールのみです。ただし、HTML 属性 tabIndex を 0 に設定すると、DOM 要素がデフォルトのタブシーケンスに配置され、キーボードのフォーカスを受け取れるようになります。

element.tabIndex = 0

element.focus();

tabIndex = -1 を設定すると、タブシーケンスから要素が削除されますが、その要素はプログラムでキーボードフォーカスを受け取れるようにします。

キーボードアクセスをサポートする

拡張機能は、キーボードだけで使用できるようにする必要があります。マウスを使用できないユーザーと、使用していないパワーユーザーがアクセスできるようにします。

ユーザーがマウスを使わずに拡張機能のさまざまな部分間を移動できることを確認します。ポップアップの使用がキーボードで操作可能であることを確認します。拡張機能が操作可能かどうかを確認するには、Chrome のキーボードショートカットを使用します。

インターフェースのどの部分にキーボードのフォーカスがあるのかが一目でわかるようにします。通常、フォーカスの枠線はインターフェースの周囲に表示されますが、CSS を過度に使用すると、枠線が抑制されたり、コントラストが低下したりすることがあります。

ショートカット

最も一般的なキーボード操作では、Tab キーを使用して拡張機能のインターフェースからフォーカスを回転させることができますが、必ずしも最も簡単で効率的な方法であるとは限りません。

単純な JavaScript キーボードハンドラは次のようになります。ユーザー入力に応じて WAI-ARIA プロパティ aria-activedescendant が更新され、現在アクティブなツールバーボタンが反映されていることに注目してください。

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

拡張機能は、重要な拡張機能 UI 要素への明示的なキーボードショートカットを作成できます。これらのショートカットを実装するには、キーボードイベントリスナーをコントロールに接続します。オプションページにショートカットを追加して、ユーザーが使用できるショートカットを認識できるようにします。

アクセス可能なコンテンツを提供する

利用しやすいコンテンツを提供することは、あらゆるユーザーにとって重要です。次のガイドラインの多くは、すべてのウェブコンテンツに適した方法を反映しているため、おなじみのものかもしれません。

テキスト

フォントの選択とテキストサイズは、拡張機能のコンテンツの読みやすさに影響します。視覚に障がいがある場合は、拡張機能のテキストサイズを大きくする必要がある場合があります。キーボードショートカットを使用する場合は、Chrome に組み込まれているズームショートカットを妨げないようにしてください。

拡張機能の UI の柔軟性を示すため、200% テストを適用します。テキストサイズまたはページズームを 200% 拡大しても、それでも使用可能か。

テキストを画像に埋め込まないようにします。ユーザーはサイズを変更できず、スクリーンリーダーは画像を解釈できません。代わりに、スタイル付きウェブフォント（Google Font API にあるフォントなど）を使用してください。ウェブフォントはさまざまなサイズに調整可能で、スクリーンリーダーを使用しているユーザーもアクセスできます。

カラー

拡張機能の背景色とテキストの色には十分なコントラストが必要です。コントラストチェックツールを使用して、背景色と前景の色のコントラストが適切かどうかをテストします。

コントラストを評価する場合は、情報を伝えるためにグラフィックスに依存する拡張機能のあらゆる部分がはっきりと見えることを確認します。特定の画像については、Coblis 色覚異常シミュレータなどのツールを使用して、さまざまな色覚異常で画像がどのように表示されるかを確認できます。

さまざまなカラーテーマを用意するか、ユーザーがカラーパターンをカスタマイズできるようにして、コントラストを上げることを検討してください。

音質

拡張機能で音声や動画を使って情報を伝える場合は、字幕や文字起こしを利用できるようにしてください。字幕について詳しくは、説明および字幕付きメディアプログラムのガイドラインをご覧ください。

画像

画像に有益な代替テキストを設定する。

<img src="img.jpg" alt="The logo for the extension">

代替テキストは、画像の内容を説明する文字の説明ではなく、画像の目的を説明する場合に使用します。スペーサー画像や純粋に装飾的な画像は、空白の "" 代替テキストを含めるか、HTML からすべて削除して CSS に配置します。

拡張機能で画像内のテキストを使用する必要がある場合は、代替テキストに画像テキストを含めます。適切な代替テキストに関する WebAIM の記事を参考にしてください。

詳細

Chrome のユーザー補助機能について詳しくは、A11ycasts チャンネルと Chromium のユーザー補助技術ドキュメントをご覧ください。