WCAG 2.1の新しいもの：名前のラベル

2018年にリリースされたWCAG 2.1は、いくつかの新しい成功基準を導入し、Webアクセシビリティを強化しました。この記事では、ユーザーインターフェイスコンポーネントのラベル付けの重要な側面である「名前のラベル」（2.5.3）に焦点を当てています。一般的な落とし穴、ソリューション、ベストプラクティスを探ります。

成功基準を理解する

成功基準は、アクセシビリティコンプライアンスを定義するテスト可能なテクノロジーに依存しないステートメントです。 「Label in Name」は、コンポーネントの視覚ラベルがプログラム名と一致するかどうかを評価します。これは、WCAG 2.1の「操作可能な」カテゴリの一部であり、特に入力モダリティに対処します。重要なことに、WCAG 2.1はWCAG 2.0と後方互換性があります。

名前のラベル：ビジュアルとプログラマティック

WCAG 2.5.3（レベルA）は次のように述べています。「テキストまたはテキストの画像を含むラベルを持つユーザーインターフェイスコンポーネントの場合、名前には視覚的に表示されるテキストが含まれています。」

これにより、視覚的に提示されたラベルとコンポーネントのプログラム名（アクセス可能な名前）との一貫性が保証されます。この一貫性は、スクリーンリーダーや音声認識ソフトウェアなどの支援技術のユーザーにとって不可欠です。視覚的な名前とプログラムの名前は同一である必要はありませんが、共通の関連する用語（「送信」と「フォームを送信」）を共有する必要があります。不一致は混乱を引き起こし、アクセシビリティを妨げます。

支援技術への影響

HTML連絡フォームを考慮してください。音声認識を採用するユーザーは、視覚的なテキスト「送信」でボタンに遭遇する可能性がありますが、「送信」のプログラム的な名前が付いています。この不一致は失敗です。ユーザーは、ビジュアルラベルに依存しているため、音声コマンドを使用してボタンをアクティブにすることはできません。視覚的な名前とプログラムの名前を一致させる（どちらの場合も「送信」）は、この問題を解決します。 aria-label値を追加しない場合、それを削除することが望ましいです。

スクリーンリーダーのユーザーも、一貫したラベル付けの恩恵を受けます。彼らが見ているものに似たテキストを聞くことは、使いやすさを高めます。逆に、不一致のラベルは、スクリーンリーダーを介してナビゲートするユーザーの音声入力または混乱を介してコントロールの偶発的な活性化につながる可能性があります。基準は、視覚ラベルがないコンポーネントには適用されません。

コード例：障害状態と修正

この記事では、3つの障害シナリオを紹介します。

1. 話されたラベルとビジュアルラベルの間の切断。
2. 音声ラベルに追加のテキストを追加する「アクセスしやすい」スパンによるラベルの不一致。
3. aria-labelledby属性を使用した入力は、話し言葉と視覚ラベルの間の相関を確立できませんでした。

これらの例は、一般的なエラーを強調しています。この記事では、各シナリオの修正コードスニペットを提供します。

2020年のWebAimの調査では、420万人のフォーム入力の55％が不適切にラベル付けされていることが明らかになりました。

使用を使用した適切なラベル入力ペアリング<label></label>要素は重要ですが、 aria-label経由のプログラマティック名（アクセス可能な名前）も同様に重要です。間の矛盾<label></label>テキストとaria-label認知障害と音声入力ユーザーを持つユーザーに認知過剰を作成します。

ラベル配置とテキストの特異性

この記事は、文字通りではなく象徴的に使用されている場合、テキストは視覚的なラベルとは見なされないことを明確にしています。多くの場合、画像をテキストとして使用しているリッチテキストエディターは、これを例示します。

一貫性のために、視覚的に近接ラベルをラベルテキストと見なす必要があります。最適な配置ガイドラインは次のとおりです。

• テキスト入力とドロップダウンの左。
• チェックボックスとラジオボタンの権利。
• 内部ボタンまたはタブ、またはアイコンボタンの下。

句読点と大文字のわずかなばらつきは、象徴的ではないにしても受け入れられます。

視覚ラベルのないコンポーネントは、この成功基準から除外されます。

適切なラベル付けの利点

一貫したラベル付けにより、音声入力ユーザーはコントロールをシームレスにアクティブにし、推測を排除できます。包括的デザインはすべてのユーザーに利益をもたらし、より楽しくてアクセスしやすい体験を生み出します。

結論とテスト

この記事は、WCAG 2.5.3を要約し、単純さにもかかわらずその重要性を強調しています。 Aレベルのコンプライアンス要件を強調します。プログラム名に視覚的に提示されたテキストが含まれていることを確認します。

テストは、ブラウザ開発者ツール（Chrome Devtools、Firefox開発者ツール）、またはWaveやAXなどのアクセシビリティ監査ツールを使用して実行できます。この基準を順守することは、一見マイナーではありますが、すべてのユーザーのアクセシビリティを大幅に向上させます。

以上がWCAG 2.1の新しいもの：名前のラベルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。