<input>VoiceOverの読み上げが正常に作動するHTMLパターン

VoiceOverに限らず、読み上げ機能を使ってスムーズに手続きを行うためには「順番に読めば理解できる」構造になっていることが大事です。

手続きが必要な表示でのポイント

• 順番に読めばわかる
• 説明は動作の直前におく
• 説明が重複しない

ではhtmlの<input>タグはどのように書けばいいのでしょうか？

<div>
	<div>名前をご記入ください<br>
	お名前はひらがなで入力してください
	</div>
	<label for="test1">なまえ</label>
	<input id="test1" type="text">
</div>

<label>タグのforと<input>のidを関連づけることで読み上げがスムーズになります。

やり方は色々ありますが、MDNを確認し正規の記述を行うことでVoiceOverの読み上げに対応することができます。最後はiPhoneのVoiceOverまたはAndoroidのTalkBackで確認し、実際に自分で手続きをしてみると確実です。

合言葉：VoiceOverで読み上げが出来ないものはただのバグ！

＜この記事について＞
特定非営利活動法人スマートアクセシビリティ、一般社団法人Togatherlandで開催されたアクセシブルなWEB勉強会で学んだことをまとめています。