📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 105行目: | 105行目: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<form accept-charset="UTF-8"> | <form accept-charset="UTF-8"> | ||
</syntaxhighlight> | |||
<br> | |||
===== role属性 ===== | |||
role属性は、role属性はタグの役割を明確に示し、Webページのアクセシビリティを向上させるためのものである。<br> | |||
role属性およびaria属性を活用することにより、支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br> | |||
<br> | |||
formタグに関連する主なrole値 | |||
* role="form" | |||
*: フォームセクションであることを明示的に示す。 | |||
*: formタグ自体にはデフォルトでこの役割があるため、通常は省略可能である。 | |||
*: <br> | |||
* role="group" | |||
*: 関連する入力項目をグループ化する。 | |||
*: 例: 住所や個人情報等、関連性の高いフィールドをまとめる場合に使用する。 | |||
<br> | |||
===== aria属性 ===== | |||
role属性およびaria属性を活用することにより、支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br> | |||
<br> | |||
* aria-label | |||
*: 要素の説明ラベルを提供する。 | |||
*: 視覚的なラベルがない場合に有効である。 | |||
*: 例: aria-label="会員登録フォーム" | |||
*: <br> | |||
* aria-labelledby | |||
*: 別の要素のIDを参照してラベルとして使用する。 | |||
*: <syntaxhighlight lang="html"> | |||
<h2 id="form-title">お問い合わせ</h2> | |||
<form aria-labelledby="form-title"> | |||
</syntaxhighlight> | |||
* aria-required | |||
*: 入力必須項目であることを示す。 | |||
*: HTML5のrequired属性と併用することが推奨される。 | |||
*: 例: aria-required="true" | |||
*: <br> | |||
* aria-invalid | |||
*: 入力値が無効であることを示す。 | |||
*: バリデーションエラー時に使用する。 | |||
*: 例: aria-invalid="true" | |||
*: <br> | |||
* aria-describedby | |||
*: 補足説明を提供する要素との関連付け | |||
*: <syntaxhighlight lang="html"> | |||
<input aria-describedby="email-hint"> | |||
<div id="email-hint">会社のメールアドレスを入力してください</div> | |||
</syntaxhighlight> | |||
* aria-errormessage | |||
*: エラーメッセージを示す要素との関連付け | |||
*: <syntaxhighlight lang="html"> | |||
<input aria-errormessage="email-error"> | |||
<div id="email-error">正しいメールアドレスの形式で入力してください</div> | |||
</syntaxhighlight> | |||
* aria-expanded | |||
*: 展開可能な要素の状態を示す。 | |||
*: アコーディオン形式のフォームで使用する。 | |||
*: 例: aria-expanded="false" | |||
*: <br> | |||
* aria-controls | |||
*: 制御対象となる要素のIDを示す。 | |||
*: <syntaxhighlight lang="html"> | |||
<button aria-controls="address-fields">住所を入力</button> | |||
<div id="address-fields"> | |||
<!-- 住所入力フィールド --> | |||
</div> | |||
</syntaxhighlight> | |||
<br> | |||
<u>※注意</u><br> | |||
* role属性とaria属性は適切に組み合わせて使用することで効果を発揮する。 | |||
* 過剰な指定は逆に混乱を招く可能性がある。 | |||
* ネイティブのHTML要素が提供する機能を優先的に使用する。 | |||
* スクリーンリーダーでの動作確認が推奨される。 | |||
<br> | |||
==== 使用例 : アクセシブルなフォーム ==== | |||
以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br> | |||
<br> | |||
アクセシビリティ対応のポイントを以下に示す。<br> | |||
* role="form"属性およびaria-label属性で、フォームの目的を明確に示している。 | |||
* labelタグおよびinputタグを、id属性とfor属性で関連付けている。 | |||
* 必須項目には、aria-required="true"属性を設定している。 | |||
* エラー状態は、aria-invalid="true"属性で示し、エラーメッセージをaria-errormessageで関連付けている。 | |||
* 補足説明は、aria-describedbyで関連付けている。 | |||
<br> | |||
これにより、スクリーンリーダーユーザは、フォームの目的、各入力項目の意味や必須 / 任意項目、エラーが発生した場合のフィードバックを得ることができる。<br> | |||
また、入力項目に関する補足説明を確認できる。<br> | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<form role="form" aria-label="お問い合わせフォーム"> | |||
<!-- フォームの各セクションをグループ化 --> | |||
<div role="group" aria-labelledby="personal-info"> | |||
<h2 id="personal-info">個人情報</h2> | |||
<!-- ラベルとフォーム要素を明確に関連付け --> | |||
<div class="form-field"> | |||
<label for="fullname" id="name-label"> | |||
氏名 | |||
<span aria-label="必須" class="required">*</span> | |||
</label> | |||
<input type="text" id="fullname" name="fullname" aria-required="true" aria-describedby="name-help" required> | |||
<div id="name-help" class="help-text"> | |||
氏名をフルネームで入力してください | |||
</div> | |||
</div> | |||
<!-- エラーメッセージの適切な関連付け --> | |||
<div class="form-field"> | |||
<label for="email"> | |||
メールアドレス | |||
<span aria-label="必須" class="required">*</span> | |||
</label> | |||
<input type="email" id="email" name="email" aria-invalid="true" aria-errormessage="email-error" required> | |||
<div id="email-error" class="error" role="alert"> | |||
有効なメールアドレスを入力してください | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 送信ボタン --> | |||
<button type="submit" aria-label="フォームを送信">送信する</button> | |||
</form> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||