스크린 리더 친화적인 Form은 어떻게 설계할까

먼저 던질 질문

시각적 Form 정보를 텍스트로 어떻게 전달할까

핵심 관점

스크린 리더 친화적인 Form은 시각 정보를 텍스트로 중계하는 구조다. 라벨, 설명, 오류, 필수 여부가 입력 필드와 연결되어야 한다.

입력이 매끄러운 장면

Label과 input을 명확히 연결하고 도움말과 오류 메시지를 aria-describedby로 연결한다.

제출 실패 시 오류 요약과 필드별 오류를 함께 제공한다.

접근을 막는 폼

placeholder를 label 대신 사용한다.

오류를 빨간 테두리로만 표시한다.

입력 흐름 사례와 근거

라벨과 도움말, 오류는 프로그램적으로 연결되어야 한다

스크린 리더 친화적인 폼은 눈에 보이는 디자인만으로 판단할 수 없다. 입력 필드의 이름, 설명, 오류 메시지가 보조 기술에 올바르게 전달되어야 한다.

WCAG의 Labels or Instructions, Error Identification, Error Suggestion 기준은 폼 설계의 기본이다. GOV.UK의 Error message와 Error summary도 라벨과 오류 연결을 명확히 다룬다.

실무 해석

제출 후 오류가 있을 때는 오류 요약에서 각 필드로 이동할 수 있어야 하고, 필드에 도착했을 때 어떤 오류인지 다시 들을 수 있어야 한다. label, aria-describedby, 오류 ID, focus management가 하나의 세트로 움직여야 한다.

접근 가능한 폼 기준

• label이 placeholder를 대체하고 있지 않은지 확인한다
• helper text와 error message가 필드와 연결되는지 본다
• 오류 요약과 필드별 오류의 역할을 나눈다

자주 빠지는 함정

화면에 글자가 보인다고 스크린 리더가 같은 맥락으로 읽는 것은 아니다. 관계를 코드로 연결하지 않으면 정보는 흩어진다.

추가로 비교할 스크린 리더 사례

• 회원가입 Form, 결제 Form, 주소 입력 Form의 스크린 리더 흐름을 비교한다
• placeholder만 있는 폼 사례를 찾는다
• 에러 요약 영역이 좋은 사례를 모은다

폼 접근성 질문

• Label, Help Text, Error의 관계가 명확한가
• 필드 오류와 전역 오류를 구분했는가

출처

• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• GOV.UK Design System, Error message: https://design-system.service.gov.uk/components/error-message/
• GOV.UK Design System, Error summary: https://design-system.service.gov.uk/components/error-summary/
• Material Design 3, Text fields: https://m3.material.io/components/text-fields/overview