웹 접근성 검사기

흔한 문제를 해결하는 방법

• 대비율 기준을 충족하지 못하는 텍스트

  일반 텍스트는 배경과의 대비율이 4.5:1 이상, 큰 텍스트(약 24 px, 굵은 글꼴은 약 18.7 px)는 3:1 이상이어야 합니다. 요소를 하나씩 고치기보다 테마 설정이나 디자인 토큰에서 색상을 바꾸고, 그런 다음 플레이스홀더 텍스트, 호버 상태, 이미지 위의 텍스트를 다시 확인하십시오.

• 대체 텍스트가 없는 이미지

  의미가 있는 이미지에는 상품명과 색상처럼 이미지가 보여 주는 내용이나 하는 일을 설명하는 alt 속성을 지정하십시오. 장식용 이미지에는 빈 alt(alt="")를 지정해 스크린 리더가 건너뛰게 합니다. Shopify에서는 상품의 미디어 섹션에서 이미지를 선택해 대체 텍스트를 추가하고, WordPress에서는 미디어 라이브러리의 대체 텍스트 필드에 입력합니다.

• 레이블이 없는 양식 필드

  각 입력 필드에 해당 필드의 id와 일치하는 <label for>로 레이블을 연결하거나, 보이는 텍스트가 없다면 aria-label을 사용하십시오. 플레이스홀더 텍스트만 레이블로 쓰지 마십시오. 입력을 시작하자마자 사라집니다. 뉴스레터 구독란과 헤더의 검색창이 흔한 원인입니다.

• 접근 가능한 이름이 없는 버튼과 링크

  장바구니, 검색, 메뉴, 소셜 프로필용 아이콘 컨트롤에는 SVG만 들어 있는 경우가 많습니다. 컨트롤이 하는 일을 알려 주는 보이는 텍스트나 aria-label(“아이콘”이 아니라 “장바구니 열기”)을 추가하고, SVG 자체에는 aria-hidden="true"를 추가하십시오.

• 포커스를 가두는 쿠키 배너

  배너의 모든 버튼에 Tab 키로 도달하고 Enter나 Space 키로 사용할 수 있는지, 배너를 닫으면 포커스가 페이지로 돌아오는지, 페이지를 가리지 않는 배너라면 포커스를 전혀 붙잡지 않는지 확인하십시오. 동의 관리 도구의 설정을 확인하고, 스크립트가 오래되었다면 업데이트하십시오.

• CSS에서 제거된 포커스 윤곽선

  스타일시트에서 링크, 버튼, :focus에 지정된 outline: none 또는 outline: 0을 찾으십시오. 이를 :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } 같은 보이는 스타일로 바꾸십시오.