ARIA ラベル エラー

テキスト

要素の型は、入力 、ボタン、イメージ ボタン、またはランドマーク しますが、アクセス可能な名前はありません。

種類

エラー

形容

このエラーは次の場合に適用されます。

• フォーム入力フィールド:
  • HTML タグ—input[type= "text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime|local|time|month|number|range|search|url"], select, datalist, and textarea.
  • WAI-ARIA 役割—チェックボックス, コンボボックス, リストボックス, ラジオグループ, ラジオ, テキストボックス, ツリー, スライダー, スピンボタン.
• 画像/画像ボタン/ボタン
  • HTML タグ—img, input[type="image|button"], and button.
  • WAI-ARIA ロール— imgと ボタン します。
• ランドマーク
  • WAI-ARIA ロール —地域、バナー、補完的な、コンテンツ情報、フォーム、メイン、ナビゲーション、および検索 。

手記

AccChecker では、内部 HTML コンテンツに基づいてアクセス可能な名前が既定で設定されている要素に対しても、このエラーが表示されます (上記の例の バナー 要素を参照してください)。 このような場合は、このエラーを抑制できます。

 

フォーム フィールド (たとえば、入力、の選択、textarea)、画像、ボタン、ランドマーク (論理領域を表すタグ) などの意味的に重要なすべての UI 要素には、スクリーン リーダーがそれらを正しく読み上げることができるように、アクセス可能な名前が必要です。

このエラーを解決するには、次のいずれかの方法でアクセス可能な名前を設定します (優先順に表示されます)。

• フォーム フィールド: ラベル タグを使用し、属性の をターゲット フィールドの ID 値に設定します。
• 画像/画像ボタン: alt 属性を設定します。
• ボタン: ボタンのキャプション テキストを設定します。
• 任意の要素の場合:
  • aria-labelledby 属性: アクセス可能な名前文字列を含む要素の id 値に設定します。
  • aria-label 属性: アクセス可能な名前文字列に設定します。
  • タイトル 属性: アクセス可能な名前の文字列に設定します (ヒントも作成します)。

例

<!-- 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 >