5.3.3 명확한 지시사항 제공

요구 사항

특정 요소를 가리키거나 지시사항을 전달하는 콘텐츠에 적용되는 항목으로, 지시사항을 시각이나 청각 같은 한 가지 감각에만 의존해 제공하면 안 됩니다. 텍스트(대체 텍스트 포함)는 보조기술이 다른 감각으로 바꿀 수 있으므로 텍스트 지시사항에 음성을 따로 추가할 필요는 없습니다.

• 색·크기·모양·위치 정보: “동그란 버튼을 누르세요”, “오른쪽 버튼을 누르세요”처럼 가리킬 때, 대상의 실제 이름이나 대체 텍스트로 지칭하거나 다른 감각으로 보완하는 정보를 함께 제공합니다.
• 음성·음향 정보: 비프음으로만 정답·오답을 알리면 청각장애인이나 스피커가 없는 사용자는 알 수 없으므로 시각적으로도 확인할 수 있게 합니다.

KWCAG 2.1의 해당 항목: 5.3.2 명확한 지시 사항 제공(5.3 명료성 지침)

왜 필요한가요

화면낭독기 사용자는 화면의 모양과 위치를 볼 수 없고, 청각장애인은 소리 신호를 들을 수 없습니다. 지시사항이 한 감각에만 의존하면 해당 감각을 쓸 수 없는 사용자는 무엇을 해야 하는지 알 수 없습니다.

도움받는 사용자

• 시각장애인
• 청각장애인
• 색각이상이 있는 사용자
• 인지장애가 있는 사용자

적용 방법

지시문에는 대상의 이름(버튼 텍스트, 레이블)을 씁니다. 위치·모양을 함께 쓰고 싶다면 이름을 덧붙입니다. 소리 알림에는 화면 메시지를 함께 표시하고, 동적으로 나타나는 메시지는 라이브 리전으로 알립니다.

<!-- 비권장: "오른쪽 초록 버튼을 누르세요" -->
<p>입력을 마쳤으면 <strong>[신청하기]</strong> 버튼을 누르세요.</p>

<!-- 소리와 함께 텍스트로도 결과 표시 -->
<p role="status" id="quiz-result">정답입니다. 다음 문제로 넘어갑니다.</p>

사례

<p>필수 항목(<abbr title="필수">*</abbr> 표시)을 모두 입력한 뒤 [다음] 버튼을 누르세요.</p>

<p>오른쪽 위 동그란 아이콘을 눌러 설정을 바꾸세요.</p>

자주 하는 실수

• “빨간색 항목은 필수입니다”처럼 색으로만 지칭합니다(5.4.1과 함께 위반).
• “아래 그림의 왼쪽 버튼”처럼 위치·모양만으로 대상을 지칭합니다.
• 시험·퀴즈에서 효과음으로만 정답 여부를 알립니다.

검사 방법

• 페이지의 안내문·지시문에서 색, 모양, 크기, 위치, 소리로 대상을 지칭하는 표현을 찾습니다.
• 그런 표현이 있으면 대상의 이름·대체 텍스트 등 다른 정보로도 식별할 수 있는지 확인합니다.
• 소리 알림이 있으면 소리를 끈 상태에서도 같은 정보를 알 수 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목