セマンティックロールを持つ要素にaria-roledescriptionを使用する

ルールID: aria-roledescription
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

深刻
Minor
Critical

Disabilities Affected

  • 視覚障害
  • 視聴覚障害
  • 運動障害

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 4.1.2: 必須: Name, Role, Value

WCAG 達成基準 [WCAG 2.0 (A)]

  • 4.1.2: 必須: Name, Role, Value

WCAG 達成基準 [WCAG 2.2 (A)]

  • 4.1.2: 必須: Name, Role, Value

EN 301 549 Guidelines

  • 9.4.1.2: 必須: Name, Role, Value

修正方法

ARIA は提供されている任意のロールにどの属性が使用できるかということと、各属性については、使用できる箇所を明確に定義しています。各属性の詳細は各ロールおよび/または各属性についての資料を調べることで見つけられます。

aria-roledescription には二つの不合格になる条件、三つの合格になる条件、そして二つの保留になる条件があります。

aria-roledescription に不合格になる条件:

aria-roledescription は role 値を指定するべき要素に role 値がない場合、その要素に対して不合格という結果を返します。

  • <p aria-roledescription="my paragraph" id="fail1">paragraph</p>
  • <div aria-roledescription="my div" id="fail2">div</div>

aria-roledescription に合格する条件:

  • aria-roledescription明確にサポートされた role を持つ要素に対して合格という結果を返します。
  • aria-roledescription暗黙的にサポートされた role を持つ要素に対して合格という結果を返します。
  1. <img aria-roledescription="my img" src="foo.png" id="pass1" />
  2. <button aria-roledescription="my button" id="pass2">button</button>
  3. <div role="combobox" aria-roledescription="my combobox" id="pass3"></div>

aria-roledescription に保留になる条件:

aria-roledescription はサポートされていない role を持つ要素に対して未定義という結果を返します。

  1. <h1 aria-roledescription="my heading" id="incomplete1">heading</h1>
  2. <div role="rowgroup" aria-roledescription="my row" id="incomplete2"></div>

特定のリファレンス: どのARIA属性がHTML要素に対して使用可能もしくは使用するべきではないかについての詳細は、 ARIA in HTML - Document conformance requirements for use of ARIA attributes in HTML 新規ウィンドウで開きます をご確認ください。aria-roledescription 属性を使用するための詳細については、 ARIA in HTML - aria-roledescription (property) 新規ウィンドウで開きます をご確認ください。

一般的なリファレンス: ARIAについての一般的な情報は、次の外部リソースをご参照ください。ARIAは主にweb開発者やプログラマーによって使用されています。ARIAを有効的に実装するには、JavaScriptのスキルが必要とされます。ARIA rolearia-roledescription の組み合わせが有効であることを求める仕様のプログラミングロジックの複雑さやニュアンスにより、ARIAを習得するのは長い道のりになる可能性があります。

なぜ重要なのか

要素の明確もしくは暗黙的な role 値と衝突する適切ではない aria-roledescription 属性値はwebページのアクセシビリティを損なう可能性があります。衝突している aria-roledescription 属性値はアプリケーションに対してアクセシビリティ上の影響を与えない可能性があり、そして、アプリケーション全体に対してアクセシビリティを無効にするような動作を引き起こす可能性があります。

aria-roledescription 属性がWAI-ARIA 1.1と合わないHTML要素に適用された場合、aria-roledescription 値と暗黙的もしくは明確な要素の role 値の間でセマンティクスが衝突します。その場合、支援技術製品は意図したユーザーインターフェース(UI)体験を正確に表現しない、無意味なUI情報を報告する可能性があります。

ルールの説明

aria-roledescription 属性が明確もしくは暗黙的な role 値を持った要素にのみ使用されていることを確認します。

仕組みについて (簡単に言うと)

要素の明確または暗黙的な role 値を正確に説明するには、aria-roledescription 値を使用します。

リソース

axe 4.10 ルールの一覧 を参照する

この情報は役に立ちましたか?

すでにフィードバックをいただきました、ありがとうございます。.

あなたの回答は次のとおりです。

この情報は役に立ちましたか?
フィードバックが提出された日付/時刻: