9.3 ARIA Snapshot과 접근성

ARIA snapshot은 page의 accessible structure를 YAML 형태로 비교합니다. Pixel보다 semantic hierarchy에 집중하며, 개별 assertion과 자동 접근성 scanner 사이를 보완합니다.

세 가지 층을 구분하기

층	질문	대표 도구
개별 계약	Save button 이름이 맞는가?	toHaveAccessibleName()
구조 snapshot	Main 안의 heading, form, list 순서가 맞는가?	toMatchAriaSnapshot()
자동 규칙 scan	Label 누락, contrast 같은 알려진 rule 위반이 있는가?	@axe-core/playwright

어느 하나도 keyboard, screen reader를 포함한 수동 평가를 완전히 대체하지 않습니다.

개별 accessibility assertion

const save = page.getByTestId('save-button');
await expect(save).toHaveRole('button');
await expect(save).toHaveAccessibleName('저장');
await expect(save).toHaveAccessibleDescription('변경 사항을 저장합니다');

ARIA snapshot

await expect(page.getByRole('main')).toMatchAriaSnapshot(`
  - heading "Todo Lab" [level=1]
  - form "할 일 추가":
    - textbox "할 일"
    - button "추가"
  - list "할 일 목록"
`);

Snapshot은 order-sensitive입니다. Dynamic count는 regex나 partial match를 사용합니다. Page 전체를 무조건 exact snapshot으로 고정하면 작은 copy change에도 유지보수 비용이 커집니다.

Snapshot 생성과 리뷰

npx playwright test --update-snapshots
npx playwright test --update-snapshots --update-source-method=patch

자동 update는 승인 절차가 아닙니다. Diff가 accessible hierarchy를 개선했는지, 중요한 role/name이 사라지지 않았는지 사람이 확인해야 합니다.

axe scan

import AxeBuilder from '@axe-core/playwright';

test('자동 검출 가능한 접근성 위반이 없다', async ({ page }, testInfo) => {
  await page.goto('/');
  const result = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
    .analyze();

  await testInfo.attach('axe-result', {
    body: JSON.stringify(result, null, 2),
    contentType: 'application/json',
  });
  expect(result.violations).toEqual([]);
});

Known issue를 제외할 때 큰 container 전체를 exclude()하면 그 하위의 새 결함까지 숨깁니다. Rule ID와 target fingerprint를 좁게 관리하고 만료 계획을 둡니다.

실습

1. Todo form의 ARIA snapshot을 작성합니다.
2. <label>을 제거해 locator와 axe 결과가 어떻게 변하는지 확인합니다.
3. Dynamic todo title에는 regex를 사용하고 list structure는 유지합니다.
4. Axe result JSON을 HTML report attachment로 붙입니다.
5. Automated test가 찾지 못하는 keyboard focus order를 직접 점검합니다.

참고: ARIA snapshot testing, Accessibility testing, Assertions