"접근성 공부, 어디서부터 하면 돼요?"

이 질문에 자주 돌아오는 답이 구글 web.dev의 Learn Accessibility입니다. 무료이고, 한국어로도 읽을 수 있죠(구글의 AI 자동 번역입니다). 저도 몇 번 추천했습니다. 그런데 이 강좌가 나온 게 2022년이에요. 4년이면 프론트엔드 프레임워크 유행이 두 번은 바뀌고도 남는 시간입니다. 지금 들어도 괜찮을까 싶어서, 21페이지를 전부 열어 보고 실습 페이지에는 Lighthouse를 다시 돌려 봤습니다.

web.dev Learn Accessibility는 어떤 강좌인가

본문 20개 모듈과 용어집 1개, 모두 21페이지입니다. 접근성이 왜 필요한지부터 ARIA, 키보드 포커스, 색 대비, 폼, 자동·수동·보조기술 테스트까지 한 바퀴를 돕니다. 접근성 전문가 Carie Fisher가 썼고 Alexandra Klepper와 Rachel Andrew가 검토했습니다. 끝에 퀴즈를 풀면 배지를 받을 수 있어요. 영상이 아니라 글이라서 필요한 장만 골라 레퍼런스처럼 읽기에도 좋습니다.

web.dev 접근성 강좌 업데이트 날짜: 대부분 2022~2023년

각 페이지 하단의 "최종 업데이트" 날짜를 모았습니다. 영어판과 한국어판 날짜는 21페이지 모두 같았습니다.

데이터 표
최종 업데이트페이지 수해당 모듈
2022년 9~12월14소개, ARIA, 포커스, 색 대비, 패턴 등
2023년 1월5폼, 자동·수동·보조기술 테스트, 마무리
2024년2측정 방법(5월), 용어집(10월)

날짜만큼 낡지는 않았습니다. 키보드 포커스 모듈은 WCAG 2.2의 포커스 가림(Focus Not Obscured)을 소개하고, 폼 모듈은 타깃 크기(Target Size)·일관된 도움말(Consistent Help)·접근 가능한 인증(Accessible Authentication)·중복 입력(Redundant Entry)을 링크로 걸어 둡니다. 다만 2.2가 초안이던 시절에 넣은 거라 흔적이 남아 있어요. 포커스 모듈이 인용하는 Focus Appearance (Minimum)은 최종본에서 이름이 바뀌고 AAA로 옮겨졌고, 자동 테스트 모듈은 "WCAG 2.1 A·AA 기준이며 2.2는 아직 반영하지 않았다"고 스스로 밝혀 둡니다.

21페이지에 걸린 외부 링크 316개도 열어 봤습니다. 확실히 깨진 건 5개였어요. 접근성이 왜 중요한지 다루는 첫 모듈의 CDC 통계 링크 2개와 글꼴 모듈의 PDF 1개가 404이고, 사이트 2곳은 접속이 안 됩니다. 봇 차단으로 확인하지 못한 13개는 뺀 숫자입니다.

그리고 숫자 하나가 틀려 있었습니다.

WCAG 2.2 성공 기준이 78개라는 설명은 틀렸습니다

2024년 5월에 고친 「디지털 접근성은 어떻게 측정되나요?」 페이지에 이렇게 적혀 있습니다.

web.dev 강좌 한국어판 화면 캡처 - 현재 표준 WCAG 2.2에는 총 78개의 성공 기준이 있다고 적혀 있고, 카드에 30·20·28이 적혀 있으며 첫 카드에는 등급 표기 A가 빠져 있습니다
web.dev 강좌 한국어판 화면 캡처 - 현재 표준 WCAG 2.2에는 총 78개의 성공 기준이 있다고 적혀 있고, 카드에 30·20·28이 적혀 있으며 첫 카드에는 등급 표기 A가 빠져 있습니다
web.dev Learn Accessibility 「디지털 접근성은 어떻게 측정되나요?」 한국어판 (2026년 10월 7일 캡처)

30·20·28, 합계 78은 WCAG 2.1의 숫자입니다. W3C 원문의 성공 기준을 등급별로 세어 보면 이렇습니다.

데이터 표
버전AAAAAA합계
WCAG 2.130202878
WCAG 2.231243186

2.2에서 9개가 새로 생기고, 4.1.1 구문 분석(Parsing)이 빠져서 86개입니다.

AA를 목표로 하면 A와 AA를 모두 지켜야 하니 "50개 통과"와 "55개 통과"의 차이입니다. 2.2에서 새로 생긴 A·AA 기준 6개(타깃 크기, 포커스 가림, 접근 가능한 인증 등)가 더해지고 4.1.1 하나가 빠져서 5개가 늘었어요.

한국어판(AI 자동 번역)은 첫 카드에서 "A 성공 기준"의 A가 빠져 "30 성공 기준"으로 나옵니다.

WCAG 3 언급도 시점이 지났습니다. WCAG 3.0을 "2024년 5월 현재 탐색(exploratory) 초안"이라고 소개하는데, 지금은 2026년 9월 초안까지 나왔고 구조도 크게 바뀌었습니다. 최신 상황은 WCAG 3 2026년 9월 초안 정리에 따로 적어 두었습니다.

Lighthouse 재측정: 강좌 실습 페이지 62점이 54점으로

