3.3.8 접근 가능한 인증(최소)

요구 사항

인증 과정의 어떤 단계에서도 인지 기능 테스트(cognitive function test)를 요구하지 않아야 합니다. 단, 그 단계가 다음 중 하나를 제공하면 허용됩니다.

• 대안: 인지 기능 테스트에 의존하지 않는 다른 인증 방법
• 보조 수단: 인지 기능 테스트를 도와주는 수단(예: 비밀번호 관리자 자동 입력, 붙여넣기 허용)
• 사물 인식: 테스트가 사물을 알아보는 것인 경우(예: "자동차가 있는 사진을 모두 고르세요" 같은 CAPTCHA)
• 개인 콘텐츠: 사용자가 그 사이트에 직접 제공한 비텍스트 콘텐츠(사진 등)를 알아보는 경우

인지 기능 테스트란 정보를 기억하거나, 변형하거나, 옮겨 적는 작업입니다. 비밀번호 기억, 문자 옮겨 적기, 계산, 퍼즐 풀기 등이 해당합니다. 이름, 이메일 주소, 전화번호 같은 일반적인 식별자 입력은 인지 기능 테스트로 보지 않습니다.

문자 메시지로 받은 인증 번호를 손으로 옮겨 적어야만 한다면 인지 기능 테스트입니다. 붙여넣기가 가능하고 브라우저·운영체제가 자동으로 채울 수 있으면 보조 수단이 있는 것으로 봅니다. 사물 인식과 개인 콘텐츠 예외는 AA 수준에서만 허용되며, AAA인 3.3.9에서는 허용되지 않습니다.

왜 필요한가요

인지장애, 학습장애, 기억력 장애가 있는 사용자는 비밀번호를 기억하거나 왜곡된 문자를 옮겨 적기 어렵습니다. 붙여넣기를 막거나 비밀번호의 일부 글자만 골라 입력하게 하면, 비밀번호 관리자에 의존하는 사용자가 로그인할 수 없게 됩니다. 로그인할 수 없으면 서비스 전체를 이용할 수 없습니다.

도움받는 사용자

• 인지장애·학습장애 사용자
• 기억력 장애 사용자
• 읽기장애(난독증) 사용자
• 비밀번호 관리자에 의존하는 운동장애 사용자

적용 방법

가장 기본적인 방법은 아이디·비밀번호 필드를 올바르게 마크업해 비밀번호 관리자와 브라우저가 자동 입력할 수 있게 하고, 붙여넣기를 막지 않는 것입니다.

<form action="/login" method="post">
  <label for="user">아이디(이메일)</label>
  <input id="user" name="username" type="email" autocomplete="username">

  <label for="pw">비밀번호</label>
  <input id="pw" name="password" type="password" autocomplete="current-password">

  <button type="submit">로그인</button>
</form>

<label for="otp">인증 번호</label>
<input id="otp" name="otp" inputmode="numeric" autocomplete="one-time-code">

인지 기능 테스트가 없는 대안 인증도 좋은 방법입니다.

• 이메일 링크 로그인(매직 링크)
• 패스키·WebAuthn(지문, 얼굴 인식, 보안 키)
• 소셜 로그인(OAuth) 등 외부 인증
• 앱 푸시 승인, QR 코드 스캔

사례

<input type="password" onpaste="return false" autocomplete="off">

<input maxlength="1" aria-label="첫째 자리"><input maxlength="1" aria-label="둘째 자리">
<!-- ...붙여넣기 이벤트 처리 없음 -->

자주 하는 실수

• 비밀번호·인증 번호 입력 필드에서 붙여넣기를 막습니다.
• autocomplete="off" 등으로 비밀번호 관리자의 자동 입력을 막습니다.
• 비밀번호의 일부 글자(예: 첫째·셋째·다섯째 글자)만 골라 입력하게 해 옮겨 적기를 강요합니다.
• 계산형·문자 옮겨 적기 CAPTCHA를 대안 없이 요구합니다.

검사 방법

• 로그인·본인 확인 등 인증 과정의 모든 단계를 확인합니다.
• 각 단계에 기억·옮겨 적기·계산·퍼즐이 필요한지 확인합니다.
• 필요하다면 비밀번호 관리자 자동 입력과 붙여넣기가 되는지, 또는 다른 인증 방법이 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 3.3.8 (새 창)
• H100: 올바르게 마크업한 이메일·비밀번호 입력란 (새 창)
• F109: 같은 형식의 비밀번호·코드 재입력을 막는 실패 사례 (새 창)