拡張機能を使用すると、ユーザーは個々の能力や好みに合わせて、理想的なブラウジング エクスペリエンスを構築できます。拡張機能には、視覚障がい、難聴、運動機能障がいなどのあるユーザーが拡張機能にアクセスできるようにすることで、包括的なユーザーベースを促進するユーザー補助コンポーネントを含める必要があります。
ユーザー補助機能は、特別なニーズのあるユーザーだけでなく、すべてのユーザーにとって有益です。視覚障がいのあるユーザー、手の不自由なユーザー、パワーユーザーは、キーボード ショートカットを利用することでメリットを得られます。字幕と文字起こしは、聴覚障がいのあるユーザーにとって不可欠ですが、言語学習者にも役立ちます。
ユーザーはさまざまな方法で拡張機能を利用できます。標準的なモニター、キーボード、マウスを使用しているユーザーもいれば、画面拡大鏡やスクリーン リーダーを使用しているユーザーもいます。ユーザーが拡張機能にアクセスするために使用するツールを予測することはできませんが、拡張機能をできるだけアクセシブルにするために、すべてのデベロッパーが実行できる手順があります。
アクセシビリティ対応の 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 キーボード ハンドラは次のようになります。ユーザー入力に応じて aria-activedescendant WAI-ARIA プロパティが更新され、現在アクティブなツールバー ボタンが反映されることに注目してください。
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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
拡張機能は、重要な拡張機能の UI 要素への明示的なキーボード ショートカットを作成できます。これらのショートカットを実装するには、キーボード イベント リスナーをコントロールに接続します。オプション ページでショートカットを提供し、利用可能なショートカットをユーザーに知らせます。
アクセシビリティの高いコンテンツを提供する
アクセシビリティの高いコンテンツを提供することは、すべてのユーザーにとって重要です。以下のガイドラインの多くは、すべてのウェブ コンテンツのベスト プラクティスを反映しているため、よくご存じかもしれません。
テキスト
フォントの選択とテキストのサイズは、拡張機能のコンテンツの読みやすさに影響します。視覚に問題があるユーザーは、拡張機能のテキストサイズを大きくする必要がある場合があります。キーボード ショートカットを使用する場合は、Chrome に組み込まれているズーム ショートカットと競合しないようにしてください。
拡張機能の UI の柔軟性の指標として、200% テストを適用します。テキストサイズまたはページのズームを 200% に拡大しても、まだ使用できますか？
画像にテキストを焼き付けないでください。ユーザーはサイズを変更できず、スクリーン リーダーは画像を解釈できません。代わりに、Google Font API にあるフォントなど、スタイル付きのウェブフォントを選択してください。ウェブフォントはさまざまなサイズに拡大縮小でき、スクリーン リーダーを使用しているユーザーもアクセスできます。
色
拡張機能の背景色とテキストの色とのコントラストが十分である必要があります。コントラスト チェックツールを使用して、背景色とフォアグラウンド色が適切なコントラストを提供しているかどうかをテストします。
コントラストを評価する際は、情報を伝えるためにグラフィックを使用している拡張機能のすべての部分がはっきりと見えることを確認します。特定の画像については、Coblis - Color Blindness Simulator などのツールを使用して、さまざまな色覚障がいの人がその画像をどのように見るかを確認できます。
コントラストを高めるために、さまざまなカラーテーマを提供したり、ユーザーが配色をカスタマイズできるようにしたりすることを検討してください。
サウンド
拡張機能が音声や動画に依存して情報を伝達する場合は、字幕や文字起こしが利用可能であることを確認してください。字幕について詳しくは、音声解説と字幕付きメディア プログラムのガイドラインをご覧ください。
画像
画像にわかりやすい代替テキストを設定します。
<img src="img.jpg" alt="The logo for the extension">
代替テキストを使用して、画像の内容をそのまま説明するのではなく、画像の目的を記述します。スペーサー画像や純粋に装飾的な画像には、空白の "" 代替テキストを使用するか、HTML から完全に削除して CSS に配置する必要があります。
拡張機能で画像内のテキストを使用する必要がある場合は、代替テキストに画像内のテキストを含めます。適切な代替テキストに関する WebAIM の記事は、参考になるリソースです。
その他の情報
Chrome のユーザー補助機能について詳しくは、A11ycasts チャンネルをご覧になるか、Chromium ユーザー補助機能の技術ドキュメントをお読みください。