Axe DevTools RSpec

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

RSpecベースのアクセシビリティテスト用のaxe-devtools-rspec gemのセットアップと使用方法

Not for use with personal data

このaxe-devtools-rspec gemは、指定されたページがaxeクリーンであるかどうかを評価するためのカスタムマッチャーを提供します。

このgemはaxe-core-rspec gemによって提供される手順の上に拡張されています。

セットアップと使用方法

Deque's registryへのアクセスがあることを確認してください。ない場合は、setup documentationを参照してください。

RSpec gemをセットアップするには、次の手順に従います：

  • axe-devtools-rspecをGemfileまたはgemspecファイルに追加し、bundle installを実行します。
gem "axe-devtools-rspec"
spec.add_dependency "axe-devtools-rspec"
  • axe-rspecを要求し、これはRSpecにカスタムマッチャーを拡張します。理想的には、これはファイルspec/spec_helper.rbで指定されます。
require 'axe-rspec'
  • 選択したWebDriverとともにgemを使用します。

API

マッチャー - Be axe Clean (be_axe_clean)

axeアクセシビリティRSpecチェックを構築するには、まずexpect(page).to be_axe_cleanを開始し、必要な条項を追加します。（pageオブジェクトは選択したWebDriverからのものです。）

マッチャー - Be Audited for Accessibility (be_audited_for_accessibility)

axeアクセシビリティRSpecチェックを構築するには、expect(page).to be_audited_for_accessibilityから開始し、必要なチェーン可能な条項を追加します。

expect(page).to be_audited_for_accessibility

条項

条項とはbe_axe_cleanカスタムマッチャーのためのチェーン可能なメソッドです。設定可能な条項により、テストと期待においてより細かい粒度を提供します。

within- 包含条項

このwithin条項は、ページのどの要素をチェックすべきかを指定します。有効なCSS selectorが提供される必要があります。within条項は、単一のセレクタ、セレクタの配列、またはセレクタを含むiframeを説明するハッシュを受け入れます。

詳細については、context parameter documentationを参照してください。

例:

# Simple selector
expect(page).to be_axe_clean.within '#selector1'

# Compound selector
# Include all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_audited_for_accessibility.within '#selector1 .selector2'

# Multiple selectors
# Include the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2'

# IFrame selector
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Include the element with id 'selector1' inside the IFrame with id 'frame1'
# Include the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_audited_for_accessibility.within(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors *and* IFrame selector
# Include the element with id 'selector1' *and* all elements with class 'selector2'
# Include the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.within '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Include the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.within(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
excluding- 除外条項

このexcluding条項は、ドキュメントのどの要素を無視すべきかを指定します。有効なCSS selectorが提供される必要があります。excluding条項は、単一のセレクタ、セレクタの配列、またはセレクタを含むiframeを説明するハッシュを受け入れます。

詳細については、context parameter documentationを参照してください。

例:

# Simple selector
expect(page).to be_audited_for_accessibility.excluding '#selector1'

# Compound selector
# Exclude all elements with the class 'selector2' inside the element with id 'selector1'
expect(page).to be_axe_clean.excluding '#selector1 .selector2'

# Multiple selectors
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2'

# IFrame selector
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding iframe: '#frame1', selector: '#selector1'

# Multiple IFrame selectors
# Exclude the element with id 'selector1' inside the IFrame with id 'frame1'
# Exclude the element with id 'selector2' inside the IFrame with id 'frame2'
expect(page).to be_axe_clean.excluding(
  {iframe: '#frame1', selector: '#selector1'},
  {iframe: '#frame2', selector: '#selector2'}
)

# Simple selectors with IFrame selector
# Exclude the element with id 'selector1' *and* all elements with class 'selector2'
# Exclude the element with id 'selector3' inside the IFrame with id 'frame'
expect(page).to be_audited_for_accessibility.excluding '#selector1', '.selector2', iframe: '#frame', selector: '#selector3'

