쇼핑몰 결제 폼에서 필수 입력값(aria-required)과 실시간 유효성 검증의 올바른 조화

이커머스 결제 화면, 회원가입 페이지, 공공기관 민원 신청서와 같은 복잡한 웹 폼을 설계할 때 가장 핵심적인 과제 중 하나는 '필수 입력 항목'과 '선택 입력 항목'을 사용자에게 명확히 구분하여 전달하는 것입니다. 대다수의 디자인 시안에서는 필수 입력 레이블 옆에 조그만 빨간색 별표(*) 기호를 붙여두는 방식을 취합니다. 그러나 화면을 눈으로 볼 수 없는 스크린리더 사용자에게 이 빨간 별표는 단지 특수문자 '별표(Asterisk)'로만 읽히거나, 보조공학 설정에 따라 묵음 처리되어 건너뛰어지는 치명적인 정보 누락이 발생합니다. 그 결과 시각장애인 사용자는 필수 항목인지 전혀 모른 채 입력을 건너뛰었다가, 폼 전송 버튼을 누른 뒤에야 온갖 에러 메시지를 마주하는 좌절을 겪습니다. WCAG 2.2 성공 기준 3.3.2(Labels or Instructions)는 모든 입력 요구조건을 사전에 명확히 안내할 것을 규정합니다. 이 글에서는 aria-required 속성과 사용자 친화적인 유효성 검증 타이밍 설계를 다룹니다.

빨간색 별표(*) 기호의 접근성 한계와 오판정 원인

웹 폼에서 <label>이름 <span style='color:red'>*</span></label> 형태로 작성된 마크업은 두 가지 중대한 접근성 결함을 내포하고 있습니다.

첫째는 WCAG 성공 기준 1.4.1(Use of Color) 위반입니다. 필수 항목이라는 핵심 정보를 오직 붉은색이라는 '색상 단서'에만 의존하여 전달하고 있기 때문에, 적록 색약이나 전색맹 사용자는 일반 텍스트와 별표의 색상 차이를 거의 감지하지 못합니다.

둘째는 스크린리더의 특수문자 발음 설정 문제입니다. 대다수의 스크린리더는 웹 탐색 속도를 높이기 위해 괄호, 마침표, 별표 같은 문장 부호를 자동으로 생략(None/Some)하도록 기본 설정되어 있습니다. 따라서 별표 기호가 존재하더라도 스크린리더는 단지 '이름, 편집창'이라고만 낭독할 뿐, 이 필드가 필수 입력값이라는 사실을 사용자에게 전혀 알려주지 않습니다.

HTML5 required vs WAI-ARIA aria-required="true"의 명확한 차이

필수 입력값을 프로그래밍적으로 명확히 전달하기 위해 사용하는 두 가지 표준 속성의 특성과 차이점을 명확히 인지해야 합니다.

• HTML5 required 속성: 네이티브 브라우저의 기본 유효성 검사를 활성화합니다. 폼 전송 시 값이 비어있으면 브라우저가 기본 말풍선 팝업을 띄우며 전송을 강제 차단합니다. 그러나 브라우저 기본 말풍선은 스타일 커스터마이징이 불가능하고 스크린리더 지원이 불완전한 경우가 있습니다.
• WAI-ARIA aria-required='true' 속성: 보조공학 기기에 '이 필드는 필수 입력 항목'이라는 사실을 명시적으로 선언합니다. 스크린리더는 입력창에 진입하는 순간 '이름, 필수 입력, 편집창'이라고 분명하게 낭독합니다. 네이티브 전송 차단 동작을 일으키지 않으므로 프론트엔드 커스텀 자바스크립트 유효성 검사 로직과 완벽하게 조화를 이룹니다.

사용자를 괴롭히는 공격적 유효성 검사(Aggressive Validation) 지양

폼 접근성에서 기술적 마크업 못지않게 중요한 것은 '검증 오류를 언제 사용자에게 보여줄 것인가'라는 인터랙션 타이밍(Timing) 문제입니다.

최악의 안티패턴은 사용자가 이메일 입력창에 첫 글자 'a'를 타이핑하는 순간, onChange 이벤트로 즉각 붉은 글씨로 '올바른 이메일 형식이 아닙니다'라는 에러 메시지를 띄우고 스크린리더로 경고를 쏘아대는 '공격적 조기 검증(Premature Validation)'입니다. 사용자는 아직 입력을 끝내지도 않았는데 시스템이 자신을 혼내고 있다고 느껴 극심한 인지적 스트레스와 불쾌감을 받게 됩니다.

가장 성숙한 실무 UX 패턴은 '지연 유효성 검사(Lazy Validation on Blur)'입니다. 사용자가 입력을 마치고 다른 필드로 초점을 이동시키는 onBlur 시점에 비로소 검증을 수행하고, 이미 오류가 발생한 필드를 수정할 때만 onChange로 에러를 즉시 해제해 주는 방식이야말로 인지 장애인과 일반 사용자 모두를 만족시키는 최고의 폼 디자인입니다.

폼 상단 범례(Legend) 및 오류 요약(Error Summary) 제공

긴 결제 신청서나 회원가입 양식의 최상단에는 반드시 <p class='form-instruction'><span class='required-mark' aria-hidden='true'>*</span> 표시는 필수 입력 항목입니다.</p>라는 명시적인 범례 안내 문구를 텍스트로 기재해야 합니다.

또한 결제 전송 버튼을 눌렀을 때 3개 이상의 필드에서 오류가 발생했다면, 화면 상단에 <div role='alert' class='error-summary'> 컨테이너를 동적으로 띄우고 '총 3개의 입력 항목에 오류가 있습니다. 1. 비밀번호 불일치 2. 배송지 주소 누락...' 형태로 각 에러 필드로 바로 점프할 수 있는 내부 앵커 링크 목록을 제공할 때, 모든 사용자가 막힘없이 폼을 완료할 수 있습니다.