スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス

これは、アクセス可能なWebフォームに関するシリーズの3番目の記事です。 前の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。この記事では、フォーム内のスクリーンリーダーナビゲーションを調査し、アクセス可能なフォームデザインのベストプラクティスを概説しています。

編集者のメモ：この投稿は、現在のベストプラクティスを反映するように更新されており、追加のコード例が含まれています。 あなたのフィードバックは大歓迎です！

スクリーンリーダーの理解スクリーンリーダーは、デジタルテキストをオーディオまたは点字に変換する支援技術（at）です。 これらは、視覚障害のあるユーザーにとって不可欠なツールです。 このガイドでは、Mac Vo（VoiceOver）を例として、Appleデバイス用のビルトインスクリーンリーダーを使用しています。 VOをアクティブにして使用するための特定の方法は、デバイスによってわずかに異なる場合があります。

マコーでのナレーションのアクティブ化

新しいMacBookプロでは、コマンドキーを押し続け、Touch IDを3回迅速に押してVOをアクティブにします。 古いMacBook Pro（タッチバー付き）は、ショートカットCMD FN F5を使用しています。 従来のキーボードの場合、同等のショートカットを使用するか、アクセシビリティ設定を介してVOを有効にします。 アクティブ化すると、VOは紹介メッセージを提供します

タブ、コントロール、オプション、シフト、および矢印キーの組み合わせを使用してナビゲートするか、より直接的なナビゲーションのためにナレーションローターを利用できます。 ボイスオーバーのモディファイアキー

デフォルトのボイスオーバーモディファイアキーは制御オプションですが、これはCaps Lockまたは両方の組み合わせにカスタマイズできます。

ボイスオーバーローターを使用して

モディファイアキー「u」（たとえば、caps lock u）を使用してローターをアクティブにします。 左右の矢印キーを使用して、さまざまなオプションをナビゲートします。

ヘディングレベルでナビゲート

モディファイアキーを使用してレベルを上に移動してナビゲートします。CMDH。モディファイアキーを使用して、CMD Hをシフトしてドキュメント構造に戻ります。

Webフォームのアクセシビリティベストプラクティス

Webフォームは、Webインタラクションの基本です。 アクセス可能なフォームを作成するためのベストプラクティスを以下に示します：

1. 明示的対暗黙のラベル：暗黙的なラベル（for属性をリンクラベルと入力に使用する）は許容可能です。 <label>...</label>

<label for="name">Name:</label> <input type="text" id="name">

必須フィールド：
2. 必須フィールドに属性を使用します。 すべてのユーザーに必要なフィールドを示すために、常に視覚的な手がかり（アスタリスクなど）を提供してください。 required

<label for="email">Email (required):<span style="color:red">*</span></label> <input type="email" id="email" required>

ネイティブHTMLボタンを使用します。スタイルのボタンとして使用しないでください

3. デモとリソース<button></button>
コードの例については、

VoiceOver Demo Github Repo

にアクセスしてください。 VoiceOverを使用したライブデモは、VoiceOverを使用してWebフォームをナビゲートすることで利用できます。 スクリーンリーダーのソフトウェアオプション

nvda：Windows用の無料でオープンソースのスクリーンリーダー。

顎： Windowsの人気のあるコマーシャルスクリーンリーダー。

• ナレーター：Windows 11用の内蔵スクリーンリーダー
orca：
• GNOMEベースのLinuxディストリビューションのスクリーンリーダー Talkback：
Androidのビルトインスクリーンリーダー。
ブラウザとスクリーンリーダーの互換性
• HTML要素とARIA属性のブラウザサポートの詳細については、Caniuse.comとARIAのアクセシビリティサポートドキュメントに相談してください。 画面リーダーの互換性はブラウザのサポートに依存することを忘れないでください。 Digitala11yの記事「スクリーンリーダーとブラウザ！アクセシビリティテストに最適な組み合わせはどれですか？」役立つ洞察を提供します
• 謝辞
エイドリアン・ロゼリ、カール・グローブス、トッド・リビー、スコット・オハラ、ケブ・ボネットなどに感謝します。

さらに読み取り

Apple VoiceOver Support

wai-ariaオーサリングプラクティス

HTML Google TalkBackサポート

• スクリーンリーダーの相互作用モードを理解する
• 必須属性要件

以上がスクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。