폼요소 | 웹접근성 빌드업

input

제목

비밀번호

비밀번호 (비밀번호 보기 버튼)

이메일

이메일 (도메인 선택)

이메일 아이디

이메일 도메인 선택

아이디를 입력하고 도메인을 선택하세요. 목록에 없으면 직접입력을 선택합니다.

* 전송 값: name="emailSplit" = 아이디@도메인 (아이디·도메인 필드는 합산용)

아이디 (읽기 전용)

닉네임 (비활성)

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

명도대비 체크 사이트 : contrast

textarea

내용

문의 내용

안내 문구 (읽기 전용)

읽기 전용 내용입니다. 수정할 수 없지만 폼 전송 시 값이 포함됩니다.

비활성 메모

* 굵게·목록·링크 등 서식이 필요하면 에디터 (TinyMCE, CKEditor 5) 가이드를 참고하세요. 서식이 없으면 이 textarea가 접근성에 더 유리합니다.

select

성별

성별 (wide)

지역 (긴 텍스트·비활성·스크롤 테스트)

연도 (비활성)

네이티브 select (class="ignore")

radio

1차 - 알림톡 / 2차 - 문자 1차 - 문자 / 2차 - 알림톡 알림톡 문자

다음 중 웹 콘텐츠 접근성 지침에서 권장하는 대체 텍스트 작성 방법으로 가장 적절한 것은?

장식용 이미지에도 상세한 설명을 모두 넣어, 시각 사용자와 동일한 정보를 제공해야 한다. 의미 있는 이미지에는 내용과 목적을 이해할 수 있는 대체 텍스트를 제공하고, 장식용 이미지는 빈 대체 텍스트로 처리한다. 대체 텍스트는 검색 노출을 위해 키워드를 최대한 많이 나열하는 것이 좋으며, 문장 형태는 사용하지 않는다. 이미지가 링크인 경우 대체 텍스트를 생략하고, 주변 본문 텍스트만으로 링크 목적을 파악하도록 한다.

게시물 선택 라디오 예시 A
선택	제목 (테이블 A)
1번 게시물 선택	테이블 A - 게시물 1
2번 게시물 선택	테이블 A - 게시물 2

게시물 선택 라디오 예시 B
선택	제목 (테이블 B)
1번 게시물 선택	테이블 B - 게시물 1
2번 게시물 선택	테이블 B - 게시물 2

checkbox

국어 영어 수학 과학

개인정보 수집·이용에 동의하며, 안내된 목적 외로 이용하거나 제3자에게 제공하지 않는 것에 동의합니다. (필수)

게시물 선택 체크박스 예시 A
전체 선택	제목 (테이블 A)
1번 게시물 선택	테이블 A - 게시물 1
2번 게시물 선택	테이블 A - 게시물 2

게시물 선택 체크박스 예시 B
전체 선택	제목 (테이블 B)
1번 게시물 선택	테이블 B - 게시물 1
2번 게시물 선택	테이블 B - 게시물 2

toggle (checkbox)

이메일 알림 문자 알림 앱 푸시 알림 (비활성) 마케팅 수신 (비활성·켜짐)

라벨 왼쪽 · 가로 나열

다크 모드 자동 저장

라벨 숨김 (스위치만 · blank)

알림 수신

calendar

날짜 (date)

월 (month)

시간 (time)

날짜/시간 (datetime-local)

날짜 (비활성)

날짜 (읽기 전용)

* readonly — 값은 제출됨 · 수정 불가 · 달력 아이콘 표시 유지

* 네이티브 type="date"는 OS/브라우저 UI에 의존합니다. 키보드·스크린리더 품질이 환경마다 달라질 수 있습니다.

* UI를 통일하고 접근성을 강화하려면 아래 Duet Date Picker를 사용하세요.

calendar (외부 · Duet Date Picker)

날짜 선택 라이브러리 비교 (접근성)
라이브러리	특징	이 킷
Duet Date Picker	WCAG 2.1·키보드·스크린리더를 목표로 제작. W3C Date Picker Dialog 패턴에 가깝음. 경량 Web Component.	채택
Flatpickr	국내·해외에서 가장 흔함. 기능 풍부하지만 ARIA·포커스는 프로젝트에서 보완하는 경우가 많음.	참고
네이티브 date	의존성 없음. 브라우저마다 UI·접근성 편차.	위 섹션

