拡張機能を使用すると、ユーザーは個人の能力や好みに合わせて、理想的なブラウジング エクスペリエンスを作成できます。拡張機能には、視覚障がい、聴覚障がい、手先の不自由さなどの障がいのあるユーザーが拡張機能にアクセスできるようにすることで、包括的なユーザーベースを促進するユーザー補助コンポーネントを含める必要があります。
特別な支援を必要とするユーザーだけでなく、すべてのユーザーがユーザー補助機能の恩恵を受けることができます。視覚障がいのあるユーザー、手先の器用さに問題があるユーザー、上級ユーザーは、キーボード ショートカットを活用できます。字幕と文字起こしは、聴覚障がいのあるユーザーにとって不可欠ですが、言語学習者にも役立ちます。
ユーザーはさまざまな方法で拡張機能を利用できます。標準モニターを使用しているユーザーもいますが キーボードとマウスを使用できます。また、拡大鏡やスクリーン リーダーを使用する場合もあります。 拡張機能へのアクセスにどのツールが使用されるかは予測できないが、ステップはある 拡張機能を可能な限り利用しやすくするために、デベロッパーなら誰でも実装できます。
アクセス可能な UI コントロールを統合する
ユーザー インターフェース コントロールにアクセスできないユーザーは、拡張機能を使用できません。最も簡単な 標準の HTML コントロールを使用すると、アクセシビリティの高い UI を作成できます。
標準コントロール
可能な限り、標準の HTML UI コントロールを使用してください。標準的な HTML 制御はキーボード アクセスしやすく、簡単にスケールでき、一般的にスクリーン リーダーに認識されます。
カスタム コントロールの WAI-ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications（WAI-ARIA）は、標準の DOM 属性セットを使用して、スクリーン リーダーが UI コントロールにアクセスできるようにするための仕様です。これらの属性により、関数と現在の関数に関する情報をスクリーン リーダーに提供できます。 コントロールの状態を表します。
カスタム コントロールに WAI-ARIA サポートを追加するには、拡張機能の DOM 要素を は、Chrome がユーザー操作中にイベントを発生させるために使用する属性を含めるように変更されました。スクリーン リーダーはこれらのイベントに応答し、コントロールの機能を説明します。DOM 属性を WAI-ARIA は、ロール、状態、プロパティに分類されます。
<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 コントロールの追加に関する簡単なチュートリアルについては、Dave Raggett の WWW2010 のプレゼンテーションをご覧ください。
カスタム コントロールでフォーカス
キーボード フォーカスは、マウスを使用せずにウェブを操作するユーザーにとって不可欠です。ボタン、リストボックス、メニューバーなどの操作とナビゲーションのコントロールがキーボードのフォーカスを受け取れることを確認します。
デフォルトでは、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 Fonts API にあるフォントなど、スタイル設定されたウェブフォントを選択してください。ウェブフォントはさまざまなサイズにスケーリングでき、スクリーン リーダーを使用しているユーザーがアクセスできます。
色
拡張機能のテキストの色と背景色は十分なコントラストが必要です。コントラスト チェック ツールを使用して、背景色と前景色が適切なコントラストを提供しているかどうかをテストします。
コントラストを評価する際は、グラフィックに依存して情報を伝える拡張機能のすべての部分がはっきりと見えることを確認します。特定の画像については、Coblis - 色覚障がいシミュレーターなどのツールを使用して、さまざまな色覚障がいがある場合に画像がどのように見えるかを確認できます。
さまざまなカラーテーマを提供するか、ユーザーが色をカスタマイズできるようにすることを検討してください。 コントラストをつけることができます。
音
拡張機能が音声や動画を使用して情報を伝達する場合は、字幕または文字起こしが利用可能であることを確認してください。詳しくは、Descriptiond and Captioned Media Program ガイドラインをご覧ください。 説明しました。
画像
画像にわかりやすい代替テキストを指定します。
<img src="img.jpg" alt="The logo for the extension">
代替テキストには、画像の内容を文字通り説明するのではなく、画像の目的を記述します。スペーサー画像や純粋に装飾的な画像には、空白の "" 代替テキストを指定するか、HTML から完全に削除して CSS に配置する必要があります。
拡張機能で画像内にテキストを使用する必要がある場合は、代替テキストに画像テキストを含めます。参照できる優れたリソースとして、適切な代替テキストに関する WebAIM の記事があります。
その他の情報
Chrome のユーザー補助機能について詳しくは、A11ycasts チャンネルと以下の資料をご覧ください。 Chromium のユーザー補助機能の技術ドキュメントをご覧ください。