form - validation

Web Accessibility

Role & Attribute

• aria-describedby
• aria-invalid
• aria-errormessage

※ aria-invalid, aria-errormessage가 1.2에서 전역 상태로 더이상 사용 되지 않음

• w3c - aria-invalid
• w3c - aria-errormessage

Screen Reader 지원

속성	Sense Reader	NVDA	VoiceOver	TalkBack
aria-describedby	X	O	O	O
aria-invalid (text)	X	O	O	O
aria-invalid (textarea)	X	O	O	X

view

html

<!-- valid : 정상 메세지 -->

<!-- 가상 클래스 :valid -->
<label for="★valid-input1">★label</label>
<input type="text" class="o-input o-input--text" id="★valid-input1" value="★valid" aria-describedby="★valid-message1">
<p class="valid-message" id="★valid-message1">★message</p>

<!-- 클래스 추가 -->
<label for="★valid-input2">★label</label>
<input type="text" class="o-input o-input--text is-valid" id="★valid-input2" value="★is-valid" aria-describedby="★valid-message2">
<p class="valid-message" id="★valid-message2">★message</p>


<!-- invalid : 오류 메세지 -->

<!-- 가상 클래스 :invalid, 필수 입력(required) 이지만 값이 없는 경우 -->
<label for="★invalid-input1">★label</label>
<input type="text" class="o-input o-input--text" id="★invalid-input1" value="★" required aria-describedby="★invalid-message1">
<p class="invalid-message" id="★invalid-message1">message</p>

<!-- 클래스 추가 -->
<label for="★invalid-input2">★label</label>
<input type="text" class="o-input o-input--text is-invalid" id="★invalid-input2" value="★is-invalid" aria-describedby="★invalid-message2">
<p class="invalid-message" id="★invalid-message2">message</p>

<!-- aria-invalid="true" 추가 -->
<label for="★invalid-input3">★label</label>
<input type="text" class="o-input o-input--text is-invalid" id=★"invalid-input3" value="★is-invalid" aria-describedby="★invalid-message3" aria-invalid="★true">
<p class="invalid-message" id="★invalid-message3">message</p>

• 유효성 검사 : 가상 클래스 :invalid와 :valid 는 input, select, textarea 요소에 적용 가능

Screen Reader 음성 출력

• Sense Reader

  label valid 편집창
  message
  label is-valid 편집창
  message
  label 편집창
  message
  label is-invalid 편집창
  message

• NVDA

  label 편집창 message valid 선택됨
  label 편집창 message is-valid 선택됨
  label 편집창 필요함 입력 오류 message 빈줄
  label 편집창 message is-invalid 선택됨
  ( aria-invalid=”true” 이 있을 경우 : label 편집창 입력 오류 message is-invalid 선택됨 )

• VoiceOver

  label, valid, 텍스트 필드, message
  message
  label, is-valid, 텍스트 필드, message
  message
  label, 텍스트 필드, 필수사항, message
  message
  label, is-invalid, 텍스트 필드, message
  ( aria-invalid=”true” 이 있을 경우 : label, is-invalid, 텍스트 필드, 유효하지 않은 데이터, message )
  message

• TalkBack

  label
  valid 수정창 label message
  message
  label
  is-valid 수정창 label message
  message
  label
  수정창 label message
  message
  label
  is-invalid 수정창 label message
  ( aria-invalid=”true” 이 있을 경우 : is-invalid 수정창 에러 입력값이 잘못되었습니다. label message )
  message

script

• 정상 & 오류가 발생한 경우에 input에 aria-describedby=”★message” 및 메시지 & id 생성, 추후 제거
• aria-invalid=”true”가 있는 경우 : 오류 메시지 발생 시 aria-invalid=”true” 생성 또는 true 로 값 변경
• 회원가입 폼 등에서 확인 버튼 등을 선택했을 시 오류가 있는 input 요소로 포커스 이동 처리 필요
  ( Sense Reader에서는 포커스를 강제로 이동 시켰을때 새로 input의 내용을 읽어주지 않음 )

css

/*---------------------------------------------
  Form
 ----------------------------------------------*/
.o-input {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  vertical-align: middle;
  color: #222;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: border 200ms ease-in-out;
  transition: border 200ms ease-in-out;

  &::-webkit-input-placeholder,
  &:-ms-input-placeholder,
  &::-moz-placeholder {
    color: #999;
  }

  &::-ms-clear {
    display: none;
  }

 // valid
  &:valid,
  &.is-valid {
   border-color: #198754;
  }

  // invalid
  &:invalid,
  &.is-invalid {
   border-color: #e11b22;
  }
}

// valid
.valid-message {
  color: #198754;
}

// invalid
.invalid-message {
  color: #e11b22;
}

참고

• bootstrap - 유효성 검사
• mdn - aria-invalid