방문 일자

* 신규: value 비움(또는 생략)
* identifier = 내부 날짜 입력의 id · label for와 동일 값
* 커스텀 요소에 id를 달아도 라벨과 연결되지 않음 → identifier 사용
* JS: document.querySelector('duet-date-picker[identifier="duetDate"]')

방문 일자 (수정 · 저장값 표시)

* 수정 화면: 이미 저장된 날짜를 value="YYYY-MM-DD"에 넣음
* 사용자가 입력란·달력으로 다시 선택하면 값이 바뀜
* JS: el.value = '2026-07-17'

예약일 (기간 제한)

* min / max는 ISO YYYY-MM-DD

필수 선택일

방문 일자 (비활성)

* 비활성 지정: <duet-date-picker … disabled>
* JS: element.disabled = true / false
* 입력·달력 버튼 비활성 · 달력 아이콘은 표시 유지

방문 일자 (읽기 전용)

* Duet는 readonly 미지원 → 네이티브 type="date" + readonly 사용
* 값은 폼에 제출됨 · 직접 수정·피커 조작은 불가 · 달력 아이콘은 표시 유지
* Duet로 막으려면 disabled 사용 (단, disabled 값은 보통 미제출)

* Duet는 일자(YYYY-MM-DD) 전용입니다. 년도만·월까지·시간 포함은 아래 패턴을 사용하세요.

졸업 연도 (년도만)

* 값: YYYY · 네이티브 select (키보드·스크린리더에 유리)

근무 시작월 (월까지)

* 값: YYYY-MM · 네이티브 type="month"

발간 연월 (월까지 · select)

연도

월

* 숨은 필드 값: YYYY-MM (연·월 모두 선택 시)

행사 일시 (날짜 + 시간)

날짜

시간

* Duet(날짜) + 네이티브 type="time" · 합산 값: YYYY-MM-DDTHH:mm

행사 일시 (날짜 + 시간 · 비활성)

날짜

시간

* 날짜·시간 각각 disabled (또는 fieldset disabled)
* 달력·시계 아이콘은 보이게 유지

마감 시간 (비활성)

* 비활성 지정: <input type="time" … disabled>
* 시계 아이콘은 표시 유지

* label for ↔ identifier (네이티브 id 역할)

* 일자 표시·전송: YYYY-MM-DD

* 키보드: Esc 닫기 · 화살표로 날짜 이동 · Enter/Space로 선택 (W3C 패턴)

* CSS: datepicker.css · JS: datepicker-a11y.js (module) · CDN theme

file

파일 업로드

파일을 선택하세요.

파일선택

파일 업로드 (끌어다 놓기)

파일을 이 영역에 끌어다 놓으세요

PDF, JPG, PNG · 최대 5MB

파일을 선택하세요.

파일선택

* 키보드·스크린리더: 파일선택 버튼 사용 (드롭은 마우스 보조)

* 선택·드롭 후 이름칸의 X로 삭제 · 다중은 목록 각 항목 X + 이름칸 X(전체 삭제)

다중 파일

파일을 선택하세요. (여러 개 가능)

파일선택

다중 파일 (끌어다 놓기)

이미지를 끌어다 놓으세요 (여러 개 가능)

JPG, PNG, GIF · 파일당 최대 10MB

파일을 선택하세요. (여러 개 가능)

파일선택

파일 업로드 (비활성)

파일을 선택하세요.

파일선택

* 종류: input[accept] · 용량: data-max-size="5MB" (또는 바이트 숫자)

* 드롭 사용: 클래스 file-drop + .file-drop-area + .file-msg

* 삭제: .file-remove + img/icon-x.svg · 다중은 .file-list

* 개인정보: 업로드·게시 전 파일 내용 확인 · 주민등록번호 등 마스킹 · 설문 폼은 다른 응답자 정보가 노출되지 않게 결과 공개·접근권한 설정

address

주소

우편번호

기본주소

상세주소