software

만약 당신의 A11y Linter가 실제로 찾은 버그를 고칠 수 있다면?

발행: (2026년 2월 16일 오전 12:54 GMT+9)
9 분 소요
원문: Dev.to

Source: Dev.to

죄송합니다만, 외부 URL의 내용을 직접 가져올 수 없습니다. 번역이 필요한 본문 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.

GitHub Copilot CLI 챌린지 제출

만약 당신의 린터가 실제로 찾은 문제들을 고칠 수 있다면?

a11y‑pilot은 프론트엔드 코드를 접근성 위반 사항에 대해 스캔하고, 각 위반을 고치기 위해 GitHub Copilot CLI를 실행하는 CLI입니다.
단순히 변경을 제안하는 것이 아니라, 정교한 수정 지시와 함께 copilot --prompt를 호출하여 AI가 코드를 그 자리에서 리팩터링하도록 합니다.

빠른 링크

  • npm:
  • GitHub:

작동 방식

Scan → Detect → Prompt Engineer → Copilot CLI Fixes → Done
단계무슨 일이 일어나는가
Scan도구를 원하는 디렉터리나 파일에 지정합니다. 프로젝트를 순회하며 JSX, TSX, HTML, Vue, Svelte, Astro 파일을 Babel AST(JSX/TSX용)와 htmlparser2(HTML‑유사 템플릿용)를 사용해 파싱합니다.
Detect15개의 접근성 규칙이 파싱된 각 요소에 대해 실행되어 5가지 카테고리 전반에 걸친 WCAG 위반 여부를 검사합니다.
Auto‑fix각 이슈마다 a11y‑pilot은 정확하고 컨텍스트가 풍부한 프롬프트를 생성하고 copilot --prompt --allow-all-tools를 실행합니다. Copilot은 파일을 읽고 주변 코드를 이해한 뒤 필요한 최소한의 차이점만 적용합니다 – 무작위 찾기‑바꾸기 방식이 아닙니다.

내부 구조 다이어그램

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   a11y‑pilot    │────▶│  Issue detected   │────▶│  Build prompt   │
│   scanner       │     │  (rule engine)    │     │  (context‑rich) │
└─────────────────┘     └──────────────────┘     └────────┬────────┘
                                                          │
                                                          ▼
┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   File fixed!   │◀────│  Copilot applies │◀────│  copilot CLI    │
│   ✔ Report      │     │  the fix         │     │  invoked        │
└─────────────────┘     └──────────────────┘     └─────────────────┘

예시 프롬프트 (no-div-button 규칙)

파일 src/Hero.tsx 의 20번째 줄에서 이 접근성 문제를 해결하세요:
에 클릭 핸들러가 있지만 `role`과 `tabIndex`가 없습니다. **수정:** 요소를 기본 “ 요소로 교체하고, onClick 핸들러를 버튼으로 옮기며, cursor: pointer 스타일을 제거하세요(버튼은 기본적으로 커서가 포인터입니다).
필요한 최소한의 코드만 수정하세요.

Copilot CLI는 전체 파일 컨텍스트를 읽고 주변 JSX 구조를 이해하여 지능적인 리팩터링을 수행합니다 – 단순 문자열 교체가 아닙니다.

Terminal dashboard (after a scan)

✖ Found 46 issues (35 errors, 11 warnings) in 4 files (5 scanned)

📊 Issue Breakdown
──────────────────────────────────────────────────
 ♿ Accessibility       ████████░░░░░░░░░░░░   19 (41%)  19E
 🏗️ Semantic HTML      █████░░░░░░░░░░░░░░░   11 (24%)   4E 7W
 ⌨️ Keyboard            ███░░░░░░░░░░░░░░░░░    7 (15%)   5E 2W
 🏷️ ARIA               ██░░░░░░░░░░░░░░░░░░    5 (11%)   5E
 👆 Interaction         ██░░░░░░░░░░░░░░░░░░    4 (9%)    2E 2W
──────────────────────────────────────────────────
14 rules triggered: img‑alt, form‑label, no‑div‑button, …

대시보드는 접근성 부채가 어디에 존재하는지 즉시 한눈에 보여줍니다 – ARIA 오용, 키보드 트랩, 누락된 시맨틱 등 – 이를 통해 정확히 어느 부분에 집중해야 할지 알 수 있습니다.

