Frontend

웹 접근성 레퍼런스 모음

haeunkim.on 2026. 8. 20. 16:27

tailwind-a11y를 만들고 관련 글을 쓰면서 모은 자료. 계속 업데이트 예정

통계

웹 전체의 현황

🔗 https://webaim.org/projects/million/

 

WebAIM: The WebAIM Million - The 2026 report on the accessibility of the top 1,000,000 home pages

Introduction For the eighth consecutive year, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites. The evaluation was conducted using the WAVE stand-alone API (with additional tools to collect site technology and

webaim.org

 

95.9%

2026년 2월 기준 상위 100만 개 홈페이지 중 WCAG 2 실패가 자동 감지된 비율. 2025년 94.8%에서 상승해 6년간 이어지던 개선 흐름이 처음 반등. 자동 감지분만 센 수치라 실제 WCAG 2 A/AA 완전 준수율은 4.1%보다 낮다는 것이 보고서의 해석.

 

56.1개

페이지당 평균 감지 오류 수. 전년 51개 대비 10.1% 증가.

 

1,437개 / 22.5%

홈페이지당 평균 element 수와 1년 만의 증가율. 7년 만에 거의 두 배. 전체 요소의 3.9%에 오류가 있어, 장애 사용자 기준 26개 요소 중 1개꼴로 장벽을 만나는 셈.

 

96%

감지된 전체 오류 중 상위 6개 유형이 차지하는 비율. 7년째 같은 여섯 가지.

유형 2026 2025
저대비 텍스트 83.9% 79.1%
이미지 대체 텍스트 누락 53.1% 55.5%
폼 입력 레이블 누락 51% 48.2%
빈 링크 46.3% 45.4%
빈 버튼 30.6% 29.6%
문서 언어 누락 13.5% 15.8%

🔗 https://webaim.org/projects/million/

 

WebAIM: The WebAIM Million - The 2026 report on the accessibility of the top 1,000,000 home pages

Introduction For the eighth consecutive year, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites. The evaluation was conducted using the WAVE stand-alone API (with additional tools to collect site technology and

webaim.org

 

ARIA

🔗 https://webaim.org/projects/million/

 

59.1개 vs 42개

ARIA를 쓴 홈페이지와 쓰지 않은 홈페이지의 평균 감지 오류 수. ARIA가 많을수록 오류도 많아지는 상관관계. 보고서는 ARIA가 오류를 유발했다고 단정하지 않고, ARIA를 쓰는 페이지가 애초에 더 복잡하다는 점을 함께 지적.

 

133개 / 27%

홈페이지당 평균 ARIA 속성 수와 1년 증가율. 2019년의 6배 이상. role="menu"를 쓴 페이지 중 22%는 필요한 마크업과 인터랙션이 빠져 오히려 장벽을 만듦.

 

프레임워크와 언어

Astro 9.0, Next.js 40.9, React 43.5, Vue.js 64.6, jQuery 64.9. 

프레임워크별 홈페이지 평균 오류 수. 전체 평균은 56.1. 기술 선택과 오류 수의 상관이지 인과는 아니라는 단서가 보고서에 붙어 있음.

🔗 https://webaim.org/projects/million/

 

94.6개

한국어로 선언된 홈페이지의 평균 오류 수. 전체 평균 대비 68.7% 높음. 영어 46.0개(−18.0%), 일본어 62.2개, 중국어 136.2개. 조사 대상 중 한국어 페이지는 6,628개.

🔗 https://webaim.org/projects/million/

 

66.7점

국내 웹사이트 웹 접근성 평균 점수. 2024년 조사 기준이며 2019년 53.7점에서 꾸준히 상승. 업종별로는 교육서비스업 76.9점이 최고, 부동산업 60.5점이 최저.

🔗 https://www.nia.or.kr/site/nia_kor/ex/bbs/List.do?cbIdx=99873

 

[NIA 한국지능정보사회진흥원]

우리는 디지털로 사회 현안을 해결하고, 국가 미래를 열어가는 국가 디지털 대전환 선도기관 NIA한국지능정보사회진흥원입니다.

www.nia.or.kr

 

색 대비

83.9% / 34건

저대비 텍스트가 있는 홈페이지 비율과 페이지당 평균 발생 건수. 8년 내내 오류 유형 1위이며, 건수는 전년 대비 15% 증가. tailwind-a11y가 제일 먼저 잡는 유형.

🔗 https://webaim.org/projects/million/

 

8% / 0.5%

적록 색각 이상 유병률. 남성 8%, 여성 0.5%. 다만 이 값은 북유럽계 인구 기준이고 아시아와 아프리카 인구에서는 더 낮게 보고됨. 국내 서비스 맥락에서 8%를 그대로 쓰면 과대 추정.

🔗 https://pmc.ncbi.nlm.nih.gov/articles/PMC12385717/

 

A Global Perspective of Color Vision Deficiency: Awareness, Diagnosis, and Lived Experiences - PMC

Abstract Color vision deficiency (CVD), commonly referred to as color blindness, affects a significant portion of the global population, particularly among males. This narrative review synthesizes findings from peer-reviewed articles and published large-sc

pmc.ncbi.nlm.nih.gov

 

터치 타겟과 운동 장애

24×24px / 44×44px

WCAG 2.2의 두 가지 타겟 크기 기준. 2.5.8 Target Size (Minimum)이 Level AA로 24×24 CSS px, 2.5.5 Target Size (Enhanced)가 Level AAA로 44×44 CSS px. 2.5.8에는 간격 예외가 있어, 타겟 중심에 지름 24px 원을 그렸을 때 서로 겹치지 않으면 더 작아도 통과. Apple 44pt와 Google 48dp는 AAA 쪽에 가까운 값.

🔗 https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

 

Understanding Success Criterion 2.5.8: Target Size (Minimum) | WAI | W3C

Understanding SC 2.5.8 Target Size (Minimum) (Level AA) In Brief GoalMake controls easier to activate. What to doEnsure targets meet a minimum size or have sufficient spacing around them. Why it's importantSome people with physical impairments cannot click

www.w3.org

 

 

10년마다 74%

연령이 10년 오를 때마다 본태성 진전(essential tremor) 유병률이 증가하는 폭. 42개 인구 기반 연구, 23개국 6대륙 메타분석. 전 연령 1.33%, 65세 이상 5.79%, 최고령군 중앙값 9.3%이며 20%를 넘게 보고한 연구도 여럿. 성별 차이는 없음. 65세 이상 유병률이 같은 연령대 알츠하이머와 비슷해 ET가 가장 흔한 신경퇴행성 질환일 수 있다는 것이 저자들의 논의.

🔗 https://doi.org/10.5334/tohm.632

 

How Common is Essential Tremor? Update on the Worldwide Prevalence of Essential Tremor | Tremor and Other Hyperkinetic Movements

Introduction One paper [19] that was included in the 2010 review was superseded by a follow-up study from the same group; [20] in the follow-up study, more extensive data were presented. Therefore, only the follow-up study is presented [20]. In addition, t

tremorjournal.org

 

3.9배

운동 조절 장애가 있는 참가자가 터치스크린 버튼을 놓친 평균 빈도. 비장애 대조군 대비. 참가자 53명(장애 38명, 대조 15명)이며 진단은 뇌성마비, 헌팅턴병, 다발성경화증, 파킨슨병, 진전. 버튼이 커질수록 양쪽 모두 수행이 개선됨.

🔗 https://www.sciencedirect.com/science/article/abs/pii/S0003687012001226

 

 

스크린리더

🔗 https://webaim.org/projects/screenreadersurvey10/

 

WebAIM: Screen Reader User Survey #10 Results

Screen Reader User Survey #10 Results You are here: Home > WebAIM Projects > Screen Reader User Survey #10 Results Article Contents Introduction Demographics Primary Desktop/Laptop Screen Reader Screen Readers Commonly Used Browsers Screen Reader / Browser

webaim.org

 

JAWS + Chrome 24.7%, NVDA + Chrome 21.3

가장 흔한 스크린리더와 브라우저 조합. JAWS + Chrome 24.7%, NVDA + Chrome 21.3%. 둘을 합쳐도 절반이 안 되고, 그다음이 JAWS + Edge 11.4%, NVDA + Firefox 10.0%, VoiceOver + Safari 7.0%로 길게 이어짐. 2023년 12월부터 2024년 1월까지 1,539명 응답.

 

71.6%

긴 페이지에서 정보를 찾을 때 헤딩부터 훑는다고 답한 비율. 전체 읽기 6.4%, 찾기 기능 13.6%, 링크 4.8%, 랜드마크 3.7%. 헤딩 레벨이 유용하다는 응답은 88.8%. 헤딩 구조가 스크린리더 사용자에게 사실상 목차 역할.

 

CAPTCHA

응답자가 꼽은 가장 문제적인 항목 1위. 14년째 순위가 거의 그대로이며, 2위는 메뉴와 탭, 다이얼로그가 예상대로 동작하지 않는 것, 3위는 의미를 알 수 없는 링크와 버튼.

 

91.3% / 58%

모바일에서 스크린리더를 쓴다는 응답 비율과, 은행이나 쇼핑 같은 일상 작업에서 웹사이트 대신 앱을 택한다는 응답 비율. 앱 선호는 2017년 46%에서 계속 상승 중.

텍스트 크기와 줌

3.08%

브라우저 기본 폰트 크기를 16px이 아닌 값으로 쓰는 사용자 비율. Internet Archive가 실제 트래픽에서 측정한 값으로, 16px이 96.92%. 16px보다 작게 쓰는 사용자도 존재.

🔗 https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773

 

Pixels vs. Ems: Users DO Change Font Size

Web developers love a good holy war, whether it’s over our favorite JavaScript frameworks or principles like separation of concerns. One…

medium.com

 

8% vs 44% / 48.4%

저시력 사용자 248명 대상 조사. 브라우저 기본 텍스트 크기를 실제로 바꾼 비율은 8%인 반면, 브라우저 줌은 44%, 화면 확대 소프트웨어는 48.4%가 사용. 400% 이상으로 확대하는 응답자도 17.9%. 텍스트를 키워야 하는 사용자조차 기본 크기 변경보다 줌을 압도적으로 선호.

🔗 https://webaim.org/projects/lowvisionsurvey2/

 

WebAIM: Survey of Users with Low Vision #2 Results

You are here: Home > WebAIM Projects > Survey of Users with Low Vision #2 Results Types of Visual Impairment Which of the following types of visual impairment do you have? Response# of Respondents% of Respondents Visual acuity (clarity or sharpness of visi

webaim.org

 

장애 유병률

16% / 13억 명

전 세계 인구 중 상당한 수준의 장애가 있는 사람의 비율과 수. 6명 중 1명. 인구 고령화와 만성질환 증가로 계속 늘어나는 중. 이전에 널리 쓰이던 UN의 15%, 10억 명 수치는 더 오래된 추정.

🔗 https://www.who.int/news-room/fact-sheets/detail/disability-and-health

 

28.7%

미국 성인 중 어떤 형태로든 장애가 있는 비율. 가장 흔한 유형은 인지 장애 13.9%이고 이동 장애 12.2%가 그다음. 자립 생활 7.7%, 청각 6.2%, 시각 5.5%, 자기 돌봄 3.6%. 2024년 7월 갱신본 기준.

🔗 https://www.cdc.gov/disability-and-health/articles-documents/disability-impacts-all-of-us-infographic.html

 

57%

시각, 청각, 운동, 언어, 인지 관련 경증에서 중증 어려움으로 접근성 기술의 혜택을 볼 수 있는 미국 근로연령 컴퓨터 사용자 비율. 접근성 논의에서 가장 많이 인용되는 숫자 중 하나지만 2003년 Forrester 조사라는 점을 반드시 함께 밝혀야 함. Microsoft가 2025년에 다시 의뢰한 조사에서는 이 비율이 70%를 넘는 것으로 보고됨.

🔗 https://blogs.microsoft.com/accessibility/forrester-research-2025/

레퍼런스

표준

WCAG 2.2  현행 권고안. 2.1 대비 9개 성공 기준을 추가하고 4.1.1 Parsing을 제거해 총 86개. 그중 55개가 A/AA. 새로 들어온 9개 중 AA 이하는 2.4.11 Focus Not Obscured, 2.5.7 Dragging Movements, 2.5.8 Target Size, 3.2.6 Consistent Help, 3.3.7 Redundant Entry, 3.3.8 Accessible Authentication. 저시력, 인지 장애, 터치 기기 사용자를 겨냥한 개정.

🔗 https://www.w3.org/TR/WCAG22/

 

Understanding WCAG 2.2  기준 원문만으로 판단이 안 될 때 봐야 하는 곳. 각 기준의 의도, 통과와 실패의 경계, 예외가 왜 있는지가 여기 있음. 실무 분쟁의 대부분이 예외 조항 해석이라 실질적으로는 이쪽이 본문.

🔗 https://www.w3.org/WAI/WCAG22/Understanding/

 

How to Meet WCAG  레벨과 기술 스택으로 필터링되는 체크리스트. 매일 열게 되는 페이지.

🔗 https://www.w3.org/WAI/WCAG22/quickref/

 

WAI-ARIA 1.2  role, state, property의 규범 정의.

🔗 https://www.w3.org/TR/wai-aria-1.2/

 

ARIA Authoring Practices Guide  콤보박스, 탭, 다이얼로그 같은 걸 직접 만들 때 키보드 인터랙션 규약이 여기 있음. 예제 코드를 그대로 쓰기보다 어떤 키가 어떤 동작에 대응하는지를 보는 용도.

🔗 https://www.w3.org/WAI/ARIA/apg/

 

ARIA in HTML  어떤 HTML 요소에 어떤 role을 붙여도 되는지 규정. "div에 role=button 붙여도 되나" 류의 질문이 여기서 끝남. 첫 번째 ARIA 규칙은 여전히 ARIA를 쓰지 않는 것

🔗 https://www.w3.org/TR/html-aria/

 

accname  접근 가능한 이름이 계산되는 우선순위 정의. aria-label과 텍스트 콘텐츠가 충돌할 때, 왜 화면에 보이는 글자와 스크린리더가 읽는 글자가 다른지 설명하는 근거

🔗 https://www.w3.org/TR/accname/

 

WCAG 3.0 초안  실무 기준으로 쓰면 안 되는 작업 초안. 통과와 실패의 이분법 대신 점수제로 가려는 방향만 파악용.

🔗 https://www.w3.org/TR/wcag-3.0/

 

플랫폼 문서

MDN Accessibility  ARIA role별 개별 페이지가 명세보다 읽기 쉬움. 실무 진입점으로 가장 실용적.

🔗 https://developer.mozilla.org/en-US/docs/Web/Accessibility

 

web.dev Learn Accessibility  순서대로 볼 수 있는 무료 코스. 팀 온보딩용 분량.

🔗 https://web.dev/learn/accessibility/

 

prefers-reduced-motion  모션 축소 설정 감지. 애니메이션을 붙일 때 기본으로 깔고 가야 하는 것. WCAG 쪽 대응 기준은 2.2.2 Pause, Stop, Hide와 2.3.3 Animation from Interactions.

🔗 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

 

Apple HIG Accessibility  44pt 터치 타겟과 Dynamic Type 기준.

🔗 https://developer.apple.com/design/human-interface-guidelines/accessibility

 

Material Design Accessible design  48dp 타겟 기준

🔗 https://m3.material.io/foundations/accessible-design/overview

 

법과 규격

한국디지털접근성진흥원  국내 프로젝트의 기준점. 디지털포용법 제21조에 근거해 국가표준 KWCAG 2.2 준수 사이트에 품질인증을 부여. 인증 심사는 전문가 심사와 장애 유형별 사용자 심사를 함께 진행.

🔗 http://www.kwacc.or.kr/Accessibility/Certification

 

KWCAG 2.2 (비공식 열람본)  지침 본문을 웹에서 바로 읽을 수 있는 형태. 공식 표준 문서는 국립전파연구원 쪽.

🔗 https://a11ykr.github.io/kwcag22/

 

ADA Title II   미국 주와 지방정부 대상. 2024년 DOJ 최종 규칙으로 WCAG 2.1 AA가 명시적 기술 표준이 됨. 기한은 2026년 4월 연장 조치로 인구 5만 이상 2027년 4월, 그 미만과 특별구 2028년 4월. 연장이 소송 가능성 자체를 미루지는 않음.

🔗 https://www.ada.gov/

 

European Accessibility Act  2025년 6월 28일 시행. 공공부문만 다루던 이전 EU 규정과 달리 전자상거래, 은행, 전자책, 교통 예약, 통신 등 민간 서비스에 적용되고, EU 밖 사업자도 EU 소비자에게 판매하면 대상. 기술 기준은 EN 301 549이며 WCAG 2.1 AA를 참조. 🔗 https://www.section508.gov/

 

검사 도구

axe-core  대부분의 자동 검사 도구가 내부적으로 쓰는 엔진. 규칙 목록을 직접 읽어보면 무엇이 자동으로 잡히고 무엇이 안 잡히는지 감이 옴. 자동 검사의 한계를 팀에 설명할 때 이 목록 자체가 근거가 됨.

🔗 https://github.com/dequelabs/axe-core

 

Deque University axe 규칙  규칙별 상세 설명과 수정 방법

🔗 https://dequeuniversity.com/rules/axe/

 

eslint-plugin-jsx-a11y  JSX 정적 분석. (tailwind-a11y와 검사 영역이 겹치지 않고 보완 관계.)

🔗 https://github.com/jsx-eslint/eslint-plugin-jsx-a11y

 

WAVE  페이지 위에 오류를 겹쳐 보여줌. WebAIM Million이 이 엔진으로 조사되므로, 위 통계와 같은 기준으로 내 사이트를 재보는 셈

🔗 https://wave.webaim.org/

 

Accessibility Insights  자동 검사와 수동 검사 가이드 조합. 수동 검사 단계별 안내가 잘 돼 있어 자동 도구가 못 잡는 영역을 채우는 용도

🔗 https://accessibilityinsights.io/

 

Pa11y  CI에 붙이기 좋은 CLI

🔗 https://pa11y.org/

 

WebAIM Contrast Checker  대비 계산의 사실상 표준.

🔗 https://webaim.org/resources/contrastchecker/

 

APCA  WCAG 2의 대비 공식이 가진 한계를 지적하며 나온 대안 알고리즘. WCAG 3 논의와 연결. 아직 표준이 아니라는 점을 밝히고 인용해야 함.

🔗 https://git.apcacontrast.com/

 

보조기술

자동 검사로 안 잡히는 것들이 있어서 한 번은 직접 켜서 써봐야 함. 위 설문 기준으로 데스크톱은 Windows가 86.1%, 모바일은 iOS가 70.6%.

NVDA  무료라 개발자가 테스트 환경을 갖추기 가장 쉬움. 아시아와 유럽에서는 JAWS보다 점유율이 높음.

🔗 https://www.nvaccess.org/

 

JAWS  북미 점유율 1위. 평가판은 40분 단위로 재시작하며 사용 가능.

🔗 https://www.freedomscientific.com/products/software/jaws/

 

VoiceOver  macOS와 iOS 내장. 맥이 있으면 추가 설치 없이 바로 테스트 가능하고, 모바일 스크린리더 시장의 대부분이 여기.

🔗 https://support.apple.com/guide/voiceover/welcome/mac

 

커뮤니티 자료

The A11Y Project 체크리스트  WCAG 기준을 실무 언어로 풀어놓은 것. 명세를 읽기 전에 훑는 용도.

🔗 https://www.a11yproject.com/checklist/

Inclusive Components  탭, 토글, 카드, 데이터 테이블을 접근성 관점에서 처음부터 다시 설계하는 시리즈. 컴포넌트 라이브러리를 만든다면 사실상 교과서. 🔗 https://inclusive-components.design/

TetraLogical  명세 해석이 애매할 때 근거 있는 정리가 많음. WCAG 2.2 신규 기준 해설이 특히 정확. 🔗 https://tetralogical.com/

GOV.UK Accessibility Blog  실제 사용자 조사에 기반한 글이 많아 주장의 근거로 쓰기 좋음. 🔗 https://accessibility.blog.gov.uk/

GOV.UK Design System  접근성 테스트를 거친 컴포넌트와 그 근거가 함께 공개돼 있음. 🔗 https://design-system.service.gov.uk/

개인 블로그

Sara Soueidan  포커스 인디케이터 설계와 접근 가능한 레이블. 포커스 관련 글은 tailwind-a11y의 2.4.7 검사와 직접 연결됨. 🔗 https://www.sarasoueidan.com/

Adrian Roselli  브라우저와 스크린리더 조합별 실제 동작을 직접 테스트해 기록. 명세대로 만들었는데 안 되는 경우의 반례를 찾을 때 여기부터 🔗 https://adrianroselli.com/

Scott O'Hara  ARIA와 시맨틱 HTML의 경계. accname과 role 판단이 필요할 때. 🔗 https://www.scottohara.me/

Manuel Matuzovic  HTML 시맨틱과 CSS 접근성. 실습형 글이 많음 🔗 https://www.matuzo.at/

Hidde de Vries  명세 해설과 ARIA 오용 사례 🔗 https://hidde.blog/

Léonie Watson  스크린리더 사용자이자 표준 참여자 관점. 🔗 https://tink.uk/

 

tailwind-a11y 검사 항목별 근거

색 대비 (1.4.3 / 1.4.11)

터치 타겟 (2.5.8 / 2.5.5)

포커스 인디케이터 (2.4.7 / 2.4.11 / 2.4.13)