Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ユーザー補助（a11y）

拡張機能を使用すると、個人の能力や好みに合わせて、理想的なブラウジングエクスペリエンスを実現できます。拡張機能には、視覚障がい、聴覚障がい、手の不自由な方など、さまざまな障がいのある方が拡張機能にアクセスできるようにするユーザー補助コンポーネントを含める必要があります。

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

ユーザーはさまざまな方法で拡張機能を利用できます。標準的なモニター、キーボード、マウスを使用するユーザーもいれば、画面拡大鏡やスクリーンリーダーを使用するユーザーもいます。ユーザーが拡張機能にアクセスするためにどのようなツールを使用するかを予測することはできませんが、デベロッパーは拡張機能をできるだけ多くのユーザーが利用できるようにするための対策を講じることができます。

ユーザー補助機能に対応した UI コントロールを統合する

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

標準コントロール

可能な限り、標準の HTML UI コントロールを使用してください。標準の HTML コントロールはキーボードで操作でき、簡単にスケーリングでき、一般的にスクリーンリーダーで読み取ることができます。

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

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

カスタムコントロールに WAI-ARIA のサポートを追加するには、ユーザーインタラクション中に Chrome がイベントを発生させるために使用する属性を含めるように、拡張機能の DOM 要素を変更する必要があります。スクリーンリーダーはこれらのイベントに応答し、コントロールの機能を説明します。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 - Color Blindness Simulator などのツールを使用して、さまざまな色覚特性で画像がどのように見えるかを確認できます。

コントラストを向上させるために、さまざまなカラーテーマを提供したり、ユーザーが配色をカスタマイズできるようにしたりすることを検討してください。

サウンド

拡張機能が音声や動画に依存して情報を伝達する場合は、字幕または文字起こしが利用可能であることを確認してください。字幕の詳細については、Described and Captioned Media Program のガイドラインをご覧ください。

画像検索

画像にわかりやすい代替テキストを指定します。

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

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

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

詳細

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