폼 오류 처리를 위한 ARIA 적용 방법
대부분의 폼은 시각적 사용자에게는 잘 작동하지만, 보조 공학 기기를 사용하는 사람들에게는 제대로 작동하지 않습니다. 시각적 사용자는 빨간색 테두리와 오류 메시지를 볼 수 있지만, 스크린 리더 사용자는 아무것도 듣지 못하는 경우가 많습니다.
두 가지 ARIA 속성과 작은 라이브 리전(live region)을 사용하면 이를 해결할 수 있습니다. 이 작업은 50줄 미만의 코드로 가능합니다.
오류를 입력 필드와 연결하는 방법은 다음과 같습니다.
- aria-describedby 사용하기
입력 필드는 오류 요소를 가리켜야 합니다. 입력 필드에
aria-describedby를 추가하고, 그 값을 오류 메시지가 담긴div의 ID로 설정하세요.
예시:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
이렇게 하면 사용자가 입력 필드에 포커스를 맞췄을 때 스크린 리더가 오류 메시지를 읽어줍니다. 도움말 텍스트가 있는 경우 여러 개의 ID를 추가할 수도 있습니다.
- aria-invalid 사용하기
이 속성은 입력값이 잘못되었음을 사용자에게 알려줍니다. 오류가 발생하면
aria-invalid를true로 설정하고, 오류가 사라지면false로 설정하세요.
흔히 하는 실수는 래퍼(wrapper) div를 빨간색으로 스타일링하면서 aria-invalid는 입력 필드에만 적용하는 것입니다. 이는 불일치를 초래합니다. 시각적 스타일과 ARIA 속성이 동일한 요소를 대상으로 하도록 확인하세요.
- 라이브 리전(live region) 추가하기
사용자가 입력하는 도중에 오류가 나타나면 이를 놓칠 수 있습니다. 오류
div에aria-live="polite"를 사용하세요.
aria-live="polite"는 스크린 리더가 자연스러운 휴지기(pause)에 오류를 알리도록 합니다.- 긴급한 상황이 아니라면 "assertive"를 사용하지 마세요. 폼 오류는 긴급 상황이 아닙니다.
- 비동기 유효성 검사(async validation) 처리하기 백그라운드에서 사용자 이름이나 주소를 확인하는 경우, 사용자는 시스템이 작동 중임을 알아야 합니다.
- 패턴 A: 확인 작업이 진행되는 동안 입력 필드에
aria-busy="true"를 사용합니다. - 패턴 B: 숨겨진 라이브 리전을 사용하여 "사용자 이름 확인 중..."과 같은 상태 업데이트를 알립니다.
패턴 B가 다양한 스크린 리더에서 더 안정적입니다.
테스트는 필수입니다. 자동화 도구가 도움이 되긴 하지만 수동 테스트를 대체할 수는 없습니다. Windows에서는 NVDA를, macOS에서는 VoiceOver를 사용하세요.
테스트 체크리스트:
- 필드로 탭(Tab) 이동합니다. 레이블이 읽혀야 합니다.
- 잘못된 값을 입력합니다. 오류가 읽혀야 합니다.
- 다시 필드로 탭 이동합니다. 레이블과 함께 오류가 읽혀야 합니다.
- 오류를 수정합니다. 오류 메시지가 사라져야 합니다.