Reactガイドを読んでいくその25

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

アクセシビリティ

何回かに分けてやっていきます。

アクセシブルなフォーム

ラベル付け

HTML フォームコントロールにはアクセシブルな形でのラベル付けが必要なので入力補助になるような説明を用意する。
Reactの場合基本的にHTMLと同様の方法で利用することが可能だが、JSXではforはhtmlForとして記述されるので注意が必要。

HTMLの場合

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>

Reactの場合

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

ユーザーへのエラー通知

HTMLと同様、Reactでもフォームのエラーを検知してユーザへ通知する必要があります。
その方法はHTMLと同様でよい。

developer.mozilla.org

今日はここまで。