# Nested IFrame selectors
# Exclude the element selector1 inside the IFrame with id 'frame2',
# inside the IFrame with id 'frame1'
expect(page).to be_axe_clean.excluding(iframe: '#frame1', selector:
  {iframe: '#frame2', selector: '#selector1'}
)
according_to- アクセシビリティ基準（タグ）条項

このaccording_to条項は、ページをチェックするために使用すべきアクセシビリティ基準（または基準）を指定します。アクセシビリティ基準は名前で指定されます。according_to条項は、単一のタグまたはタグの配列を受け入れます。

許容されるtag names are documentedとそれぞれのタグに対応するcomplete listing of rules。

# Single standard
expect(page).to be_audited_for_accessibility.according_to :wcag2a

# Multiple standards
expect(page).to be_axe_clean.according_to :wcag2a, :section508
checking- チェックルール条項

このchecking条項は、指定されたタグ（あれば）やデフォルトのルールセットに加えて、どのadditionalルールをチェックするかを指定します。checking条項は、単一のルールまたはルールの配列を受け入れます。

詳細については、有効なルールIDの一覧をrules documentationで参照してください。

# Checking a single rule
expect(page).to be_axe_clean.checking :label

# Checking multiple rules
expect(page).to be_axe_clean.checking :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_audited_for_accessibility.according_to(:wcag2a).checking(:tabindex)
checking_only- 専用ルール条項

このchecking_only条項は、どのルールを排他的にチェックするかを指定します。このマッチャーを使用することで、リスト外のallルールは除外されます。

# Checking a single rule
expect(page).to be_axe_clean.checking_only :label

# Checking multiple rules
expect(page).to be_audited_for_accessibility.checking_only :label, :tabindex
skipping- スキップルール条項

このskipping条項は、どのルールをスキップするかを指定します。これにより（タグ条項を通じて）提供されたアクセシビリティ基準を持ちながら、特定のルールを無視することができます。ルールはカンマで区切られたルールIDで指定されます。

詳細については、有効なルールIDの一覧をrules documentationで参照してください。

# Skipping a single rule
expect(page).to be_axe_clean.skipping :label

# Skipping multiple rules
expect(page).to be_audited_for_accessibility.skipping :label, :tabindex

# Example specifying an additional best practice rule in addition to all rules in the WCAG2A standard
expect(page).to be_axe_clean.according_to(:wcag2a).skipping(:label)
アクセシビリティの監査のためにマッチャーにのみ利用可能な条項

このアクセシビリティのための監査マッチャーは、2つの追加の節をサポートします。

according_to_ruleset- ルールセット節

ルールセット節 ルールセットに従って は、ページをチェックするために使用する単一のルールセット（例: 508、wcag2、wcag2.1）を指定するのに役立ちます。

 expect(page)
      .to be_audited_for_accessibility
      .according_to_ruleset('wcag2.1')
logging_results- ログ結果節

ベースマッチャーと節から結果をログに記録するには、以下のようにチェイン可能なメソッドログ結果を呼び出します。

expect(page)
  .to be_audited_for_accessibility
  .logging_results({
    output_directory: 'attest-results',
    test_machine: 'Jenkins CI Server',
    test_suite_name: 'Landing Page',
    ui_state: 'Page Load',
    user_agent: 'Headless Chrome'
  })
節間の相互運用性

説明されたすべての節は、メソッドチェーンで組み合わせて使用することができます。以下にいくつかの例を示します。

expect(page).to be_axe_clean.within('.main', '.header').excluding('.footer')

expect(page).to be_audited_for_accessibility.excluding('#sidebar').according_to(:wcag2a, :wcag2aa).skipping(:color-contrast)

expect(page).to be_axe_clean.within('.main').checking_only :document-title, :label

expect(page).to be_audited_for_accessibility.according_to(:best-practice).checking(:aria-roles, :definition-list)

高度なAPIの使用方法

次のadvanced usageを参照して、APIを設定する方法を確認してください。

  • カスタムルール
  • Axeソースへのカスタムパス
  • 使用記録
  • レポート

Is this page helpful?

Help us improve this page

Still need help?