클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

웹 접근성 컴플라이언스 (뉴스·퍼블리싱용)

WCAG 2.2 AA 기준으로 웹사이트·이미지·차트·영상의 접근성을 점검하고 고치도록 돕는 스킬입니다.

개발·코딩중급★ 363⑂ 61AI 점수 9/10마지막 업데이트: 2026. 8. 12.

무엇을 해주나

  • WCAG 2.2 AA 체크리스트를 POUR(인지·운용·이해·견고) 4원칙별로 제공해 사이트 감사를 단계적으로 진행합니다.
  • 뉴스 이미지 alt 텍스트 작성 규칙(누가·무엇·어디, 캡션 중복 금지, AI 생성 이미지 고지 방법)과 좋은/나쁜 예시를 제시합니다.
  • 접근성 있는 데이터 시각화: 색맹 안전 팔레트(Paul Tol), 명도 대비 비율 계산 함수, <figure>+데이터 테이블 HTML 패턴.
  • 키보드 접근성: 스킵 링크, 모달 포커스 트랩 방지, :focus-visible 스타일, prefers-reduced-motion 대응.
  • 폼·에러 처리: aria-describedby, aria-invalid, role="alert"를 쓴 실제 마크업.
  • 자동 감사: axe-core를 버전 고정으로 설치하고 Playwright로 실행해 위반 항목을 정리해 주는 파이썬 스크립트.
  • 법규 요약: 미국 Section 508 / ADA Title II·III, HHS 504, EU 접근성법(EAA), EN 301 549의 준수 기준과 시한.

이런 분께 추천

  • 뉴스룸·미디어 스타트업의 프런트엔드 개발자, 데이터 저널리스트
  • 공공기관·대학 웹사이트를 만들거나 유지보수하는 분
  • 접근성 소송·규제(ADA, EAA) 대응이 필요한 웹 담당자
  • 기사·블로그 이미지에 alt 텍스트를 제대로 달고 싶은 편집자

활용 예시

  1. "이 기사 페이지를 WCAG 2.2 AA 기준으로 점검해줘" → 체크리스트별 위반 항목과 수정 코드 제안.
  2. "법원 앞 시위 사진에 붙일 alt 텍스트 3개 후보 만들어줘" → 캡션과 중복되지 않는 125자 이내 문구 생성.
  3. "실업률 라인차트를 스크린리더에서도 읽히게 바꿔줘" → figure/aria 구조 + 접기식 데이터 테이블 + 색맹 안전 팔레트 적용.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/jamditis/claude-skills-journalism/HEAD/dev-toolkit/skills/accessibility-compliance/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 jamditis/claude-skills-journalism 의 dev-toolkit/skills/accessibility-compliance 폴더를 내 ~/.claude/skills/accessibility-compliance/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/jamditis/claude-skills-journalism.git && mkdir -p ~/.claude/skills && cp -r claude-skills-journalism/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다. (macOS는 터미널, Windows는 WSL 또는 Git Bash)
  2. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  3. 저장소를 내려받습니다: git clone https://github.com/jamditis/claude-skills-journalism.git
  4. 스킬만 복사합니다: cp -r claude-skills-journalism/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/
  5. 설치 확인: ls ~/.claude/skills/accessibility-compliance/SKILL.md
  6. (선택) 자동 감사를 쓰려면 프로젝트 폴더에서 npm install --save-dev --save-exact axe-core@4.12.1 과 pip install playwright && playwright install chromium 을 실행합니다.
  7. Claude Code를 다시 시작하고 "이 페이지 접근성 감사해줘"처럼 요청하면 스킬이 자동으로 활성화됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT