aria-errormessage

ユーザーが作成したエラーがある場合、その存在を知らせ、修正する方法を指示したいものです。 2 つの属性を使用する必要があります。 aria-invalid="true" を設定してオブジェクトがエラー状態であることを定義し、そして、 aria-errormessage 属性を追加し、その値としてそのオブジェクトのエラーメッセージテキストを格納する要素の id を指定します。

aria-errormessage 属性は、オブジェクトの値が有効でない場合、すなわち aria-invalid が true に設定されている場合にのみ使用しましょう。 オブジェクトが有効で aria-errormessage 属性を記載する場合は、参照する要素が非表示であり、そこに含まれるメッセージには関連がないことを確認してください。

aria-errormessage が関連する場合、参照する要素はユーザーがエラーメッセージを見たり聞いたりできるように可視でなければなりません。

多くの場合、エラーメッセージを持つ要素は ARIA ライブ領域であることが望まれます。例えば、ユーザーが無効な値を指定した後にエラーメッセージが表示される場合などです。エラーメッセージは、何が間違っているかを記述し、オブジェクトを有効にするために何が必要かをユーザーに通知する必要があります。 ARIA ライブ領域としてエラーメッセージを追加することは、エラーメッセージが他の方法でユーザーに伝えられなくても、エラーメッセージのコンテンツからユーザーが好ましいことを支援技術に知らせます。

失敗が視覚的に明らかで、エラーの明示的な説明が必要な場合は、目に見えるエラーメッセージを記載し、 aria-errormessage 属性で不正なオブジェクトにリンクしてください。

いくつかのスタイルを作成します。

1. すべてのエラーメッセージを非表示にします。
2. 不正なオブジェクトを不正な外観にします。
3. 不正なオブジェクトの後に来る兄弟要素のエラーメッセージを表示させます。

aria-invalid="true" を使用して、不正なオブジェクトを識別します。

.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

オブジェクトが不正な場合は、 JavaScript を使用して aria-invalid="true" を追加します。上記の CSS は、不正なオブジェクト以下の .errormessage が見えるようにします。

<p>
  <label for="email">メールアドレス:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage"
    >有効なメールアドレスを入力してください</span
  >
</p>

有効から不正になったとき、この例での JavaScript の変更は、メール入力オブジェクトの aria-invalid への更新だけでした。エラーメッセージは入力に従うことで、アクセシビリティツリー上で可視化され利用できるようになるため、この例を単純に保つことができます。また、 aria-live プロパティを適用したり、 alert のようなライブ領域のロールを使用することもできました。

id reference

現在の要素のエラーメッセージを格納する要素の id の値。

使用しているロール:

• application
• checkbox
• combobox
• gridcell
• listbox
• radiogroup
• slider
• spinbutton
• textbox
• tree

継承しているロール:

• columnheader
• rowheader
• searchbox
• switch
• treegrid

• HTML の invalid 属性
• CSS の :invalid 擬似クラス
• aria-invalid
• aria-describedby
• aria-live