aria-required

aria-required 属性は、フォームを送信する前に要素にユーザー入力が必要であることを示します。

解説

セマンティック HTML <input>、<select>、または <textarea> に値が必要な場合は、required 属性を適用する必要があります。 HTML の required 属性は、必要なフォームコントロールに有効な値がない限りフォームの送信を無効にしますが、支援技術を使用してナビゲートするユーザーが、どのセマンティックフォームコントロールに有効なコンテンツが必要であるかを理解できるようにもします。

ロール が checkbox の <div> など、非セマンティック要素を使用してフォームコントロールを作成する場合、フォームを送信するには要素にユーザー入力が必要であることを支援技術に示すために、aria-required 属性を true の値で含める必要があります。aria-required 属性は HTML フォーム要素で使用できます。これは ARIA ロールが割り当てられている要素に限定されません。

セマンティック HTML フォームコントロールに設定された HTML required 属性と同様に、aria-required 属性は、フォームを送信する前に要素が必須であることを支援技術に明示的に伝えます。セマンティック HTML フォームコントロールの required 属性は、値が存在しない場合にフォームコントロールが送信されないようにします。ユーザーがフォームを送信しようとしたときに必要な値が無効である場合、一部のブラウザーではネイティブエラーメッセージが表示されます。しかし、全ての ARIA 状態およびプロパティと同様に、aria-required 属性は要素の機能に影響を与えません。機能と動作は JavaScript で追加する必要があります。

メモ: ARIA はアクセシビリティツリーのみを変更し、支援技術がコンテンツをユーザーに提示する方法を変更します。ARIA は要素の機能や動作については何も変更しません。セマンティック HTML 要素を本来の目的やデフォルトの機能に使用しない場合は、JavaScript を使用して動作、フォーカス、ARIA の状態を管理する必要があります。

CSS の :required および :optional 疑似クラスは、それぞれ必須か任意かに基づいて、<input>、<select>、および <textarea> 要素をマッチさせます。非セマンティック要素をフォームコントロールとして使用する場合、この CSS 疑似クラスセレクターの利点は得られません。ただし、属性が存在する場合は、[aria-required="true"] もしくは [aria-required="false"] の属性セレクターを使用できます。

フォームに必須のフォーム要素と任意のフォーム要素の両方が含まれている場合、必須の要素は、意味を伝えるために色だけに頼らない処理を使用して視覚的に示す必要があります。通常は、説明的なテキストやアイコンが使用されます。

メモ: どの要素が必須であるかは、全てのユーザーにとって明らかである必要があります。フォームコントロールが必須であることを視覚的な提示で一貫して目に見える形で示していることを確認してください。色だけでは情報を伝達するのに十分ではないことに注意してください。

例

属性は、フォームコントロールロールに追加する必要があります。ユーザーが電子メールアドレスを textbox に入力する必要がある場合は textbox に aria-required="true" を含めます。

html
<div id="tbLabel">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="tblabel"
  aria-required="true"
  id="email1"></div>

メモ: フィールドのラベルに既に「必須」という単語が含まれている場合は、aria-required 属性を省略することをお勧めします。これにより、スクリーンリーダーが「必須」という用語を 2 回読み上げるのを回避できます。

この例では、テキストボックスにコンテンツがない場合、フォームが送信されないように JavaScript を使用する必要があります。

これは、JavaScript を必要とせずにセマンティックに記述できます:

html
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />

値

true

フォームを送信できるようにするには、要素に値が必要であるか、チェックされている必要があります。

false

この要素は必須ではありません。

関連インターフェイス

Element.ariaRequired

Element インターフェイスの一部である ariaRequired プロパティは、aria-required 属性の値を反映します。

ElementInternals.ariaRequired

ElementInternals インターフェイスの一部である ariaRequired プロパティは、aria-required 属性の値を反映します。

関連付けられたロール

使用するロール:

継承先のロール:

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-required

関連情報