# 저희가 테스트하는 접근성 문제 각 페이지는 저희 자동화 테스트가 찾아내는 문제 하나를 다룹니다. 문제의 의미, 관련된 WCAG 기준, 모든 사이트와 Shopify, WooCommerce에서의 수정 방법, 수정 확인 방법을 설명합니다. ## 접근성 문제 - [ARIA hidden 엘리먼트는 반드시 초점을 얻을 수 있는(focusable) 엘리먼트를 포함하지 않아야 합니다](https://www.fixreports.com/ko/issues/aria-hidden-focus): WCAG 4.1.2 · 레벨 A. 포커스를 받을 수 있는 요소가 스크린 리더에서는 숨겨져 있지만 키보드로는 여전히 도달할 수 있습니다. (ARIA 속성과 역할) - [autocomplete 어트리뷰트는 반드시 올바르게 사용되어야 합니다](https://www.fixreports.com/ko/issues/autocomplete-valid): WCAG 1.3.5 · 레벨 AA. 양식 필드가 브라우저가 인식하지 못하는 autocomplete 값을 사용합니다. (레이블이 없는 양식 필드) - [버튼에 반드시 인식 가능한 텍스트가 있어야 합니다](https://www.fixreports.com/ko/issues/button-name): WCAG 4.1.2 · 레벨 A. 일부 버튼에 접근 가능한 이름이 없어 스크린 리더 사용자에게는 ‘버튼’이라고만 들립니다. (이름이 없는 링크와 버튼) - [엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다](https://www.fixreports.com/ko/issues/color-contrast): WCAG 1.4.3 · 레벨 AA. 일부 텍스트가 배경과 충분히 구분되지 않아 저시력인 사람이 읽기 어렵습니다. (낮은 색상 대비) - [탐색에 도움이 되도록 문서에는 반드시 이 있어야 합니다](https://www.fixreports.com/ko/issues/document-title): WCAG 2.4.2 · 레벨 A. 페이지에 제목이 없어 사용자가 현재 어느 페이지에 있는지 알 수 없습니다. (페이지 제목) - [ARIA 및 label에 사용된 ID는 반드시 고유해야 합니다](https://www.fixreports.com/ko/issues/duplicate-id-aria): WCAG 4.1.2 · 레벨 A. 레이블이나 설명에 쓰이는 id를 여러 요소가 함께 사용하고 있어, 보조 기술이 잘못된 레이블을 읽을 수 있습니다. (ARIA 속성과 역할) - [프레임에는 반드시 접근 가능한 이름이 있어야 합니다](https://www.fixreports.com/ko/issues/frame-title): WCAG 4.1.2 · 레벨 A. 삽입된 프레임(주로 지도, 동영상, 앱 위젯)에 제목이 없어 스크린 리더 사용자는 그 안에 무엇이 있는지 알 수 없습니다. (페이지 구조, 헤딩, 랜드마크) - [제목 수준은 한 단계씩 증가해야만 합니다](https://www.fixreports.com/ko/issues/heading-order): 접근성 모범 사례. 헤딩 수준이 중간을 건너뛰어(예: H2에서 H4로) 스크린 리더 사용자가 페이지 구조를 이해하기 어렵습니다. (페이지 구조, 헤딩, 랜드마크) - [<html> 엘리먼트는 반드시 lang 어트리뷰트를 가져야 합니다](https://www.fixreports.com/ko/issues/html-has-lang): WCAG 3.1.1 · 레벨 A. 페이지가 언어를 선언하지 않아 스크린 리더가 잘못된 발음으로 읽을 수 있습니다. (페이지 언어) - [<html> 엘리먼트는 반드시 lang 어트리뷰트에 유효한 값을 가져야 합니다](https://www.fixreports.com/ko/issues/html-lang-valid): WCAG 3.1.1 · 레벨 A. 페이지의 언어 코드가 유효하지 않아 스크린 리더가 알맞은 음성을 선택할 수 없습니다. (페이지 언어) - [이미지는 반드시 대체텍스트를 가져야 합니다](https://www.fixreports.com/ko/issues/image-alt): WCAG 1.1.1 · 레벨 A. 이미지에 대체 텍스트가 없어 스크린 리더 사용자는 이미지가 무엇을 보여 주는지 알 수 없습니다. (대체 텍스트가 없는 이미지) - [입력 버튼은 반드시 인식 가능한 텍스트를 가져야 합니다](https://www.fixreports.com/ko/issues/input-button-name): WCAG 4.1.2 · 레벨 A. input 버튼에 텍스트가 없어 스크린 리더가 버튼의 기능을 알려 줄 수 없습니다. (레이블이 없는 양식 필드) - [이미지 버튼은 반드시 대체텍스트를 가져야 합니다](https://www.fixreports.com/ko/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · 레벨 A. 이미지 버튼에 대체 텍스트가 없어 스크린 리더가 버튼의 기능을 알려 줄 수 없습니다. (대체 텍스트가 없는 이미지) - [form 엘리먼트는 반드시 레이블을 가져야 합니다](https://www.fixreports.com/ko/issues/label): WCAG 4.1.2 · 레벨 A. 일부 양식 필드에 레이블이 없어 스크린 리더 사용자는 무엇을 입력해야 하는지 알 수 없습니다. (레이블이 없는 양식 필드) - [문서는 하나의 main 랜드마크를 가져야 합니다](https://www.fixreports.com/ko/issues/landmark-one-main): 접근성 모범 사례. 페이지에 main 랜드마크가 없어 스크린 리더 사용자가 본문으로 바로 이동할 수 없습니다. (페이지 구조, 헤딩, 랜드마크) - [링크는 반드시 색상에 의존하지 않는 방식으로 주변 텍스트로부터 구별되어야 합니다](https://www.fixreports.com/ko/issues/link-in-text-block): WCAG 1.4.1 · 레벨 A. 단락 안의 링크가 색상으로만 구분되어, 색상 차이를 볼 수 없는 사람은 링크를 알아보지 못합니다. (낮은 색상 대비) - [링크는 반드시 인식 가능한 텍스트를 가져야 합니다](https://www.fixreports.com/ko/issues/link-name): WCAG 2.4.4, 4.1.2 · 레벨 A. 일부 링크에 스크린 리더가 읽을 수 있는 텍스트가 없습니다. 소셜 아이콘이나 장바구니 아이콘처럼 아이콘만 있는 링크가 흔한 예입니다. (이름이 없는 링크와 버튼) - [확대/축소 및 크기 조정은 비활성화되지 않아야 합니다](https://www.fixreports.com/ko/issues/meta-viewport): WCAG 1.4.4 · 레벨 AA. 페이지가 모바일에서 핀치 줌(두 손가락 확대)을 막습니다. (확대와 리플로) - [페이지는 1 레벨 제목을 포함해야 합니다](https://www.fixreports.com/ko/issues/page-has-heading-one): 접근성 모범 사례. 페이지에 최상위 헤딩이 없습니다. (페이지 구조, 헤딩, 랜드마크) - [모든 페이지 콘텐츠는 랜드마크에 포함되어야 합니다](https://www.fixreports.com/ko/issues/region): 접근성 모범 사례. 일부 콘텐츠가 페이지 랜드마크(header, nav, main, footer) 안에 있지 않습니다. (페이지 구조, 헤딩, 랜드마크) - [[role='img'] 엘리먼트는 대체텍스트를 가저야 합니다](https://www.fixreports.com/ko/issues/role-img-alt): WCAG 1.1.1 · 레벨 A. 이미지로 표시되는 요소에 대체 텍스트가 없습니다. (대체 텍스트가 없는 이미지) - [스크롤 가능한 영역이 키보드 접근을 가져야 합니다](https://www.fixreports.com/ko/issues/scrollable-region-focusable): WCAG 2.1.1 · 레벨 A. 스크롤 영역에 키보드로 접근할 수 없어 키보드 사용자가 스크롤할 수 없습니다. (키보드 접근과 포커스) - [select 엘리먼트는 반드시 접근 가능한 이름을 가져야 합니다](https://www.fixreports.com/ko/issues/select-name): WCAG 4.1.2 · 레벨 A. 드롭다운(주로 정렬이나 옵션 선택기)에 레이블이 없습니다. (레이블이 없는 양식 필드) - [img 역할(role)을 가진 svg 엘리먼트는 접근 가능한 텍스트를 가져야 합니다](https://www.fixreports.com/ko/issues/svg-img-alt): WCAG 1.1.1 · 레벨 A. 정보를 전달하는 SVG 이미지에 대체 텍스트가 없습니다. (대체 텍스트가 없는 이미지) - [모든 터치 대상은 반드시 24px 크기이거나 충분한 간격을 두어야 합니다](https://www.fixreports.com/ko/issues/target-size): WCAG 2.5.8 · 레벨 AA. 일부 탭 대상이 24×24 픽셀보다 작고 서로 너무 가까워 휴대폰에서 누르기 어렵습니다. (키보드 접근과 포커스)