Accessibility 테스트 전략 완벽 가이드

웹 접근성 테스트의 핵심 전략과 도구를 실습 코드와 함께 배웁니다. 자동화 테스트부터 스크린 리더 테스트까지 포괄적으로 다룹니다.

---

---

들어가며

이 글에서는 Accessibility 테스트 전략 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. ARIA_라벨_테스트
2. 키보드_네비게이션_테스트
3. 색상_대비_자동_검사
4. 포커스_관리_테스트
5. 스크린_리더_텍스트_검증
6. Landmark_영역_테스트
7. 대체_텍스트_검증
8. 폼_에러_접근성_테스트
9. 동적_콘텐츠_알림_테스트
10. 탭_인덱스_순서_테스트
11. 비활성화_요소_테스트
12. 테이블_접근성_테스트

---

1. ARIA 라벨 테스트

개요

스크린 리더가 올바르게 읽을 수 있도록 ARIA 라벨이 적용되었는지 검증합니다.

코드 예제

import { render, screen } from '@testing-library/react';

test('버튼에 접근 가능한 이름이 있는지 확인', () => {
  render(<button aria-label="메뉴 열기">☰</button>);

  const button = screen.getByRole('button', { name: '메뉴 열기' });
  expect(button).toBeInTheDocument();
});

설명

getByRole을 사용하여 버튼의 역할과 접근 가능한 이름을 동시에 검증합니다. ARIA 라벨이 없으면 테스트가 실패합니다.

---

2. 키보드 네비게이션 테스트

개요

Tab 키와 Enter 키로 모든 인터랙티브 요소에 접근하고 작동할 수 있는지 테스트합니다.

코드 예제

import userEvent from '@testing-library/user-event';

test('키보드로 폼을 제출할 수 있는지 확인', async () => {
  const handleSubmit = jest.fn();
  render(<form onSubmit={handleSubmit}><input /><button>제출</button></form>);

  await userEvent.tab(); // input으로 이동
  await userEvent.tab(); // button으로 이동
  await userEvent.keyboard('{Enter}');
  expect(handleSubmit).toHaveBeenCalled();
});

설명

userEvent.tab()과 keyboard()를 사용해 실제 키보드 동작을 시뮬레이션하여 키보드 접근성을 검증합니다.

---

3. 색상 대비 자동 검사

개요

WCAG 기준에 맞는 색상 대비율을 자동으로 검사하여 시각 장애인도 콘텐츠를 읽을 수 있는지 확인합니다.

코드 예제