Copilot CLI – 실행 엔진

  1. --auto-fix – 트리거되면 a11y‑pilot이 감지된 각 이슈마다

    copilot --prompt "" --allow-all-tools

    를 실행합니다.
    --prompt 은 비대화형 모드를 활성화하고, --allow-all-tools 은 도구 사용을 자동 승인하여 프로그래밍 방식 호출이 가능하도록 합니다.

  2. 수정 품질 –

    • alert('clicked')}> → 변환되어 핸들러가 이동하고 className이 유지된 “ 로 바뀝니다.
    • 빈 [](/profile) → 추가된 aria-label="Profile" (레이블은 URL에서 추론).

  3. 규칙별 프롬프트 엔지니어링 – 15개 규칙 각각에 copilotPrompt 필드가 포함됩니다. 이는 문제와 기대되는 수정 패턴을 충분히 이해하도록 Copilot에 간결한 지시를 제공하면서도 주변 코드에 맞게 조정될 수 있게 합니다. 바로 이 점이 a11y‑pilot을 “linter”에서 “linter + AI‑powered fixer”로 전환시킵니다.

Copilot CLI를 활용한 개발 워크플로우

분야Copilot이 도운 방식
Parser logicJSX 요소에 대한 Babel AST 순회를 반복하면서 스프레드 props, 표현식 컨테이너, 멤버 표현식을 처리했습니다. Copilot은 @babel/traverse ESM 기본 내보내기 특이점(`_traverse.default
Rule implementationWCAG 기준을 참고하고, 엣지 케이스 처리를 보장했습니다(예: aria-hidden-focus 규칙에서 href가 없는 “ 를 플래그하지 않으며, form‑label에서 input[type="hidden"]를 건너뜁니다).
Debugging파싱 버그를 빠르게 재현하고 수정했으며, 테스트 픽스처를 생성하고 각 규칙에 대한 단위 테스트를 작성했습니다.
Prompt refinementAI가 다양한 코드베이스에 대해 최소한의 올바른 diff를 생성할 때까지 프롬프트를 재구성했습니다.

Real‑world result

I pointed a11y‑pilot at a file with 12 accessibility issues and ran a11y‑pilot fix.
Every single issue was resolved – became, empty “ got meaningful alt text inferred from the filename, unlabeled inputs received proper aria-label.
Re‑scanning the file: 0 issues. No manual edits required.

직접 해보세요

# 전역(또는 개발 의존성)으로 설치
npm i -g a11y-pilot

# 프로젝트 스캔
a11y-pilot scan ./src

# 모든 문제 자동 수정
a11y-pilot fix ./src

GitHub Copilot CLI 로 구동되는 접근성‑우선 워크플로우를 즐겨보세요!

copilot‑bridge 가 처음에 shell: true 를 사용했을 때 Node.js DEP0190 폐기 경고가 발생했습니다.
Copilot CLI 덕분에 다음과 같이 직접 바이너리를 찾아서 해결하도록 전환할 수 있었습니다:

execFileSync('which', ['copilot'])

그리고 쉘 없이 적절한 spawn() 호출을 사용했습니다.

인상 깊었던 점

가장 눈에 띈 점은 Copilot CLI가 파일 수준 컨텍스트를 처리할 수 있는 능력이었습니다.
12개의 접근성 문제가 있는 파일을 지정하고 다음과 같이 말했을 때:

“20번째 줄의 “을 수정해 주세요”

다른 11개의 문제 있는 줄을 깨뜨리지 않았습니다. 정밀하고 최소한의 편집을 수행했습니다.
이 특성 덕분에 자동 수정 기능을 실용적으로 사용할 수 있었으며, 연쇄적인 파손을 걱정하지 않고 하나씩 혹은 묶음으로 문제를 자신 있게 해결할 수 있었습니다.

Install

npm install -g a11y-pilot

Repository

GitHub: safvan-tsy/a11y-pilot

Try it now

npx a11y-pilot scan ./src
0 조회
#software #programming #community
원문 보기
Share:
Back to Blog

관련 글

더 보기 »