성공기준 이해 3.2.4:일관된 식별 (Level AA)

요약

목표

페이지 전체에 걸쳐 작업을 더 예측할 수 있다.

할 일

일관되게 반복되는 기능을 식별한다.

중요성

지속적으로 식별되는 조치는 장애인에게 특히 중요하다.

의도

이 성공 기준의 목적은 일련의 웹 페이지 내에서 반복적으로 나타나는 기능 구성 요소를 일관되게 식별하는 것이다. 화면 낭독기를 사용하는 사람들이 웹 사이트를 운용할 때 사용하는 전략은 다른 웹 페이지에 나타날 수 있는 기능에 대한 익숙함에 크게 의존한다. 동일한 기능이 서로 다른 웹 페이지에서 서로 다른 레이블(또는 보다 일반적으로 서로 다른 접근 가능한 이름)을 갖는 경우 해당 사이트를 사용하기가 훨씬 더 어려워진다. 이는 또한 인지 장애가 있는 사람들에게 혼란을 주고 인지 부하를 증가시킬 수도 있다. 따라서 일관된 라벨링이 도움이 될 것이다.

이러한 일관성은 대체 텍스트까지 확장된다. 아이콘이나 기타 텍스트가 아닌 항목의 기능이 동일한 경우 해당 대체 텍스트 항목도 일관성을 유지해야 한다.

웹 페이지 집합에 있는 다른 페이지의 구성 요소와 동일한 기능을 갖는 두 개의 구성 요소가 웹 페이지에 있는 경우 3개 모두 일관성이 있어야 한다. 따라서 같은 페이지에 있는 두 항목은 일관성이 있다.

단일 웹 페이지 내에서 항상 일관성을 유지하는 것이 바람직하고 모범 사례이지만 3.2.4에서는 세트의 두 페이지 이상에서 무언가가 반복되는 웹 페이지 세트 내의 일관성만 다룬다.

이점

• 사이트의 한 페이지에서 기능을 익힌 사람들은 원하는 기능이 있으면 다른 페이지에서도 찾을 수 있다.
• 동일한 기능을 가진 구성 요소를 식별하기 위해 텍스트가 아닌 콘텐츠가 일관된 방식으로 사용되면 텍스트를 읽거나 대체 텍스트 항목을 감지하는 데 어려움을 겪는 사람들은 대체 텍스트 항목에 의존하지 않고 웹과 상호 작용할 수 있다.
• 대체 텍스트에 의존하는 사람들은 더 예측 가능한 경험을 가질 수 있다. 또한 여러 페이지에 일관된 레이블이 있는 경우 구성 요소를 검색할 수도 있다.

예제

예 1: 문서 아이콘

문서 아이콘은 사이트 전체에서 문서 다운로드를 나타내는 데 사용된다. 아이콘에 대한 대체 텍스트는 항상 "다운로드"라는 단어로 시작하고 그 뒤에 문서 제목의 축약형이 온다. 다양한 문서의 문서 이름을 식별하기 위해 다양한 텍스트 대체를 사용하는 것은 텍스트 대체를 일관되게 사용하는 것이다.

예 2: 체크 표시

체크 표시 아이콘은 한 페이지에서는 "승인됨"으로 작동하지만 다른 페이지에서는 "포함"으로 작동한다. 서로 다른 기능을 제공하므로 대체 텍스트도 다르다.

예시 3: 다른 페이지에 대한 일관된 참조

웹사이트는 온라인으로 기사를 게시한다. 각 기사는 여러 웹 페이지에 걸쳐 있으며 각 페이지에는 기사의 첫 번째 페이지, 다음 페이지 및 이전 페이지에 대한 링크가 포함되어 있다. 다음 페이지에 대한 참조가 "2페이지", "3페이지", "4페이지" 등으로 읽는 경우 레이블은 동일하지 않지만 일관성이 있다. 따라서 이러한 참조는 이 적합 기준의 실패가 아니다.

예 4: 비슷한 기능을 가진 아이콘

전자 상거래 애플리케이션은 사용자가 영수증과 송장을 인쇄할 수 있는 프린터 아이콘을 사용한다. 응용 프로그램의 한 부분에서 프린터 아이콘은 "영수증 인쇄"라는 레이블이 붙어 영수증을 인쇄하는 데 사용되는 반면, 다른 부분에서는 "송장 인쇄"라는 레이블이 붙어 송장을 인쇄하는 데 사용된다. 레이블은 일관되지만("x 인쇄") 아이콘의 다양한 기능을 반영하기 위해 레이블이 다르다. 따라서 이 예는 성공 기준을 실패하지 않는다.

예 5: 저장 아이콘

여러 웹페이지에서 페이지 저장 기능을 제공하는 사이트 전체에서 공통적으로 사용되는 "저장" 아이콘이 사용된다.

예 6: 동일한 목적지에 대한 아이콘 및 인접 링크

대체 텍스트와 링크가 있는 아이콘은 서로 옆에 있으며 동일한 위치로 이동한다. 가장 좋은 방법은 H2: Combining adjacent image and text links for the same resource에 따라 하나의 링크로 그룹화하는 것이다. 그러나 시각적으로는 위아래로 배치됐지만 소스에서는 분리되어 있는 경우에는 불가능할 수 있다. 성공 기준을 충족시키기 위해서는 이 두 링크의 링크 텍스트가 동일할 필요는 없지만 일관성은 있어야 한다. 하지만 모범 사례는 동일한 텍스트를 사용하여 사용자가 두 번째 링크를 발견했을 때 첫 번째 링크와 동일한 위치로 이동한다는 것이 명확하게 하는 것이다.

예 7: 실패 사례

한 웹 페이지의 제출 "검색" 버튼과 다른 웹 페이지의 "찾기" 버튼에는 모두 용어를 입력하고 제출된 용어와 관련된 웹 사이트의 항목을 나열하는 필드가 있다. 이 경우 버튼의 기능은 동일하지만 레이블에 일관성이 없다.

예 8: 주로 보조 기술 사용자에게 영향을 미치는 실패 사례

기능이 동일한 두 개의 버튼이 시각적으로는 동일한 텍스트를 가지고 있지만, 다른 aria-label="..." 접근 가능한 이름이 지정되어 있다. 보조 기술 사용자들에게는 이 두 개의 버튼이 다르게 그리고 일관성 없이 전달될 것이다.

기법

이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.