ARIA ラベル エラー
要素は 入力、 ボタン、 イメージ ボタン 、 ランドマーク の種類ですが、アクセス可能な名前がありません。
エラー
このエラーは次の場合に適用されます。
- フォーム入力フィールド:
- HTML タグ— input[type= "text|password|checkbox|radio|file|email|tel|color|datetime|datetime-local|time|week|month|number|range|search|url"], select, datalist, and textarea.
- WAI-ARIA ロール — チェックボックス、 コンボボックス、 リストボックス、 無線グループ、 無線、 テキストボックス、 ツリー、 スライダー、 スピンボタン。
- 画像/画像ボタン/ボタン
- HTML タグ — img、 input[type="image|button"]、および button。
- WAI-ARIA ロール — img と ボタン。
- ランドマーク
- WAI-ARIA ロール — リージョン、バナー、補完的、contentinfo、form、メイン、ナビゲーション、検索。
注意
AccChecker は、内部 HTML コンテンツに基づいてアクセス可能な名前が既定で設定されている要素に対しても、このエラーを表示します (上記の例の バナー 要素を参照してください)。 このような場合は、このエラーを抑制できます。
フォーム フィールド ( 入力、 選択、 テキストエリアなど)、画像、ボタン、ランドマーク (論理領域を表すタグ) などの意味的に重要なすべての UI 要素には、スクリーン リーダーが正しく読み上げられるようにアクセス可能な名前が必要です。
このエラーを解決するには、次のいずれかの方法でアクセス可能な名前を設定します (優先順に表示されます)。
- フォーム フィールド: ラベル タグを使用し、 for 属性をターゲット フィールドの id 値に設定します。
- 画像/画像ボタン: alt 属性を設定します。
- ボタン: ボタンをテキストキャプション設定します。
- 任意の要素の場合:
- aria-labelledby 属性: アクセス可能な名前文字列を含む要素の id 値に設定します。
- aria-label 属性: アクセス可能な名前文字列に設定します。
- title 属性: アクセス可能な名前文字列に設定します ( ツールヒントも作成します)。
<!-- For landmark tags, set the accessible name by using the aria-labelledby
attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">
<!-- For input fields, use the LABEL tag with the for attribute. -->
<label for="fullName">Full Name</label>
<input id="fullName" type="text" />
<!-- If there is no visible text that can be referenced, set the accessible
name by using aria-label or title attributes. -->
<input type="file" aria-label="Your photo"/>
<!-- For images, use the alt attribute. -->
<img src="…" alt="Uploaded photo" />
<!-- For buttons, caption text is also used as the accessible name. -->
<button onclick="processForm()">Send</button>
<!-- For image buttons, use the alt attribute to define the accessible name. -->
<input type="image" src="images/moreinfo.png" alt="Show more info"/>
<!-- For elements with inner text this error can be suppressed because the
accessible name is set by default. -->
<div role="banner">Accessible name set by default</div>
</form >