aria-errormessage

オブジェクトのaria-errormessage 属性は、そのオブジェクトのエラーメッセージを表示する要素を特定します。

解説

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

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

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

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

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

例

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

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

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

css

.errormessage {  visibility: hidden;}[aria-invalid="true"] {  outline: 2px solid red;}[aria-invalid="true"] ~ .errormessage {  visibility: visible;}

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

html

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

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