스킬 자체의 표현으로
이 스킬은 WCAG 2.2를 기준으로 웹 접근성을 감사하고 수정하며, POUR — Perceivable, Operable, Understandable, Robust — 와 A, AA, AAA 적합성 수준을 중심으로 구성되어 있습니다. 증거 기반 워크플로를 따릅니다. 렌더링된 페이지를 사용할 수 있으면 Lighthouse 실시간 접근성 감사(lighthouse_audit, Chrome DevTools MCP)를 실행하고, 실패한 노드를 이용해 컴포넌트를 특정한 뒤 take_snapshot으로 접근성 트리를 검사하고, 소스를 수정한 다음 다시 실행합니다.
실시간 도구를 쓸 수 없다면 Lighthouse CLI나 axe가 자동화 영역을 담당하며, 동일한 수동 점검도 그대로 적용됩니다. 대체 텍스트, 대비 비율, 포커스 가시성, 타깃 크기, 모션 감소, 폼 오류, 접근 가능한 인증에 대한 코드 수준 규칙과 함께 Critical, Serious, Moderate 등급으로 매긴 트리아지 목록을 제공합니다.
산출물
- 우선순위가 매겨진 이슈 목록으로, Critical(즉시 수정), Serious(출시 전 수정), Moderate(조속히 수정) 등급으로 묶여 있으며 등급마다 구체적인 예시가 제시됩니다.
- 수정된 마크업과 바로 붙여넣을 수 있는 스니펫을 제공하며, 아이콘 버튼 레이블을 보조 기술에 노출하는 시각적 숨김 유틸리티도 포함합니다.
- references/A11Y-PATTERNS.md에 담긴 전체 참조 구현으로, 폼 레이블, 모달 포커스 트랩, 건너뛰기 링크, ARIA 탭, 라이브 영역, 오류 처리, 스크린 리더 명령을 다룹니다.
작동 방식
- 01실시간 접근성 감사 실행
렌더링된 페이지에서 시작해 Lighthouse 접근성 실시간 감사를 실행합니다. 일반 공개 페이지에는 모바일 내비게이션 모드를, 새로 고치면 인증 상태가 사라지는 경우에는 스냅샷 모드를 사용합니다.
- 02실패한 컴포넌트 특정
실패한 감사 노드를 활용해 특정 컴포넌트나 템플릿을 지목하며, 일반적인 패턴을 찾아 저장소 전체를 grep하지 않습니다.
- 03접근성 트리 검사
렌더링된 접근성 트리 스냅샷을 읽어 이름, 역할, 상태, 랜드마크, 제목 구조를 확인한 다음, 영향을 받은 흐름을 키보드로 직접 실행해 확인합니다.
- 04소스 수정 후 재검증
렌더링된 출력이 아니라 소스를 변경한 뒤, 동일한 감사와 동일한 수동 조작을 반복해 수정을 확인합니다.
- 05CLI 도구로 대체
실시간 브라우저 도구를 사용할 수 없을 때는 Lighthouse CLI나 axe 출력을 동일한 수동 점검과 함께 사용합니다. 자동화만으로는 장벽의 일부만 다루기 때문입니다.