Accessibility Insights for Web を使用してフォームのアクセシビリティに関する問題を見つけて修正する
- 5 分
ユーザーが Web アプリケーションと対話する最も重要な方法の 1 つは、フォームを使用して情報を送信することです。 フォームを作成して、すべてのユーザーがフォームを移動、入力、送信できるようにする方法には、いくつかの重要な考慮事項があります。
基本的な概念は、HTML を設計された方法で使用することです。 標準の HTML フォーム要素はアクセシビリティのために構築されていますが、最新の JavaScript ライブラリまたは過度に巧妙な CSS を使用して、無意識のうちにアクセシビリティ機能をオーバーライドするのは簡単です。
ラベル
フォーム上のすべての入力タグには、それを識別するために関連付けられた <label> タグが必要です。 ラベルはプログラムによって入力要素に関連付けられているため、このタグは、入力要素の横に画面にテキストを配置するだけの場合とは異なります。 たとえば、スクリーン リーダーは、入力要素にフォーカスがあるときにラベル テキストを読み取ります。
ラベルを選択すると、入力がアクティブになり、操作が容易になります。 また、ユーザーがタッチスクリーン デバイスを使用する場合にも役立ちます。 電話で小さなチェックボックスを探す代わりに、ユーザーはラベルを選択するだけです。
ラベルが関連付けられた入力テキスト フィールドの例を次に示します。
<label for="name">Name</label>
<input type="text" id="name">
検証とエラー メッセージ
必須フィールド
最も簡単なケースである必須フィールドから始めましょう。 色分けやその他のカスタム UI 要素を使用してこれらのフィールドを示すのではなく、HTML 入力要素で required 属性を使用できます。 スクリーン リーダーはこの属性を処理でき、任意のブラウザーのユーザーは、プラットフォームの標準 UI を使用して必要なフィールドの相互作用を確認できます。
<input type="text" id="name" required>
必要な要素の視覚的なデザインをさらに含める場合は、CSS 擬似セレクターを使用できます。 他のスタイルを指定しても問題ありませんが、 required 属性を使用すると、すべてのユーザーにアクセス可能な表示が提供されます。 次の CSS スタイルは、必要なテキスト ボックスの罫線の色を赤に設定します。
input:required
{
border-color: red;
}
入力の種類
HTML フォーム要素は、一般的な入力の種類に対する包括的な検証サポートを提供します。 たとえば、カスタム JavaScript と HTML を使用して日付ピッカーを表示するのではなく、次のコードを使用できます。
<input type="date" id="birthday">
このコードは、ユーザーのブラウザーとオペレーティング システムのネイティブ日付選択ポップアップを提供します。 日付ピッカーはアクセシビリティのためにテストされ、検証が自動的に処理されます。 カスタムの正規表現検証、UI 要素、および JavaScript を必要とするために使用される入力型は、幅広くサポートされています。
- 日付
- 月
- 週
- 時間
- 範囲
- URL
- 色
そのため、記述するコードが少なくなり 、 アクセスが容易になりました。 それは勝利です!
タブの順序
キーボードまたはスクリーン リーダーを使用してフォーム内を移動するユーザーは、タブ オーダーに依存します。 複雑なフォーム設計をしているか、何か凝りすぎたことをしようとしているのでなければ、それは動作します。 ほとんどのフォームのタブオーダーを混乱させるのは難しいです。 ただし、これはテストする重要な機能です。
タブ オーダーをテストするには、キーボードの Tab キーを選択し、操作を確認します。 ただし、次の演習でわかるように、Accessibility Insights for Web を使用すると、このテストがはるかに簡単になります。
フォームの提出
ユーザーがフォームへの入力を完了し、フォームを送信する準備ができたら、過度に複雑なプロセスほど不満はありません。 フォームの送信をサポートする最善の方法は、単純な <input type="submit"> 要素です。
<form>
<input type="text" id="name" required>
<input type="date" id="birthday">
<input type="submit">
</form>
このパターンは、カスタムの JavaScript と UI を結び付けるのではなく、組み込みの HTML フォームの動作を使用することで、さまざまな閲覧エクスペリエンスでフォームをより使いやすくなっています。
ウェブのためのアクセシビリティ・インサイト
Accessibility Insights for Web は、Google Chrome と Microsoft Edge の拡張機能です。 ここでは、サンプル アプリケーションのアクセシビリティの問題を特定して修正するために、次の演習で使用します。
拡張機能では、次の主要なツールがサポートされています。
FastPass は、開発者が一般的で影響の大きいアクセシビリティの問題を 5 分以内に特定するのに役立つ、軽量で 2 段階のプロセスです。 このシナリオでは、ツールは次の操作を行います。
- 約 50 個のアクセシビリティ要件に準拠しているかどうかを自動的にチェックします。
- 明確な手順と、キーボード アクセスに関連する重要なアクセシビリティの問題を簡単に識別できるようにするビジュアル ヘルパーを提供します。 これらの問題には、タブストップの欠落、キーボードトラップ、誤ったタブ順序などがあります。
評価 を使用すると、HTML スキルを持つすべてのユーザーが、Web アプリまたは Web サイトが Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.1 レベル AA に準拠していることを確認できます。 このシナリオでは、ツールは次の操作を行います。
- 約 50 個のアクセシビリティ要件に準拠しているかどうかを自動的にチェックします。
- 約 20 個の手動テストの詳細な手順、例、修正方法のガイダンスを提供します。 多くのテストが支援されています。つまり、ツールによってテスト インスタンスが識別されるか、ビジュアル ヘルパーが提供されます。
その他のツール を使用すると、アクセシビリティの問題を特定するのに役立つ視覚化にすばやくアクセスできます
これで基本がわかったので、次の演習でピザの Web サイトを修正する準備ができました。