core/playwrightの導入で実現するHTML全体のアクセシビリティ品質担保 | PR TIMES 開発者ブログ

// h1タグがない例
function Page() {
  return (
    

      
      {/* Hogeがh2タグを持ち、Fugaでh4タグを持つため、見出し階層が飛ばされる */}
      
    
  );
}

function Hoge() {
  return 
テスト
;
}

function Fuga() {
  return 
Fuga
;
}

// src/tests/a11y-check.spec.ts
import {test, expect} from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('a11yテストにパスすること', async ({ page }) => {
  await page.goto('/');

  const results = new AxeBuilder({ page })
    // 適用するルールのタグを指定
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    // 特定のルールを無効化
    .disableRules(['color-contrast'])
    .analyze();

  expect(results.length).toBe(0);
});

// src/common/fixtures/index.ts
import {
  test,
  expect as baseExpect,
  type Page,
} from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

export {test};

export const expect = baseExpect.extend({
  async toPassA11y(page: Page) {
    // Axe-core を使ってアクセシビリティテストを実行
    const results = new AxeBuilder({page})
      // 影響範囲が広いため、導入時点では無効にしておく
      .disableRules(['color-contrast'])
      .analyze();

    // アクセシビリティテストの結果を出力
    for (const violation of results.violations) {
      console.log(violation);
    }

    const {violations} = results;
    const pass = violations.length === 0;

    if (pass) {
      return {
        message: () =>
          'Expected page to have accessibility violations, but it passed',
        pass: true,
      };
    }

    const violationMessages = violations
      .map((violation) => {
        const nodeMessages = violation.nodes
          .map((node) => `  - ${node.html}`)
          .join('\n');
        return `${violation.id}: ${violation.description}\n  Impact: ${violation.impact}\n${nodeMessages}`;
      })
      .join('\n\n');

    return {
      message: () =>
        `Expected page to pass accessibility checks, but found violations:\n\n${violationMessages}`,
      pass: false,
    };
  },
});

// src/tests/a11y-check.spec.ts
import {test, expect} from '../../common/fixtures/index.ts';
import AxeBuilder from '@axe-core/playwright';

test('a11yテストにパスすること', async ({page}) => {
  await page.goto('/');

  await expect(page).toPassA11y();
});

nested-interactive: Ensure interactive controls are not nested as they are not always
announced by screen readers or can cause focus problems for assistive technologies
Impact: serious
- 

// 修正前（Bad）

  


// TabTitlePcの実装
function TabTitlePc({ title, count }) {
  return (
    

      {title}
      
    
  );
}

// アクセシビリティは解決するが、SEO的に問題がある

  プレスリリース
  

landmark-main-is-top-level: Ensure the main landmark is at top level
Impact: moderate
- 


landmark-complementary-is-top-level: Ensure the complementary landmark or aside is at top level
Impact: moderate
-