이 규칙이 확인하는 내용
링크가 인식 가능한 텍스트를 가지고 있는지 확인하세요.
중요한 이유
WCAG 2.4.4와 4.1.2는 링크에 목적을 설명하는 접근 가능한 이름이 있어야 한다고 요구합니다.
수정 방법
- 이름이 없는 링크를 찾으십시오. 대부분 <a> 태그 안의 아이콘이나 이미지입니다.
- 링크 안에 시각적으로 숨긴 텍스트를 넣거나 aria-label="Instagram", aria-label="Cart" 같은 aria-label을 추가하십시오.
- 링크가 이미지를 감싸고 있다면 대신 이미지에 의미 있는 대체 텍스트를 지정하십시오.
수정 확인 방법
- 다시 스캔해 link-name 항목이 사라졌는지 확인하십시오.
- 스크린 리더를 켠 상태에서 Tab 키로 각 링크로 이동해 이름을 들어 보십시오.
FixReports가 찾아내는 방법
저희 스캔은 테스트하는 모든 페이지에서 실제 Chrome 브라우저로 axe-core 규칙 link-name을(를) 실행하고, 실패한 요소마다 해당 페이지와 마크업, 그리고 해당하는 경우 스크린샷을 함께 보고합니다.
자동화 테스트는 이 특정 문제가 있다는 것을 확인할 뿐, 페이지의 나머지 부분이 접근 가능한지는 알 수 없습니다. 어떤 장벽은 사람이 페이지를 확인해야만 드러납니다.