자동 테스트 모듈은 일부러 접근성 문제를 심어 둔 실습 페이지(Medical Mysteries Club)를 Lighthouse로 검사합니다. 강좌에는 2022년 12월 테스트에서 62점이 나왔다고 적혀 있고, 고칠 문제를 8개 짚어 줍니다. 규칙 집합 등이 바뀌면 결과가 달라질 수 있다는 단서도 달려 있어요. 같은 페이지를 2026년 10월 7일 Lighthouse 13.4.1(데스크톱 설정)로 검사했습니다.

데이터 표
구분2022년 12월 (강좌 기록)2026년 10월 (재측정)
접근성 점수6254
지적된 문제8개8개
강좌에만 있는 항목aria-hidden 요소 안의 포커스 가능 요소없음
재측정에만 있는 항목없음main 랜드마크 없음

강좌에 실린 문제 코드 8개는 지금 페이지에도 그대로 있습니다. 그사이 Lighthouse는 접근성 감사의 가중치를 조정했고, 2022년엔 점수에 없던 main 랜드마크 항목도 들어왔어요. 다만 지금 결과에 2022년 가중치를 씌우면 50점 안팎이라 가중치만으로는 설명되지 않고, 강좌의 측정 설정도 알 수 없습니다. 강좌의 문제를 모두 고친 최종 버전은 지금 돌려도 100점이 나옵니다.

Lighthouse 접근성 점수는 감사 항목마다 매긴 가중치로 계산합니다. 이번에는 적용된 가중치 134 중 61이 실패라 약 54점이 나왔어요.

눈여겨볼 건 사라진 항목이에요. 뉴스레터 이메일 입력창 코드는 4년 전과 똑같습니다.

html
<!-- 실습 페이지의 이메일 입력창 (2022년과 동일) -->
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

강좌에 따르면 2022년 Lighthouse는 이 줄을 문제로 잡았고, 2026년 Lighthouse는 통과시킵니다. Lighthouse 안에서 검사를 맡는 axe-core는 이 항목을 ACT 규칙 「aria-hidden 요소에는 순차 포커스 탐색 대상이 없어야 한다」에 대응시켜 두었습니다. ACT 규칙은 WCAG 기준을 어떻게 검사할지 W3C 양식으로 적은 검사 규칙이에요(axe와 IBM을 ACT 규칙으로 비교한 글). tabindex="-1"이면 Tab 키로 갈 수 없으니 이 규칙 기준으로는 통과가 맞습니다. 이 규칙은 키보드로 조작할 수 있는지를 따지려고 만든 게 아니거든요.

그렇다고 이 입력창이 괜찮은 건 아닙니다. Tab 키로 갈 수 없으니 키보드로는 이메일을 입력할 수 없거든요. 강좌에서는 수동 테스트 모듈이 Tab 키를 눌러 보며 이 문제를 잡아냅니다. 그런데 이 모듈 본문의 코드 블록은 실습 페이지와 조금 어긋나 있어요.

html
<!-- 수동 테스트 모듈 본문의 수정 예시: tabindex만 지우고 aria-hidden은 남아 있습니다 -->
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

수동 테스트 모듈은 "앞 모듈이 끝난 데서 시작한다"고 밝히고 있고, 실제로 이 모듈의 실습 페이지에는 aria-hidden이 이미 지워져 있습니다. 그런데 본문 코드 블록은 고치기 전과 후 모두 aria-hidden을 달고 있어요. 이 블록만 복사해 쓰면 "스크린 리더에서는 숨겨졌는데 Tab으로는 닿는" 입력창이 됩니다. axe-core 4.14.0에 넣어 보니 aria-hidden-focus 위반이 1건 나왔습니다. 코드 블록 대신 실습 페이지를 따라가면 문제없습니다.

web.dev 접근성 강좌, 지금 들어도 될까요

들어도 됩니다. 한국어로 이만큼 체계적인 무료 강좌는 흔치 않아요. 다만 포스트잇 세 장은 붙여 두세요.

  1. 성공 기준 개수는 W3C 원문을 보세요. WCAG 2.2는 86개, AA까지는 55개입니다.
  2. WCAG 3에 대한 한 문장은 2024년 5월 기준이에요. 최신 초안은 따로 확인하세요.
  3. 강좌도 적어 둔 대로 Lighthouse 점수는 직접 다시 재 보세요. 같은 코드도 버전에 따라 점수와 지적 항목이 달라집니다. 100점이 나와도 Tab 키는 직접 눌러 봐야 합니다.

한국에서 일한다면 강좌와 함께 KWCAG 2.2(한국형 웹 콘텐츠 접근성 지침) 해설도 보면 좋습니다. 공공기관 품질인증은 WCAG가 아니라 KWCAG의 33개 검사항목을 기준으로 하니까요.

한 장 요약

  • web.dev Learn Accessibility는 21페이지 중 19페이지의 최종 업데이트 날짜가 2022~2023년입니다. WCAG 2.2 신규 기준 일부는 초안 시절 모습으로 들어가 있습니다.
  • "WCAG 2.2 성공 기준 78개"는 2.1의 숫자입니다. 2.2는 A 31·AA 24·AAA 31, 합계 86개이고, WCAG 3 언급은 2024년 5월 기준입니다.
  • 실습 페이지 점수는 강좌 기록 62점, 재측정 54점입니다. 원인은 확정할 수 없지만 같은 코드도 도구 버전에 따라 판정이 바뀝니다.
  • aria-hidden과 tabindex="-1"이 함께 붙은 입력창은 지금 Lighthouse의 해당 감사를 통과하지만, 키보드 사용자는 여전히 입력할 수 없습니다.