| (同じ利用者による、間の1版が非表示) | |||
| 40行目: | 40行目: | ||
<br> | <br> | ||
==== 属性 ==== | ==== 属性 ==== | ||
===== デフォルト値 ===== | |||
* action属性 | |||
*: デフォルトは現在のページのURL | |||
*: つまり、action属性を指定しない場合はフォームは同じページに送信される。 | |||
*: <br> | |||
* method属性 | |||
*: デフォルトは"get" | |||
*: <br> | |||
* target属性 | |||
*: デフォルトは_self | |||
*: 同じウインドウ / タブで結果を表示する。 | |||
<br> | |||
これらの属性は明示的に指定することが推奨されるが、省略した場合でもデフォルト値によって正常に動作する。<br> | |||
<br> | |||
===== action属性 ===== | ===== action属性 ===== | ||
フォームのデータを送信する先のURLを指定する。<br> | フォームのデータを送信する先のURLを指定する。<br> | ||
| 121行目: | 135行目: | ||
<br> | <br> | ||
===== aria属性 ===== | ===== aria属性 ===== | ||
aria属性およびrole属性を活用することにより、スクリーンリーダー等の支援技術を使用するユーザにとって理解・操作しやすいフォームが作成できる。<br> | |||
<br> | <br> | ||
* aria-label | * スクリーンリーダー向け | ||
*: 要素の説明ラベルを提供する。 | ** aria-label | ||
*: 視覚的なラベルがない場合に有効である。 | **: 要素の説明ラベルを提供する。 | ||
*: 例: aria-label="会員登録フォーム" | **: 視覚的なラベルがない場合に有効である。 | ||
*: <br> | **: 例: aria-label="会員登録フォーム" | ||
* aria-labelledby | **: <br> | ||
*: 別の要素のIDを参照してラベルとして使用する。 | ** aria-labelledby | ||
*: <syntaxhighlight lang="html"> | **: 別の要素のIDを参照してラベルとして使用する。 | ||
**: <syntaxhighlight lang="html"> | |||
<h2 id="form-title">お問い合わせ</h2> | <h2 id="form-title">お問い合わせ</h2> | ||
<form aria-labelledby="form-title"> | <form aria-labelledby="form-title"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* | **: <br> | ||
** aria-describedby | |||
**: 補足説明を提供する要素との関連付け | |||
**: <syntaxhighlight lang="html"> | |||
*: <br> | |||
* | |||
* | |||
* | |||
*: 補足説明を提供する要素との関連付け | |||
*: <syntaxhighlight lang="html"> | |||
<input aria-describedby="email-hint"> | <input aria-describedby="email-hint"> | ||
<div id="email-hint">会社のメールアドレスを入力してください</div> | <div id="email-hint">会社のメールアドレスを入力してください</div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* aria-errormessage | **: <br> | ||
*: エラーメッセージを示す要素との関連付け | ** aria-live | ||
*: <syntaxhighlight lang="html"> | **: 動的なコンテンツの更新を通知する。 | ||
<br> | |||
* 支援技術全般向け (スクリーンリーダー以外も含む) | |||
** aria-required | |||
**: aria-required属性を"true"に指定する場合、スクリーンリーダー等の支援技術に対して、入力が必須であることを伝える。 | |||
**: 視覚的な表示には影響しない。 | |||
**: <br> | |||
**: HTML5のrequired属性は、Webブラウザに対して入力を必須として、フォーム送信時のバリデーションを行う。 | |||
**: また、視覚的なUI表示にも影響する。 | |||
**: したがって、aria-required属性とrequired属性を有効にすることにより、支援技術のユーザへのアクセシビリティを確保して、一般ユーザへのバリデーションも確保することができる。 | |||
**: そのため、aria-required属性とrequired属性は同時に併用することが推奨される。 | |||
**: 例: aria-required="true" | |||
**: <br> | |||
** aria-expanded | |||
**: 展開可能な要素の状態を示す。 | |||
**: アコーディオン形式のフォームで使用する。 | |||
**: 例: aria-expanded="false" | |||
**: <br> | |||
** aria-hidden | |||
**: 支援技術から要素を隠す。 | |||
** aria-disabled | |||
**: 無効状態を示す。 | |||
**: <br> | |||
** aria-errormessage | |||
**: エラーメッセージを示す要素との関連付け | |||
**: <syntaxhighlight lang="html"> | |||
<input aria-errormessage="email-error"> | <input aria-errormessage="email-error"> | ||
<div id="email-error">正しいメールアドレスの形式で入力してください</div> | <div id="email-error">正しいメールアドレスの形式で入力してください</div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* aria- | <br> | ||
*: | * 状態管理 | ||
*: | ** aria-invalid | ||
*: 例: aria- | **: 入力値が無効であることを示す。 | ||
*: <br> | **: バリデーションエラー時に使用する。 | ||
* aria-controls | **: 例: aria-invalid="true" | ||
*: 制御対象となる要素のIDを示す。 | **: <br> | ||
*: <syntaxhighlight lang="html"> | ** aria-checked | ||
**: チェックボックスの状態 | |||
**: <br> | |||
** aria-selected | |||
**: 選択状態 | |||
**: <br> | |||
** aria-pressed | |||
**: ボタンの押下状態 | |||
<br> | |||
* セマンティクス (意味構造) の補完 | |||
** aria-controls | |||
**: 制御対象となる要素のIDを示す。 | |||
**: <syntaxhighlight lang="html"> | |||
<button aria-controls="address-fields">住所を入力</button> | <button aria-controls="address-fields">住所を入力</button> | ||
<div id="address-fields"> | <div id="address-fields"> | ||
| 169行目: | 212行目: | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
**: <br> | |||
** aria-role | |||
**: 要素の役割を定義する。 | |||
**: <br> | |||
** aria-controls | |||
**: 制御対象の要素を指定する。 | |||
**: <br> | |||
** aria-owns | |||
**: 要素間の所有関係を示す。 | |||
<br> | |||
aria属性は、支援技術だけでなく、アプリケーションの状態管理やテスト自動化のためにも使用されることがある。<br> | |||
また、WAI-ARIAの仕様に沿って実装することにより、アクセシビリティの向上だけでなく、コードの保守性や再利用性も高まる。<br> | |||
<br> | <br> | ||
<u>※注意</u><br> | <u>※注意</u><br> | ||
| 176行目: | 231行目: | ||
* スクリーンリーダーでの動作確認が推奨される。 | * スクリーンリーダーでの動作確認が推奨される。 | ||
<br> | <br> | ||
==== 使用例 : アクセシブルなフォーム ==== | ==== 使用例 : アクセシブルなフォーム ==== | ||
以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br> | 以下の例では、WAI-ARIAの属性を活用しながら、アクセシブルなフォームを作成している。<br> | ||