폼의 접근성 버그는 대부분 연결 실수에서 나옵니다. 입력란과 이어지지 않은 라벨, 스크린 리더가 읽지 않는 도움말, 화면에는 보이지만 소리로는 전달되지 않는 오류 메시지가 그렇습니다. 이 생성기는 그 연결을 제대로 해 둔 필드 하나를 만듭니다. for로 연결된 <label>, 같은 id와 name을 가진 <input>, aria-describedby가 가리키는 선택 도움말, role="alert"와 aria-invalid="true"가 붙은 선택 오류 메시지입니다.
폼을 필드 단위로 만듭니다. 텍스트, 이메일, URL, 전화번호, 비밀번호, 숫자, 날짜, 여러 줄 텍스트, 드롭다운, 체크박스, 라디오 그룹의 열한 가지 유형이 있고, 필드마다 라벨, 이름, 도움말, 오류 메시지, 플레이스홀더, autocomplete 토큰, pattern, 길이·범위 제한, 필수 여부를 설정합니다. 문의 폼, 회원가입, 뉴스레터, 배송지, 로그인 프리셋으로 시작할 수 있고 필드 순서도 바꿀 수 있습니다. 출력은 <form> 마크업, 선택 CSS, 선택 인라인 검증 스크립트이며, 아래에서는 같은 마크업이 격리된 프레임에서 실제로 동작하므로 빈 채로 제출해 볼 수 있습니다.
연결 작업은 생성기가 대신합니다. 모든 컨트롤에 연결된 라벨이 붙고, 도움말과 오류 텍스트는 aria-describedby로 이어지며, 그룹은 <fieldset>과 <legend>를 쓰고, 오류 메시지는 스크립트가 보여 주기 전까지 숨겨져 있습니다. 폼을 어디로도 전송하지 않으며 모든 처리는 브라우저 안에서 이루어집니다.
사용 방법
프리셋으로 시작해 필드 추가
프리셋을 고르거나 열한 가지 유형의 필드를 추가합니다. 유형은 휴대폰 화면 키보드, 브라우저 기본 검증, 마크업을 결정합니다. 드롭다운은
<select>, 라디오 그룹은<fieldset>이 됩니다.라벨 쓰기
필드를 열어 화면에 보일 라벨을 80자까지 입력합니다. 필수이며
<label>(라디오 그룹은<legend>) 안에 들어갑니다.이름과 id 정하기
영문자로 시작하고 영문, 숫자, 하이픈, 밑줄을 쓰는 이름을 64자까지 입력합니다. 같은 값이
id와name속성, 도움말·오류 id의 기반이 됩니다. 폼 안에서 이름은 고유해야 합니다.도움말, 오류 텍스트, 제약 추가
도움말과 오류 텍스트는 각각 160자까지 쓸 수 있습니다. 패턴, 최소·최대 길이나 값,
autocomplete토큰을 추가하고, 드롭다운과 라디오에는 한 줄에 선택지 하나(값|라벨)를 입력합니다. 패턴은 HTML과 같은v플래그로 컴파일하므로 브라우저가 무효로 무시할 문법을 출력 전에 알려 줍니다.CSS·스크립트 선택 후 복사
필드마다 필수를 켭니다. CSS와 검증 스크립트가 필요하면 포함하고, HTML·CSS·JavaScript를 따로 복사하거나 전체 페이지를 내려받으세요. 먼저 실시간 미리보기로 시험해 볼 수 있습니다.
작동 원리
라벨, 설명, 오류
입력의 id와 일치하는 눈에 보이는 <label for>는 컨트롤에 접근 가능한 이름을 주고 클릭 영역도 넓혀 주며, WCAG 2.2의 성공 기준 1.3.1(정보와 관계)과 3.3.2(레이블 또는 설명)를 뒷받침합니다. 플레이스홀더는 입력하면 사라지므로 라벨을 대신할 수 없습니다.
aria-describedby는 추가 설명 텍스트의 id를 가리키므로 스크린 리더가 라벨을 먼저 읽고 이어서 도움말과 오류 텍스트를 읽습니다. 오류 상태가 켜지면 생성기는 오류 단락의 id를 이 목록에 추가하고 aria-invalid="true"를 설정합니다. 오류 텍스트의 role="alert"는 페이지에 삽입되는 순간 보조 기술이 읽어 주게 합니다. 오류를 색만이 아니라 텍스트로 설명하는 것은 WCAG 3.3.1(오류 식별)과 관련됩니다.
생성기가 출력하는 것
텍스트는 HTML 이스케이프되므로 Name & title 같은 라벨은 Name & title이 됩니다. 필수 별표는 aria-hidden="true"로 감싸 스크린 리더가 기호를 읽지 않게 하고, 필수 여부는 required 속성이 전달합니다.
<div class="field">
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" required aria-describedby="email-help email-error" aria-invalid="true">
<p id="email-help">...</p>
<p id="email-error" role="alert">...</p>
</div>입력 유형과 기본 검증
유형은 기대하는 값에 대한 힌트를 브라우저에 줍니다. email과 url은 제출할 때 형식 검사를 하고(url에는 https:// 같은 스킴이 있어야 합니다), number는 숫자 키패드를 보여 주고 글자를 받지 않으며, date는 날짜 선택기를 열고, password는 글자를 가립니다. 생성기는 pattern, minlength, maxlength, min, max, autocomplete를 필드에 직접 설정했을 때만 씁니다(min·max는 숫자와 날짜, 나머지는 텍스트 계열 유형). 값을 임의로 추측해 넣지 않으며, 프리셋은 email, current-password 같은 autocomplete 값을 채워 줍니다. autocomplete 설정은 WCAG 1.3.5(입력 목적 식별)를 뒷받침합니다.
| 유형 | 브라우저 동작 |
|---|---|
text | 자유 텍스트, 형식 검사 없음 |
email | 제출 시 이메일 형태인지 검사 |
url | 스킴이 있는 절대 URL 필요 |
password | 입력을 가림 |
number | 숫자 키보드, 숫자만 입력 |
date | 기본 날짜 선택기, 값은 YYYY-MM-DD |
tel | 모바일에서 전화 키패드, 형식 검사 없음. 필요하면 pattern 추가 |
textarea | 여러 줄 텍스트, minlength·maxlength 지원 |
select | 드롭다운 목록. 빈 첫 옵션이 플레이스홀더 역할 |
checkbox | 예·아니요 하나, 라벨은 체크박스 뒤에 위치 |
radio | <fieldset>과 <legend> 안의 선택지 그룹 |
실제 예시
유형: email
라벨: Email address
id: email
도움말: We'll send your receipt.
필수: 예
오류 표시: 아니요<div class="field">
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" required aria-describedby="email-help">
<p id="email-help">We'll send your receipt.</p>
</div>위와 같고, 오류 텍스트: Enter a valid email address., 오류 표시: 예<div class="field">
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" required aria-describedby="email-help email-error" aria-invalid="true">
<p id="email-help">We'll send your receipt.</p>
<p id="email-error" role="alert">Enter a valid email address.</p>
</div>오류 출력은 고정된 스냅샷입니다. 실제 폼에서는 검증 뒤에 스크립트로 오류 단락과 aria-invalid 속성을 추가하거나 제거합니다.
유형: password
라벨: Password
id: pw
도움말·오류: 비움
필수: 아니요<div class="field">
<label for="pw">Password</label>
<input id="pw" name="pw" type="password">
</div>도움말도 오류 메시지도 없으면 오류 스위치가 켜져 있어도 오류 텍스트가 비어 있으므로 aria-describedby가 아예 붙지 않습니다.
폼 id: signup-form, action /join, 제출 문구 Join
필드: 유형 email, 라벨 Email address, id email, autocomplete email, 필수, 오류 "Enter a valid email."
옵션: 스크립트 켬, CSS 끔<form id="signup-form" action="/join" method="post">
<div class="field">
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-error">
<p id="email-error" role="alert" hidden>Enter a valid email.</p>
</div>
<button type="submit">Join</button>
</form>
<script>
{
const form = document.getElementById("signup-form");
…
form.addEventListener("submit", (event) => { … });
}
</script>오류 문단은 필드에서 포커스가 벗어나거나 잘못된 상태로 제출할 때까지 숨겨져 있습니다. 스크립트가 블록 안에 있어 생성된 폼을 한 페이지에 둘 붙여 넣어도 form이 다시 선언되지 않습니다.
a
Email
1x
user_name
user.namea: 사용 가능
Email: 사용 가능
1x: Use a valid field id
user_name: 사용 가능
user.name: Use a valid field idid는 영문자로 시작해야 하고 이어서 영문, 숫자, 하이픈, 밑줄을 쓸 수 있으며 전체 64자까지입니다.
자주 하는 실수
라벨 대신 플레이스홀더 사용
플레이스홀더는 입력하는 동안 사라지고 대비도 낮은 경우가 많습니다. 눈에 보이는 라벨을 두고 힌트는 도움말에 쓰세요.
한 페이지에 중복 id
id가 라벨, 도움말, 오류를 하나로 묶으므로 생성되는 모든 DOM id가 고유해야 합니다. 생성기는 중복 필드 id, 폼 id와 같은 필드 id, 파생 id 충돌을 거부합니다.
a필드에 도움말이 있으면a-help라는 필드가 충돌하고, 오류 단락이 생성되면a-error도 충돌합니다.오류 상태를 켜 둔 채 사용
aria-invalid="true"와 alert는 검증 뒤에 나타나야 합니다. 오류 버전을 새 폼에 그대로 붙여 넣으면 사용자가 입력하기도 전에 오류를 보게 됩니다.별표에만 의존
별표는 보조 기술에서 숨겨지고 필수임을 알리는 것은
required속성입니다. 별표가 붙은 항목이 필수라는 안내를 폼 설명에 적으세요.서버 측 검증 생략
기본 검증과
required는 우회할 수 있습니다. 서버에서 다시 검증하고 정리하세요.
자주 묻는 질문
완성된 폼도 만들 수 있나요?
네. 필요한 만큼 필드를 추가하고 순서를 바꾸며 폼 id, action, 메서드를 정할 수 있습니다. 출력에는 <form>, 제출 버튼, 선택한 경우 CSS와 인라인 검증 스크립트가 들어갑니다. action은 비워 두거나 상대 경로, http(s) URL, mailto: 링크여야 하며 javascript: 같은 스킴은 오류로 거부됩니다.
필수 별표를 스크린 리더에서 숨기는 이유는요?
"별표"를 소리 내어 읽는 것은 잡음입니다. required 속성이 이미 필수 필드임을 보조 기술에 알려 줍니다.
aria-describedby는 무엇을 하나요?
컨트롤을 설명하는 요소의 id를 나열합니다. 스크린 리더가 라벨 뒤에 이를 읽어 주므로 필드에 포커스가 가면 도움말과 오류 텍스트가 읽힙니다.
role="alert"는 어디에 쓰나요?
텍스트가 나타나는 즉시 보조 기술이 읽어 주게 합니다. 사용자가 제출하거나 필드를 벗어난 뒤 나타나는 오류에 쓰세요.
id에 어떤 문자를 쓸 수 있나요?
대소문자 영문, 숫자, 하이픈, 밑줄을 쓸 수 있고 영문자로 시작해 64자까지입니다. 폼 안의 모든 이름은 고유해야 하며 폼 id와도 달라야 합니다.
HTML 이스케이프가 되나요?
네. 라벨, 도움말, 오류 텍스트의 앰퍼샌드, 꺾쇠, 따옴표가 문자 참조로 바뀝니다.
autocomplete나 pattern 속성도 추가해 주나요?
설정하면 추가합니다. 브라우저가 필드를 채우도록 autocomplete 토큰을 고르고, 필드 유형에 맞는 pattern, minlength, maxlength, min, max를 넣으세요.
마지막 업데이트: