拡張機能を使用すると、ユーザーは個人の能力や好みに合わせて、理想的なブラウジング エクスペリエンスを作成できます。拡張機能には、視覚障がい、難聴、運動機能障がい、その他の障がいのあるユーザーが拡張機能にアクセスできるようにすることで、インクルーシブなユーザーベースを推進するユーザー補助コンポーネントを含める必要があります。
ユーザー補助機能は、特別なニーズを持つユーザーだけでなく、すべてのユーザーに役立ちます。視覚障がいのあるユーザー、手先の器用さに問題があるユーザー、上級ユーザーは、キーボード ショートカットを活用できます。字幕と文字起こしは、聴覚障がいのあるユーザーにとって不可欠ですが、言語学習者にも役立ちます。
ユーザーはさまざまな方法で拡張機能を操作できます。標準のモニター、キーボード、マウスを使用しているユーザーもあれば、拡大鏡やスクリーン リーダーを使用するユーザーもいます。拡張機能へのアクセスにどのツールが使用されるかは予測できませんが、デベロッパーが拡張機能を可能な限り利用できるようにするための手順は存在します。
アクセス可能な 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 のユーザー補助機能に関する技術ドキュメントをご覧ください。