import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('색상 대비 검사', async () => {
  const { container } = render(<p style={{ color: '#777', background: '#fff' }}>텍스트</p>);

  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

설명

jest-axe 라이브러리를 사용하여 색상 대비를 포함한 다양한 접근성 규칙을 자동으로 검증합니다.

---

4. 포커스 관리 테스트

개요

모달이나 드롭다운이 열릴 때 포커스가 올바른 위치로 이동하는지 확인합니다.

코드 예제

test('모달 열릴 때 포커스 이동', () => {
  render(<Modal />);
  const openButton = screen.getByRole('button', { name: '모달 열기' });

  userEvent.click(openButton);
  const modal = screen.getByRole('dialog');
  const closeButton = within(modal).getByRole('button', { name: '닫기' });

  expect(closeButton).toHaveFocus();
});

설명

모달이 열렸을 때 첫 번째 포커스 가능한 요소에 포커스가 자동으로 이동하는지 toHaveFocus()로 검증합니다.

---

5. 스크린 리더 텍스트 검증

개요

시각적으로는 숨겨져 있지만 스크린 리더가 읽을 수 있는 텍스트를 테스트합니다.

코드 예제

test('스크린 리더 전용 텍스트 확인', () => {
  render(
    <button>
      <span className="sr-only">장바구니에 추가</span>
      <CartIcon />
    </button>
  );

  expect(screen.getByText('장바구니에 추가')).toBeInTheDocument();
});

설명

CSS로 시각적으로 숨긴(.sr-only) 텍스트도 DOM에 존재하므로 getByText로 찾아 스크린 리더 지원을 검증할 수 있습니다.

---

6. Landmark 영역 테스트

개요

페이지의 주요 영역이 적절한 시맨틱 HTML이나 ARIA 역할로 구분되어 있는지 확인합니다.

코드 예제

test('페이지 랜드마크 구조 확인', () => {
  render(<Layout><Header /><Main /><Footer /></Layout>);

  expect(screen.getByRole('banner')).toBeInTheDocument(); // header
  expect(screen.getByRole('main')).toBeInTheDocument();
  expect(screen.getByRole('contentinfo')).toBeInTheDocument(); // footer
});

설명

시맨틱 HTML 태그들이 자동으로 ARIA 역할을 가지므로 getByRole로 페이지 구조를 검증합니다.

---

7. 대체 텍스트 검증

개요

이미지와 미디어 요소에 적절한 대체 텍스트가 제공되는지 테스트합니다.

코드 예제

test('이미지 대체 텍스트 확인', () => {
  render(<img src="logo.png" alt="회사 로고" />);

  const image = screen.getByAltText('회사 로고');
  expect(image).toHaveAttribute('src', 'logo.png');
});

설명

getByAltText를 사용하여 alt 속성이 존재하고 의미 있는 내용을 담고 있는지 확인합니다.

---

8. 폼 에러 접근성 테스트

개요

폼 검증 에러가 스크린 리더에게 올바르게 전달되는지 확인합니다.

코드 예제

test('폼 에러 메시지 접근성', async () => {
  render(<LoginForm />);
  const submitButton = screen.getByRole('button', { name: '로그인' });

  await userEvent.click(submitButton);

  const errorMessage = screen.getByRole('alert');
  expect(errorMessage).toHaveTextContent('이메일을 입력해주세요');
});

설명

role="alert"를 사용하면 스크린 리더가 즉시 에러를 읽어주므로 getByRole('alert')로 에러 메시지의 접근성을 검증합니다.

---

9. 동적 콘텐츠 알림 테스트

개요

페이지 콘텐츠가 동적으로 변경될 때 스크린 리더에게 알림이 전달되는지 확인합니다.

코드 예제

test('라이브 리전 업데이트 알림', async () => {
  render(<NotificationArea />);

  const liveRegion = screen.getByRole('status');
  expect(liveRegion).toBeEmptyDOMElement();

  await userEvent.click(screen.getByText('알림 보내기'));
  expect(liveRegion).toHaveTextContent('메시지가 전송되었습니다');
});

설명

aria-live나 role="status"를 사용한 라이브 리전이 동적 콘텐츠 변경을 스크린 리더에게 알려주는지 검증합니다.

---

10. 탭 인덱스 순서 테스트

개요

포커스 이동 순서가 시각적 순서와 일치하고 논리적인지 확인합니다.

코드 예제

test('탭 순서 확인', async () => {
  render(<Form><input id="name" /><input id="email" /><button>제출</button></Form>);

  await userEvent.tab();
  expect(screen.getByLabelText('이름')).toHaveFocus();
  await userEvent.tab();
  expect(screen.getByLabelText('이메일')).toHaveFocus();
  await userEvent.tab();
  expect(screen.getByRole('button')).toHaveFocus();
});

설명

연속적인 tab() 호출로 포커스 이동 순서를 테스트하여 논리적인 탭 순서를 보장합니다.

---

11. 비활성화 요소 테스트

개요

비활성화된 버튼이나 입력 필드가 올바르게 표시되고 접근성 정보를 제공하는지 확인합니다.

코드 예제

test('비활성화 버튼 접근성', () => {
  render(<button disabled aria-label="저장 불가">저장</button>);

  const button = screen.getByRole('button', { name: '저장 불가' });
  expect(button).toBeDisabled();
  expect(button).toHaveAttribute('aria-label', '저장 불가');
});

설명

disabled 속성과 함께 aria-label을 제공하여 왜 비활성화되었는지 스크린 리더 사용자에게 알려줍니다.

---

12. 테이블 접근성 테스트

개요

데이터 테이블에 적절한 헤더와 캡션이 있어 스크린 리더가 데이터를 이해할 수 있는지 검증합니다.

코드 예제

test('테이블 구조 접근성', () => {
  render(<table><caption>사용자 목록</caption><thead><tr><th>이름</th></tr></thead></table>);

  expect(screen.getByRole('table', { name: '사용자 목록' })).toBeInTheDocument();
  expect(screen.getByRole('columnheader', { name: '이름' })).toBeInTheDocument();
});

설명

caption과 th 태그가 테이블에 의미를 부여하며, getByRole로 테이블 구조의 접근성을 검증합니다.

---

마치며

이번 글에서는 Accessibility 테스트 전략 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Accessibility #Testing #ARIA #WCAG