Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Virtual Screen Reader는 테스트 목적으로 화면 리더 기능을 시뮬레이션하고 자동화할 수 있는 패키지입니다. 이 도구는 Jest, Vitest 등 다양한 테스트 프레임워크와 React, Vue 등 여러 UI 프레임워크에서 작동하며, 실제 E2E 테스트의 오버헤드를 줄여 빠른 피드백을 제공하는 것이 목표입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 개발 자료 GitHub · 505f08fd의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기<a href="https://www.npmjs.com/package/@guidepup/virtual-screen-reader"><img alt="Virtual Screen Reader available on NPM" src="https://img.shields.io/npm/v/@guidepup/virtual-screen-reader" /></a>
<a href="https://github.com/guidepup/virtual-screen-reader/actions/workflows/test.yml"><img alt="Virtual Screen Reader test workflows" src="https://github.com/guidepup/virtual-screen-reader/workflows/Test/badge.svg" /></a>
<a href="https://github.com/guidepup/virtual-screen-reader/blob/main/LICENSE"><img alt="Virtual Screen Reader uses the MIT license" src="https://img.shields.io/github/license/guidepup/virtual-screen-reader" /></a>
Virtual Screen Reader는 테스트를 위한 화면 리더 시뮬레이터입니다.
이 패키지는 마우스나 키보드 기반 시나리오에서처럼 유닛 테스트 워크플로우를 위해 가상 화면 리더(Virtual Screen Reader)를 자동화할 수 있게 함으로써 테스트를 보강하는 것을 목표로 합니다.
[!중요]
이 패키지는 화면 리더 테스트를 대체하는 것이 아니라 보완해야 하며, 실제 화면 리더와 실제 사용자를 통한 테스트를 대신할 수는 없습니다.
실제 화면 리더 자동화를 찾고 있다면, @guidepup/guidepup 패키지를 확인해 보세요.
간편하고 쉬운 Jest 스냅샷 테스트를 원한다면, @guidepup/jest 패키지를 확인해 보세요.
현재 스크린 리더가 준수해야 할 명시적인 사양은 없지만, 스크린 리더의 기대치를 알려주는 여러 요구사항들이 사양에 의해 제시되고 있습니다. 이 라이브러리는 이러한 요구사항들을 충족하는 것을 목표로 하여 가능한 한 '사양 준수적(spec compliant)'이 되도록 합니다.
Current W3C에서 사용되는 사양:
이러한 사양에서 추출된 요구사항은 docs/requirements.md에서 확인할 수 있습니다. 만약 요구사항을 충족하지 못했다면, issue를 제기해 주십시오.
가상 스크린 리더(Virtual Screen Reader)의 접근성 트리(accessibility tree)를 구성하는 내부 모듈들은 다음 사양들(Web Platform Tests)을 대상으로 테스트되고 있습니다:
현재 WPT 커버리지 상태는 다음과 같습니다:
| 통과 테스트 스위트 (Passing Test Suites) | 실패 테스트 (Failing Tests) | 건너뛴 테스트 (Skipped Tests) |
|---|---|---|
| 333 | 99 | 347 |
포함된 테스트, 건너뛴 테스트, 예상 실패는 WPT 설정 파일에서 확인할 수 있으며, 여기에는 건너뛰거나 예상되는 실패의 이유가 명시되어 있습니다. '임시적(Tentative)' 테스트는 동작이 아직 확정되지 않았기 때문에 제외되었습니다.
또한 W3C 사양 외에도 a11ysupport.io를 스크린 리더 출력에 대한 공식적인 내용이 없는 경우의 테스트 케이스 가이드로 사용했습니다. 향후에는 ARIA 및 보조 기술(Assistive Technologies) 커뮤니티 그룹에서 제시하는 테스트 케이스를 채택하기를 희망합니다.
[!NOTE]
이 라이브러리는 실제 스크린 리더 및 실제 스크린 리더 사용자와의 테스트를 대체해서는 안 되며, 다른 모든 단위 테스트와 마찬가지로 일반적인 시나리오를 자동화하여 빠른 커버리지와 신뢰도를 얻기 위한 수단입니다.
프로젝트에 Virtual Screen Reader를 설치하세요:
npm install --save-dev @guidepup/virtual-screen-reader
yarn add -D @guidepup/virtual-screen-reader
첫 번째 스크린 리더 유닛 테스트 자동화 코드를 작성해 보세요!
가이드, 실제 사례, 그리고 예제가 포함된 전체 API 문서는 Guidepup Website에서 확인하세요.
일부 예시는 examples 섹터에서도 찾을 수 있습니다.
또한 이 프로젝트 자체의 통합 테스트 (integration tests)를 확인하여 Virtual Screen Reader를 프로젝트에서 어떻게 사용할 수 있는지 알아볼 수 있습니다.
Node 환경의 Jest 테스트에서 HTML을 탐색하는 기본적인 예시입니다:
import { virtual } from "@guidepup/virtual-screen-reader";
function setupBasicPage() {
...
Virtual Screen Reader는 브라우저와 같은 ESM 환경도 지원합니다.
원하는 브라우저의 DevTools에서 다음 스니펫을 실행하여 사용해 보세요:
const { virtual } =
await import("https://unpkg.com/@guidepup/virtual-screen-reader/lib/esm/index.browser.js");
...
Virtual Screen Reader는 접근성 객체 모델 (Accessibility Object Model, AOM)을 감지하는 기능을 제공하며, 사용 가능한 경우 브라우저의 계산된 접근 가능 이름(accessible names)과 역할(roles)을 채택합니다.
이 동작 방식을 활성화하는 방법은 Storybook 예시를 참고하세요.
다른 Guidepup 모듈들도 확인해 보세요:
@guidepup/guidepup - VoiceOver 및 NVDA를 지원하는 JavaScript를 통해 스크린 리더 접근성(a11y) 워크플로우에 대한 안정적인 자동화 기능을 제공합니다.@guidepup/setup - 스크린 리더 테스트 자동화를 위한 로컬 또는 CI 환경을 설정할 수 있습니다.@guidepup/playwright - Playwright와 Guidepup의 원활한 통합을 제공합니다.@guidepup/jest - 스크린 리더 접근성(a11y) 워크플로우에 대한 안정적인 유닛 테스트를 위한 Jest 매처입니다.다음과 유사한 독립 프로젝트들이 있습니다: