3.2.4 일관된 식별

요구 사항

웹 페이지 묶음 안에서 기능이 같은 구성 요소는 일관되게 식별되어야 합니다. 예를 들어 한 페이지에서 "검색"이라고 부른 버튼을 다른 페이지에서 "찾기", "Go"로 부르지 않습니다. 같은 아이콘에는 같은 대체 텍스트를 씁니다.

"일관"은 완전히 똑같은 글자를 요구하는 것은 아닙니다. "다음 페이지(3페이지)", "다음 페이지(4페이지)"처럼 기능이 같고 이름이 일관된 패턴이면 됩니다. 반대로 기능이 다른데 이름이 같으면 혼란을 줄 수 있으므로 피합니다.

왜 필요한가요

사용자는 한 번 배운 기능을 다른 페이지에서도 같은 이름으로 찾습니다. 화면낭독기 사용자는 버튼 목록, 링크 목록에서 이름으로 기능을 찾으므로, 이름이 다르면 같은 기능인지 알 수 없습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 인지장애·학습장애 사용자
• 음성 인식 사용자

적용 방법

공통 컴포넌트(아이콘 버튼, 장바구니, 검색 등)의 접근 가능한 이름을 디자인 시스템에서 한 곳에 정의해 재사용합니다. 자세한 이름 짓기는 접근 가능한 이름 가이드를 참고하세요.

<!-- 모든 페이지에서 같은 이름 -->
<button type="button" aria-label="장바구니 열기">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

자주 하는 실수

• 같은 아이콘 버튼의 대체 텍스트가 페이지마다 다릅니다(예: "인쇄", "프린트", "출력").
• 같은 기능의 링크 텍스트가 페이지마다 다르게 쓰입니다.

검사 방법

• 여러 페이지에 반복되는 기능 요소를 찾습니다.
• 각 요소의 보이는 이름과 접근 가능한 이름(대체 텍스트, aria-label 등)이 페이지 사이에 일관되는지 비교합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.2.4 (새 창)