Nightwatchでのアクセシビリティ（A11y）テスト

概要

アクセシビリティテストを標準化するために、W3Cは、すべての人にWebサイトを包括的にするための取り組みを標準化するためにWeb Content Accessibility Guidelines（WCAG）を公開しました。 v2.3以降、アクセシビリティテストのサポートは、Deque Systemsが開発したaXe-coreパッケージを使用して、Nightwatchに組み込まれるようになりました。

アクセシビリティテストは、WCAGルールおよびその他の業界で受け入れられているベストプラクティスに基づいたヒューリスティックセットに対してレンダリングされたDOMを監査します。 aXeライブラリには、アクセシビリティテストに関する90以上の異なるルールがあり、自動的にWCAGの問題の57％を検出します。

すべてのルールを実行する

最初に.axeInject()コマンドを使用してaXeライブラリを注入し、次に以下に示すようにaxeRun()コマンドを使用してすべてのアクセシビリティテストを実行します。

describe('accessibility testing', function() {
  

  it('run all accessibility rules', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body');
  });
});

選択したルールを実行する

または、以下に示すように、ルールIDを配列で渡すことで、選択したテストのみを実行することもできます。

describe('accessibility testing', function() {
  

  it('accessibility rule subset', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body', {
        runOnly: ['color-contrast', 'image-alt'],
      });
  });
});

選択したルールを無効にする

すべてのテストを実行し、いくつかのテストを除外することもできます。

describe('accessibility testing', function() {
  

  it('accessibility rule subset', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body', {
        rules: {
            'color-contrast': {
                enabled: false
            },
            'region': {
                enabled: false
            }
        }
    });
  });
});

ルールIDの完全なリストは、Axe Githubページで確認できます。

おすすめのコンテンツ