3.3.5 도움말

요구 사항

상황에 맞는 도움말(context-sensitive help)을 제공해야 합니다. 특정 입력 필드나 단계에서 바로 확인할 수 있는 설명, 예시, 도움말 링크 등이 해당합니다. 레이블만으로 충분하면 추가 도움말이 필요하지 않을 수 있습니다.

왜 필요한가요

복잡한 양식에서 어떤 값을 넣어야 할지 바로 확인할 수 있으면 인지장애·학습장애 사용자를 포함한 모든 사용자의 실수가 줄어듭니다.

도움받는 사용자

• 인지장애·학습장애 사용자
• 고령 사용자
• 처음 이용하는 사용자

적용 방법

필드 옆에 예시와 설명을 두거나, 펼침 버튼으로 자세한 도움말을 보여 줍니다. 펼침 구현은 펼침(Disclosure) 패턴을 참고하세요.

<label for="biz">사업자 등록 번호</label>
<input id="biz" aria-describedby="biz-hint">
<p id="biz-hint">10자리 숫자이며, 사업자등록증 오른쪽 위에 있습니다.</p>
<button type="button" aria-expanded="false" aria-controls="biz-help">번호를 모르면?</button>
<div id="biz-help" hidden>...</div>

자주 하는 실수

• 전문 지식이 필요한 입력 항목에 설명이나 예시가 없습니다.

검사 방법

• 입력이 필요한 각 단계에 상황별 도움말(설명, 예시, 링크)이 있는지 확인합니다.

관련 ARIA

참고 자료

• WCAG 2.2 원문: 3.3.5 (새 창)