拡張機能を使用すると、ユーザーは個人の能力と好みに合わせた理想的なブラウジング エクスペリエンスを作成できます。拡張機能には、視覚障がい、聴覚障がい、運動機能障がい、その他の障がいのあるユーザーが拡張機能にアクセスできるようにすることで、インクルーシブなユーザーベースを促進するユーザー補助コンポーネントを含める必要があります。
特別な支援を必要とするユーザーだけでなく、誰もがユーザー補助機能の恩恵を受けることができます。視覚障がい者、運動機能障がい、パワーユーザーなど、すべてのユーザーにとってキーボード ショートカットが役立ちます。字幕と文字起こしは、聴覚障がいのあるユーザーにとって不可欠であるだけでなく、言語学習者にとっても役立ちます。
ユーザーはさまざまな方法で拡張機能を使用できます。標準的なモニター、キーボード、マウスを使用しているユーザーもいれば、拡大鏡とスクリーン リーダーを使用しているユーザーもいます。ユーザーが拡張機能にアクセスする際にどのツールを使用するかを予測することはできませんが、拡張機能を可能な限り利用できるようにするために、デベロッパーであれば誰でも実施できる手順があります。
アクセス可能な 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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</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 のユーザー補助に関する技術ドキュメントをお読みください。