원칙 A. 키보드 탐색은 “논리적 흐름”을 따라야 한다

• 사용자는 Tab으로 위에서 아래로, 좌에서 우로 자연스럽게 이동하는 경험을 기대한다.
• 폼 요소가 복잡한 레이아웃(그리드, 카드, 2열 배치 등)일수록 DOM 순서를 시각적 순서와 맞추는 것이 중요하다.

필수 기준

• 폼 필드(레이블 → 입력 → 도움말/오류 → 다음 필드)가 자연스러운 순서로 탐색되어야 한다.
• 레이아웃을 위해 CSS로 위치만 바꾸고 DOM 순서를 뒤섞지 않는다(가능하면).

원칙 B. 모든 입력 컨트롤은 “이름(Name)”을 가져야 한다

스크린리더가 “편집창”이 아니라 “이름, 편집창”처럼 읽어야 한다.

필수 기준

• 텍스트 입력, 콤보박스, 체크박스, 라디오, 스위치, 날짜 선택, 파일 업로드 등 모든 폼 컨트롤은 접근 가능한 이름을 제공해야 한다.
• placeholder는 레이블 대체가 아니다(입력 시 사라지고, 보조기술에서 충분하지 않음).

4.1 1순위: 네이티브 <label for> 사용(가장 권장)

가장 안정적이고 도구/브라우저/스크린리더 호환성이 좋다.

<label for="user_name">이름</label>
<input id="user_name" name="user_name" type="text">

• label[for] 값과 input#id가 반드시 일치해야 한다.
• 레이블을 클릭하면 입력 포커스가 이동하는 부가 UX도 얻는다.

4.2 2순위: 컨트롤을 <label>로 감싸기

<label>
  이름
  <input name="user_name" type="text">
</label>

• 간단한 UI에서 유용
• 다만 복잡한 레이아웃/스타일링에서 구조가 불편할 수 있음

4.3 DOM에서 레이블이 떨어져 있으면: aria-labelledby 사용(필수 대안)

시각 디자인 또는 컴포넌트 구조 때문에 레이블과 입력이 DOM에서 멀어질 수 있다. 이 경우 명시적으로 레이블 요소의 id를 참조한다.

<span id="lbl_user_name">이름</span>
<input type="text" aria-labelledby="lbl_user_name">

• aria-labelledby는 “이 입력의 이름은 이 요소(들)의 텍스트를 합친 것”이라는 뜻
• 여러 개를 지정하면 공백으로 구분해 순서대로 결합한다.

<span id="lbl">배송지</span>
<span id="required">(필수)</span>
<input aria-labelledby="lbl required">

4.4 추가 설명(도움말/오류)은 aria-describedby로 연결

레이블은 “이름(Name)”, 설명은 “설명(Description)”이다.

<label for="email">이메일</label>
<input id="email" type="email" aria-describedby="email_help">
<p id="email_help">예: user@example.com</p>

• 스크린리더는 보통 “이메일, 편집창, 예: user@example.com” 형태로 읽을 수 있다.
• 오류 메시지에도 동일하게 적용 가능

<input id="email" aria-describedby="email_help email_error">
<p id="email_error">이메일 형식이 올바르지 않습니다.</p>

4.5 정말 불가피할 때만: aria-label

화면에 레이블 텍스트가 없고(아이콘-only) 시각적으로도 별도의 텍스트를 둘 수 없을 때만 사용한다.

<input type="search" aria-label="사이트 검색">

가능하면 시각적으로도 레이블을 제공하거나, 최소한 aria-labelledby로 “실제 텍스트”를 참조하는 편이 유지보수에 좋다.

5.1 “레이블 → 컨트롤 → 도움말/에러”의 묶음을 유지

한 필드를 구성하는 요소들은 DOM에서도 가능한 한 가까이 둔다.

<div class="field">
  <label for="user_name">이름</label>
  <input id="user_name" type="text" aria-describedby="user_name_hint">
  <div id="user_name_hint">한글 2~20자</div>
</div>

5.2 시각적 2열 배치에서도 DOM은 위→아래 흐름 유지

• CSS Grid/Flex로 “보이는 위치”만 바꾸되, DOM 자체는 자연스러운 순서를 유지한다.
• tabindex로 순서를 억지로 맞추는 방식(특히 양수 tabindex)은 지양한다.

레이블/이름

• 모든 입력 요소에 접근 가능한 이름이 있다(읽었을 때 “무엇을 입력하는지” 명확).
• placeholder만 있는 필드는 없다.
• 레이블이 DOM에서 멀리 떨어져 있으면 aria-labelledby로 연결했다.

설명/오류

• 입력 규칙, 단위, 예시, 오류 메시지는 aria-describedby로 연결되어 있다.
• 오류 상태 변화 시(검증 실패) 오류 메시지가 화면과 스크린리더에 모두 전달된다(필요 시 라이브 영역 검토).

키보드/논리 순서

• TAB 이동이 시각적/업무 흐름과 일치한다.
• 포커스가 갑자기 점프하거나, 읽기 순서가 섞이지 않는다.
• 불필요한 tabindex(특히 1,2,3…)를 사용하지 않는다.