【E2Eテスト】Playwrightでアクセシビリティを自動テストする

はじめに

今回はE2Eテストツール「Playwright」を使って、Webアクセシビリティの自動テストを試してみました。

https://playwright.dev/docs/accessibility-testing

アクセシビリティについて

Webアクセシビリティについて、政府広報オンラインの記事で以下のように解説されています。

• ウェブアクセシビリティとは？ 分かりやすくゼロから解説！

利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。

ウェブサイトがウェブアクセシビリティに配慮して作られていないと、利用者の症状や状況によっては、ウェブサイトを介して情報を入手できなかったり、ウェブ上で行う申込や手続などのサービスが利用できなくなったりするなど、社会生活で大きな不利益が生じます。さらには、災害時に避難場所などの必要な情報を得られない状況となれば生命の危機に直面するおそれさえあります。
こうした理由から、ウェブサイトで提供している情報やサービスを常に誰もが安心して利用できるように、ウェブアクセシビリティを確保する必要があるのです。

民間事業者の合理的配慮が義務化
令和6年(2024年)4月1日から、障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）の改正により、国や地方公共団体などに義務付けられている合理的配慮の提供が、民間の事業者も義務化されました。

また、その合理的配慮を的確に行うため、環境の整備が努力義務となっており、ウェブサイトの場合ではJIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。
企業の社会的な責任として合理的配慮を行う事業者が増えることは、私たちがウェブサイトを情報インフラとして利用する上でとても大切なことです。

誰もが利用しやすいWebサイトをいろいろ配慮して作りましょう、
民間事業者がWebサイトを作る場合も配慮が義務化されました、とのこと。

アクセシビリティのガイドライン

配慮のガイドラインとして「JIS X 8341-3:2016」があり、ウェブアクセシビリティ基盤委員会の記事で以下のように解説されています。

• アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC）
• JIS X 8341-3:2016 解説

2004年6月に制定されたJIS X 8341-3は、2010年8月、ウェブアクセシビリティの事実上の国際標準であるW3Cの発行したWeb Content Accessibility Guidelines（WCAG）2.0と協調するよう改正されました。その後、2012年には WCAG 2.0 がそのまま国際規格ISO/IEC 40500:2012となり、2016年3月には、JIS X 8341-3もISO/IEC 40500:2012との一致規格として改正されました。

これにより、WCAG 2.0、ISO/IEC 40500:2012、JIS X 8341-3:2016の3つが全て技術的に同じ内容になり、W3Cの勧告、国際規格のISO、国内規格のJISが完全に統一されることになります。

Webアクセシビリティの国際規格「WCAG」をもとに、「JIS X 8341-3:2016」が作られたとのこと。
Playwrightでのアクセシビリティテストも、「WCAG」をもとに検証がおこなわれます。

• Accessibility testing #Scanning for WCAG violations　| Playwright

Scanning for WCAG violations
By default, axe checks against a wide variety of accessibility rules. Some of these rules correspond to specific success criteria from the Web Content Accessibility Guidelines (WCAG), and others are "best practice" rules that are not specifically required by any WCAG criterion.

なお、「WCAG」は改版されており、2.2がW3C勧告の後に標準化される予定です。

• Web Content Accessibility Guidelines (WCAG) 2.0
• Web Content Accessibility Guidelines (WCAG) 2.1
• Web Content Accessibility Guidelines (WCAG) 2.2

Playwrightでアクセシビリティテスト

前置きが長くなりましたが、Playwrightでアクセシビリティテストを実行してみます。

1. 「Playwright」をインストールします。
   • npm init playwright@latest
   • 参考：Installation | Playwright
2. アクセシビリティテスト用ライブラリ「axe-core」をインストールします。
   • npm i @axe-core/playwright
   • 参考：@axe-core/playwright - npm
3. テストファイルに、アクセシビリティをテストするコードを記述します。
   • 参考：Writing tests | Playwright
   • 以下がテストコードの例です
     1. テスト対象とするPlaywrightのサイトにアクセスします
     2. アクセスしたサイトで、アクセシビリティをスキャンします
     3. スキャン結果から、アクセシビリティのルールに沿っていない点を検証します

example.spec.ts

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('accessibility test', async ({ page }) => {  
  await page.goto('https://playwright.dev/');

  const accessibilityScanResults = await new AxeBuilder({ page })
    .analyze();

  expect(accessibilityScanResults.violations).toEqual([]);
});

4. テストを実行します。
   • npx playwright test
   • npx playwright test --ui　　※UIモード

テスト結果の確認

「failed」、、、2種類の警告が発生し、テストに失敗しました🥺
警告の内容を確認していきます。

【1】 Headings should not be empty

+     "help": "Headings should not be empty",
+     "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/empty-heading?application=playwright",

+         "html": "<h3></h3>",
+         "impact": "minor",

• Headings should not be empty | Axe Rules

見出しタグ<h3></h3>の中にテキストがないよ、という警告でした。
"impact": "minor"で、影響は軽微です。

画面とソースを確認すると、空白スペースの部分に<h3></h3>がありました。

表示するテキストが無い不要な見出しタグは、削除した方が良いですね。

【2】 Heading levels should only increase by one

+     "help": "Heading levels should only increase by one",
+     "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/heading-order?application=playwright",

+         "html": "<h3>Any browser • Any platform • One API</h3>",
+         "impact": "moderate",

• Heading levels should only increase by one | Axe Rules

見出しタグ<h3>の前に<h2>がなくて使う順序が正しくないよ、という警告でした。
"impact": "moderate"で、影響は中程度です。

見出しは<h1>から順に階層化して使いましょう、ということですね。

検証ルールのカスタマイズ

特定ルールの除外

ルールから外れるけど事情があって使っているから見逃して、というルールがある場合はdisableRules()で指定します。

先ほどのPlaywrightサイトで出た空の見出しタグは、以下のように指定するとチェックを除外できます。

  const accessibilityScanResults = await new AxeBuilder({ page })
    .disableRules(['empty-heading'])
    .analyze();

指定可能なルール一覧は、以下で確認できます。

• axe-core/doc/rule-descriptions.md at master · dequelabs/axe-core · GitHub

検証基準の指定

「WCAG」のWebアクセシビリティにはA、AA、AAAと3段階の基準があります。

• レベルA：最低限のアクセシビリティで、致命的な障壁を取り除きます。
• レベルAA：中程度のアクセシビリティで、実用に問題がない品質です。
• レベルAAA：高レベルのアクセシビリティで、最高の基準を満たします。

レベルAAAまで対応できると素晴らしいですが、すべてを適用するのはかなり困難です。
まずはレベルAとレベルAA基準で、警告解消を目指すのも良いと思います。

以下のようにwithTags()で基準をタグ指定すると、WCAG 2.0/2.1のレベルAとレベルAAのルールのみで検証されます。

  const accessibilityScanResults = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze();

Playwrightサイトもこのルールで実行した場合は警告0で、テストに成功しました！
基準として指定可能なタグは、以下で確認できます。

• Axe API Documentation | Deque Systems

おわりに

Accessibility testing | Playwrightに、

Note that automated testing cannot detect all types of WCAG violations.

と記載されている通り、WCAGのすべてのルールを自動テストで検証できるわけではないです。
ですが、以下のような場合に活用できそうと思いました。

• Webアクセシビリティに、どこから着手して良いか分からない
• Webアクセシビリティに、どこまで対応したら良いか分からない
• 一定ルールで漏れがないよう、自動でテストしたい