HTML

この記事では、入力欄が必須であることを支援技術へ伝えるaria-required属性と、入力検証も行う標準のrequired属性を使い分ける考え方を初心者向けに説明します。

It is an attribute that tells screen readers, “This input field is required.”

aria-required 属性

入力欄が「必ず入力しなければいけない項目だよ」と、スクリーンリーダーなどの支援技術に伝えます。

<input aria-required="true">

とすると、そのフィールドが必須であることが支援技術へ伝わります。ただし、aria-required 自体は入力値を検証したり、送信を止めたりしません。

いつ使う？

標準のフォーム部品では、入力検証も行う required 属性を優先して使います。

required が使えない独自コンポーネントやカスタム UI で、必須状態を支援技術へ伝えるとき

つまり aria-required は「必須ですよ」と状態を伝えるための属性です。入力漏れを実際に防ぐ検証は、標準の required 属性やサーバー側の処理で行います。