성공 기준(SC)
3.2.4 일관된 식별
(Level AA)
- 목표
- 동작이 여러 페이지에 걸쳐 더 예측 가능하다.
- 할 일
- 반복되는 기능을 일관되게 식별한다.
- 중요성
- 기능을 일관되게 식별하는 것은 특히 장애를 가진 사람들에게 중요하다.
이 성공 기준의 목적은 웹 페이지 세트 안에서 반복적으로 나타나는 기능 컴포넌트를 일관되게 식별하도록 보장하는 것이다. 스크린리더 사용자가 웹사이트를 이용할 때 사용하는 전략 중 하나는, 여러 웹 페이지에 걸쳐 나타날 수 있는 기능에 대한 익숙함에 크게 의존하는 것이다. 동일한 기능이 서로 다른 웹 페이지에서 다른 레이블(또는 더 일반적으로 다른 접근 가능한 이름)을 가진다면, 그 사이트는 사용하기 상당히 어려워진다. 이는 또한 인지적 제약이 있는 사람에게 혼란을 주고 인지 부하를 늘릴 수 있다. 따라서 일관된 레이블링이 도움이 된다.
이러한 일관성은 대체 텍스트에도 적용된다. 아이콘이나 그 밖의 텍스트가 아닌 항목이 동일한 기능을 가진다면, 그 대체 텍스트 역시 일관되어야 한다.
웹 페이지 세트 중에서 한 페이지에 있는 두 컴포넌트가 모두 다른 페이지에 있는 한 컴포넌트와 동일한 기능을 가진다면, 이 셋은 모두 일관되어야 한다. 따라서 같은 페이지에 있는 두 컴포넌트도 서로 일관된다.
하나의 웹 페이지 안에서 항상 일관성을 유지하는 것이 바람직하며 모범 사례이지만, 3.2.4 일관된 식별은 웹 페이지 세트 안에서 어떤 요소가 두 개 이상의 페이지에 반복되는 경우의 일관성만을 다룬다.
- 사이트의 한 페이지에서 기능을 익힌 사람은, 원하는 기능이 다른 페이지에도 있다면 그것을 찾을 수 있다.
- 텍스트가 아닌 콘텐츠가 동일한 기능을 가진 컴포넌트를 식별하는 데 일관된 방식으로 사용되면, 텍스트를 읽거나 대체 텍스트를 인식하는 데 어려움이 있는 사람도 대체 텍스트에 의존하지 않고 웹과 상호작용할 수 있다.
- 대체 텍스트에 의존하는 사람은 더 예측 가능한 경험을 할 수 있다. 또한 컴포넌트가 여러 페이지에서 일관된 레이블을 가진다면, 그것을 검색할 수도 있다.
- 예 1: 문서 아이콘
사이트 전체에서 문서 다운로드를 나타내기 위해 문서 아이콘이 사용된다. 이 아이콘의 대체 텍스트는 항상 “다운로드”라는 단어로 시작하고, 그 뒤에 문서 제목을 축약한 형태가 이어진다. 서로 다른 문서 이름을 나타내기 위해 다른 대체 텍스트를 사용하는 것은 대체 텍스트를 일관되게 사용하는 예다.
- 예 2: 체크 표시
체크 표시 아이콘은 한 페이지에서는 “승인됨” 기능으로 사용되고, 다른 페이지에서는 “포함됨” 기능으로 사용된다. 이들은 서로 다른 기능을 수행하므로 서로 다른 대체 텍스트를 가진다.
- 예 3: 다른 페이지에 대한 일관된 참조
한 웹사이트가 온라인으로 기사를 게재한다. 각 기사는 여러 웹 페이지에 걸쳐 있으며, 각 페이지에는 기사의 첫 페이지, 다음 페이지, 이전 페이지로 연결되는 링크가 있다. 다음 페이지에 대한 참조가 “2페이지”, “3페이지”, “4페이지” 등으로 표시된다면, 이 레이블은 동일하지는 않지만 일관성이 있다. 따라서 이러한 참조는 이 성공 기준의 오류에 해당하지 않는다.
- 예 4: 유사한 기능을 가진 아이콘
한 전자상거래 애플리케이션에서 프린터 아이콘을 사용하여 사용자가 영수증과 청구서를 인쇄할 수 있도록 한다. 애플리케이션의 한 부분에서는 프린터 아이콘에 “영수증 인쇄”라는 레이블이 붙어 영수증을 인쇄하는 데 사용되고, 다른 부분에서는 “청구서 인쇄”라는 레이블이 붙어 청구서를 인쇄하는 데 사용된다. 이 레이블링은 (“X 인쇄”라는 형태로) 일관되지만, 아이콘의 서로 다른 기능을 반영하기 위해 레이블 자체는 다르다. 따라서 이 예제는 이 성공 기준을 위반하지 않는다.
- 예 5: 저장 아이콘
저장 기능이 제공되는 여러 웹 페이지 전반에서 공통된 “저장” 아이콘이 사용된다.
- 예 6: 동일한 대상으로 연결되는 아이콘과 인접한 링크
대체 텍스트가 있는 아이콘과 링크가 서로 인접해 있으며 동일한 위치로 연결된다. 모범 사례는 H2: 동일한 자원에 대한 인접한 이미지 링크와 텍스트 링크 결합하기에 따라 이 둘을 하나의 링크로 묶는 것이다. 그러나 이 둘이 시각적으로는 위아래로 배치되어 있지만 소스상으로는 분리되어 있다면, 이렇게 결합하는 것이 불가능할 수도 있다. 이 성공 기준을 충족하려면 이 두 링크의 링크 텍스트가 동일할 필요는 없고 일관되기만 하면 된다. 다만 모범 사례는 텍스트를 동일하게 하여, 사용자가 두 번째 링크를 만났을 때 그것이 첫 번째 링크와 같은 곳으로 연결된다는 것을 분명히 알 수 있도록 하는 것이다.
- 예 7: 부적합 사례
한 웹 페이지의 “검색(search)” 제출 버튼과 다른 웹 페이지의 “찾기(find)” 버튼은 둘 다 검색어를 입력하는 필드가 있고, 제출된 검색어와 관련된 웹사이트 내 주제를 나열한다. 이 경우 두 버튼은 동일한 기능을 하지만 일관되게 레이블이 지정되어 있지 않다.
- 예 8: 주로 보조 기술 사용자에게 영향을 미치는 오류
동일한 기능을 하는 두 버튼이 시각적으로는 동일한 텍스트를 가지지만, 서로 다른
aria-label="..."의 접근 가능한 이름이 부여되어 있다. 보조 기술 사용자에게는 이 두 버튼이 서로 다르고 일관되지 않게 안내된다.
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
- G197: Using labels, names, and text alternatives consistently for content that has the same functionality AND following the Sufficient techniques for Success Criterion 1.1.1 and Sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives.
참고
“일관된” 대체 텍스트가 항상 “동일한” 것은 아니다. 예를 들어 웹 페이지 하단에 다음 웹 페이지로 연결되는 화살표 그래픽이 있다고 하자. 이 대체 텍스트는 “4페이지로 이동”이라고 되어 있을 수 있다. 당연히 다음 웹 페이지에서 이 대체 텍스트를 그대로 반복하는 것은 적절하지 않다. “5페이지로 이동”이라고 하는 것이 더 적절할 것이다. 이러한 대체 텍스트는 동일하지는 않지만 일관성이 있으며, 따라서 이 성공 기준을 충족한다.
하나의 텍스트가 아닌 콘텐츠 항목이 서로 다른 여러 기능을 수행하는 데 사용될 수 있다. 이런 경우에는 서로 다른 대체 텍스트가 필요하며 사용되어야 한다. 이러한 예제는 체크 표시, 엑스 표시, 교통 표지판 같은 아이콘을 사용할 때 흔히 볼 수 있다. 이들의 기능은 웹 페이지의 맥락에 따라 달라질 수 있다. 체크 표시 아이콘은 상황에 따라 “승인됨”, “완료됨”, “포함됨” 등의 기능을 할 수 있다. 모든 웹 페이지에서 대체 텍스트로 “체크 표시”를 사용하는 것은 사용자가 아이콘의 기능을 이해하는 데 도움이 되지 않는다. 동일한 텍스트가 아닌 콘텐츠가 여러 기능을 수행하는 경우에는 서로 다른 대체 텍스트를 사용할 수 있다.
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.