명확한 지시사항 제공

무엇을 요구하나요?

사용 방법을 안내하는 지시사항은 모양, 크기, 위치, 방향, 색, 소리만으로 설명하지 않아야 합니다. 화면을 보지 못하는 사용자는 “오른쪽”, “동그란”, “빨간”을 알 수 없고, 색을 구별하기 어려운 사용자도 있습니다.

이렇게만 쓰면	이렇게 함께 쓰기
오른쪽 위 버튼을 누르세요	오른쪽 위 [로그인] 버튼을 누르세요
빨간 글씨 항목은 필수입니다	* 표시된 항목은 필수입니다
동그란 아이콘을 누르면 저장됩니다	[저장](동그란 아이콘)을 누르면 저장됩니다
삐 소리가 나면 다시 입력하세요	오류 안내 문구가 나오고 경고음이 울리면…

자주 틀리는 예

1. 필수 항목을 색으로만 안내

<p>빨간색 항목은 꼭 입력하세요.</p>
<label for="name" class="red">이름</label>

<p><span aria-hidden="true">*</span> 표시는 필수 입력 항목입니다.</p>
<label for="name">이름 <span aria-hidden="true">*</span><span class="sr-only">(필수)</span></label>
<input id="name" required>

required 속성을 함께 쓰면 화면 낭독기가 “필수”라고 알려줍니다.

2. 버튼을 위치·모양으로만 가리킴

<p>아래 초록색 버튼을 눌러 신청을 완료하세요.</p>

<p>아래 [신청 완료] 버튼을 눌러 신청을 마치세요.</p>

확인하는 방법

1. 화면을 보지 않고 안내 문구만 읽었을 때 무엇을 눌러야 하는지 알 수 있는지 확인하세요.
2. 페이지에서 “왼쪽, 오른쪽, 위, 아래, 빨간, 파란, 동그란, 네모” 같은 단어를 검색해 지시사항에 쓰였는지 살펴보세요.
3. 자동 검사로는 찾기 어려운 항목입니다. 수동 점검표에 결과를 기록하세요.