TetraLogical이 접근성 컴포넌트 8개와 각 컴포넌트의 요구사항, 테스트 시나리오, 자동화 테스트를 공개했다. 재사용하거나 수정할 수 있지만, 자체 필요에 맞춰 만든 구성요소라 제품에 적용하기 전에 직접 테스트해야 하며 완성된 디자인 시스템은 아니다.
공개된 버전은 1.0.0이다. Accordion, Breadcrumbs, Dialog, Disclosure, Pagination, Tabs, Text input, Textarea가 포함된다. 각 항목에는 작동 예제와 HTML·CSS·JavaScript 코드, 사용 목적과 적용하지 말아야 할 상황, 접근성 요구사항, 테스트 시나리오, 보조 기술 호환성 문서가 제공된다.
TetraLogical은 각 컴포넌트에 웹 콘텐츠 접근성 지침(WCAG) 2.2의 A·AA·AAA 수준 성공 기준을 연결하고, 고대비 테마에서의 사용성처럼 WCAG가 다루지 않는 부분에 관한 자체 권고도 덧붙였다. 요구사항은 적응성, 애니메이션과 움직임, 보조 기술과 시맨틱, 색상과 대비, 일관성과 예측 가능성, 이미지와 미디어, 입력 지원, 키보드, 탐색, 포인터와 터치 등 10개 주제로 묶었다. 용어는 용어집에서 확인할 수 있으며, 브라우저와 도구의 특이사항은 보조 기술 호환성 안내에 정리돼 있다.
요구사항을 테스트로 확인하는 방법
각 요구사항은 Gherkin 문법의 테스트 시나리오로 작성했고, 이를 검증하는 Cucumber 테스트도 제공한다. Gherkin은 Given, When, Then으로 테스트 단계를 평이한 언어로 표현해 개발자가 아닌 사람도 테스트 내용을 읽고 작성에 참여할 수 있게 한다. TetraLogical은 공통 언어로 디자인에 주석을 다는 방법에 관해서도 설명한 바 있다.
시나리오에는 테스트 범위를 정하는 태그, 관련 WCAG 성공 기준 또는 권고사항, 검사 내용을 설명하는 시나리오, 구체적인 테스트 단계가 들어간다. 예를 들어 Breadcrumbs의 1.4.10 리플로우 기준은 다음과 같이 표현된다.
@1.4.10 @aa @automatic Rule: 1.4.10 Reflow, Level AA Scenario: Content reflows without horizontal scrolling at 320px wide Given I load the sample "https://tetralogical.com/resources/accessible-components-library/breadcrumbs/examples/default.html" When I view the rendered '.tl-breadcrumbs' And I set the viewport to 320px wide Then it should reflow without requiring horizontal scrolling
테스트는 Playwright로 실제 브라우저를 제어한다. 예제 페이지를 불러온 뒤 클릭하거나 키보드로 요소에 초점을 맞추고, 브라우저에서 요소의 상태와 속성을 가져와 예상한 동작이 발생했는지 확인한다. 일반적인 접근성 검사 도구가 정적 마크업을 주로 살펴보는 것과 달리, 이 테스트는 다른 요소에 가려진 초점 표시처럼 더 복잡한 상황도 확인할 수 있다고 TetraLogical은 설명한다.
자동화가 적절하지 않은 검사도 있다. 예를 들어 입력란에 연결된 레이블이 있는지는 자동으로 확인할 수 있지만, 그 레이블이 읽는 사람에게 실제로 의미가 통하는지는 맥락이 필요해 판단하기 어렵다. 버전 1.0.0의 시나리오 중 97%는 완전 자동화됐으며, 나머지 3%는 검토에 필요한 브라우저 정보를 모으고 사람이 확인할 항목을 Markdown 체크리스트로 만든다. 테스트 실행 때마다 자동 테스트의 통과·실패 결과를 담은 JSON 보고서도 생성된다. 보조 기술 호환성 검사는 모두 수동으로 진행한다. 자동·수동 테스트를 통과하고 기술적으로 기준을 충족해도 특정 화면 읽기 프로그램이나 브라우저에서 문제가 생길 수 있기 때문이다.
설치와 적용 조건
TetraLogical은 접근성 평가 뒤 문제를 수정해도 몇 차례 배포를 거치며 문제가 다시 생기는 경우가 있다고 설명한다. 테스트를 지속적 통합(CI) 파이프라인에 연결해 모든 풀 리퀘스트에서 실행하면 회귀 문제를 일찍 확인할 수 있다는 취지다. 시나리오를 팀 공통의 인수 기준으로 활용하고, 성공 기준과 적합성 수준 태그로 필요한 테스트를 골라 실행할 수도 있다.
라이브러리는 ISC 라이선스로 공개됐다. 저작권 표시를 삭제하지 않는 조건으로 코드와 문서를 사용·복사·수정·공유할 수 있다. 테스트 설치와 실행 방법은 저장소의 README에, 저장소 구조와 컴포넌트·테스트 추가 방법은 개발 안내서에 있다. 오류나 제안은 GitHub 이슈로 보낼 수 있다.
현재는 풀 리퀘스트를 받지 않는다. TetraLogical은 각 컴포넌트의 요구사항과 테스트, 보조 기술 검사를 코드와 함께 일관되게 관리해야 하며, 당분간 자체 업무에 맞춘 방향을 유지하겠다고 밝혔다. 웹사이트 문서와 테스트는 GitHub 저장소에서 직접 가져오기 때문에 한쪽만 갱신돼 내용이 어긋나지 않도록 했으며, 향후 몇 달 동안 컴포넌트를 더 공개할 계획이다. 자세한 내용은 Accessible Components Library와 저장소에서 확인할 수 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요