aria-invalid属性

aria-invalid属性は不正な値を入力された入力フォームに対して指定を行うWAI-ARIA属性です。

以下は入力必須項目が未入力時にjQueryでaria-invalid属性をセットするサンプルです。(JavaScriptによるバリデーションを行うため、required属性に対するフォームのバリデーションはnovalidate属性で抑制しています。)

CSS

[aria-invalid=true]{
	border-color:red;
}

HTML

<form action="#" id="submit_form" novalidate>
	<label for="email">Email:<input type="email" id="email" aria-required="true" required></label>
	<input type="submit" value="送信">
</form>

JavaScript

$("#submit_form").submit(function(){
	//フォームのバリデーション
	$(this).find("[aria-required]").each(function(){
		$(this).attr("aria-invalid",$(this).val()?false:true);
	});
	//インバリッドの場合は送信を抑制
	if($(this).find("[aria-invalid]").length>0){
		return false;
	}
});

sample

参考URL

aria-invalid - WAI-ARIA - W3C

登録日 : 2015年10月11日最終更新日 : 2015年10月12日

HTMLリファレンス

aria-invalid属性

参考URL

同じカテゴリー(WAI-ARIA)のエントリー

検索

スポンサードリンク

バージョン

リファレンス