폼과 입력 요소 접근성
한국어 해설 KO
레이블 연결, 오류 메시지, 필수 입력 표시, fieldset/legend 사용법을 학습합니다.
학습 목표
label 요소와 입력 필드를 올바르게 연결할 수 있다
인라인 오류 메시지의 접근성 패턴을 설명할 수 있다
fieldset과 legend의 사용 목적을 이해한다
필수 필드 표시의 접근성 요구사항을 설명할 수 있다
레이블 연결: 모든 폼 입력 요소에는 연결된 레이블이 있어야 합니다. `<label for="id">`로 명시적 연결하거나, 입력 요소를 `<label>` 안에 감싸는 암시적 연결이 가능합니다. 플레이스홀더만으로는 레이블을 대체할 수 없습니다 — 입력 시작 시 사라지기 때문입니다.
오류 메시지 패턴: 유효성 검사 오류는 오류 필드 근처에 인라인으로 표시하고, aria-describedby로 입력 필드와 연결합니다. aria-invalid="true"로 오류 상태를 명시합니다. 페이지 상단에 오류 요약을 제공하고, 오류 요약이나 첫 오류 필드에 포커스를 이동합니다. 오류 메시지는 문제가 무엇인지와 수정 방법을 모두 설명해야 합니다.
fieldset/legend: 관련된 폼 요소를 그룹화할 때 사용합니다. 대표적 사례: 라디오 버튼 그룹, 체크박스 그룹, 주소 입력 필드 그룹. `<fieldset>`이 그룹 컨테이너, `<legend>`가 그룹의 제목입니다. 스크린리더는 legend 텍스트를 각 입력 필드 앞에 함께 읽어줍니다.
필수 필드: 필수 입력은 시각적 표시(빨간 별표 * 등)와 프로그래밍적 표시(aria-required="true" 또는 required 속성)를 모두 제공해야 합니다. 시각적 표시만 있으면 스크린리더 사용자가 인식할 수 없고, 프로그래밍적 표시만 있으면 시각 사용자가 놓칠 수 있습니다. autocomplete 속성을 사용하면 자동완성을 지원하여 인지 장애 사용자에게 도움됩니다.
Original Text EN
Learn label association, error messages, required fields, and fieldset/legend usage.
Learning Objectives
Correctly associate label elements with input fields
Explain accessible patterns for inline error messages
Understand the purpose of fieldset and legend
Describe accessibility requirements for marking required fields
Label association: Every form input must have an associated label. Use explicit association with `<label for="id">` or implicit association by wrapping the input inside `<label>`. Placeholder text alone cannot substitute for a label — it disappears when typing begins.
Error message patterns: Validation errors should be displayed inline near the error field and connected via aria-describedby. Use aria-invalid="true" to mark the error state. Provide an error summary at the top and move focus to the error summary or first error field. Error messages should explain both what went wrong and how to fix it.
fieldset/legend: Used to group related form elements. Common use cases: radio button groups, checkbox groups, and address field groups. `<fieldset>` is the group container; `<legend>` is the group title. Screen readers read the legend text before each input field within the group.
Required fields: Required inputs need both visual indication (red asterisk *, etc.) and programmatic indication (aria-required="true" or the required attribute). Visual-only marking is invisible to screen reader users; programmatic-only marking may be missed by sighted users. The autocomplete attribute supports autofill, helping users with cognitive disabilities.