🐈

利用者にやさしい（アクセシブルな）フォームのコーディングを目指す

に公開
HTML 5
tech

fieldsetとlegendで囲ってあげる

fieldsetはform専用のタグ
グループごとに囲い、タイトルはlegendでつける
セマンティックレベルがUPする

<fieldset>
	<legend>お客様情報のご入力</legend>
	<div>
		<label for="cust_name">氏名</label>
		<input type="text" name="cust_name" id="cust_name">
	</div>
	<div>
		<label for="cust_tel">電話番号</label>
		<input type="tel" name="cust_tel" id="cust_tel">
	</div>
	<div>
		<label for="cust_mail">email</label>
		<input type="email" name="cust_mail" id="cust_mail">
	</div>
</fieldset>
<fieldset>
	<legend>お問い合わせ内容のご入力</legend>
	<div>
		<label for="inquiry">お問い合わせ内容</label>
		<textarea name="inquiry" id="inquiry"></textarea>
	</div>
</fieldset>

必須にはrequired

必須のinputにはrequiredをつける
これにより、ブラウザが必須項目だと認識してくれる
セマンティックレベルがUPする

<input type="text" name="cust_name" id="cust_name" required>

数字で打つ内容にはinputmode="numeric"

スマホで数字キーボードが出てくれるので、入れてあげると利用者にやさしい

<input type="tel" name="cust_tel" id="cust_tel" inputmode="numeric">

autocomplete属性を入れてあげる

これを設定してあげるとユーザーの情報が自動入力されるので、やさしさUP
積極的に入れよう

<input type="tel" name="cust_tel" id="cust_tel" autocomplete="tel">
コード 意味
name 氏名
given-name 名
family-name 姓
organization 会社名・所属名
organization-title 役職名
email メアド
tel 電話番号
postal-code 郵便番号
address-level1 都道府県
address-level2 市区町村
street-address 番地
current-password 今使ってるパスワード
new-password 新規パスワード
one-time-code ワンタイムパスワード

aria-describedbyつけてあげる

これを入れてあげるとブラウザがエラーメッセージとinputのつながりを認識してくれて
セマンティックレベルUP

<input type="text" id="cust_name" aria-describedby="cust_name_error">
<p id="cust_name_error" class="error">お名前を入力してください</p>

エラーになったinputにaria-invalid="true"つけてあげる

これを入れてあげるとブラウザがエラーの場所を認識してくれる
セマンティックレベルUP

<input id="cust_name" aria-invalid="true" aria-describedby="cust_name_error">
<p id="cust_name_error" class="error">お名前を入力してください</p>

エラーメッセージにaria-live="polite"つけてあげる

これを入れてあげるとブラウザがエラーを読み上げてくれる
やさしさUP

<input id="cust_name" aria-invalid="true" aria-describedby="cust_name_error">
<p id="cust_name_error" class="error" aria-live="polite">お名前を入力してください</p>

Discussion