탭 순서는 논리대로

KRDS SP-082 — 로그인 입력 양식의 시각적 배열에 상관없이 초점은 논리적인 순서대로 이동할 수 있도록 제공하고 있다.

0. 들어가며 — 시각 배열과 탭 순서가 어긋나면

이번 756편은 로그인 입력 양식의 시각적 배열에 상관없이 초점은 논리적인 순서대로 이동할 수 있게 하라는 규칙입니다.

CSS로 시각 배열을 바꿔도 — 키보드 Tab 초점 순서가 DOM 순서(논리)와 어긋나면, 키보드 사용자가 엉뚱한 데로 튀죠. SP-082는 로그인 폼 초점을 논리 순서로 보장하라고 규정합니다. BP-081(초점 자유 이동)·WCAG 2.4.3의 로그인 적용이죠.

1. 원문 — 초점 논리 순서 이동

SP-082 (서비스 패턴 > 로그인 > 로그인 정보 입력) “로그인 입력 양식의 시각적 배열에 상관없이 초점은 논리적인 순서대로 이동할 수 있도록 제공하고 있다.”

로그인 폼 초점이 시각 배열과 무관하게 논리적 순서로 이동하게 하라는 뜻입니다.

정리: 로그인 폼 초점을 논리적 순서대로 이동하게 하라. 이게 SP-082입니다.

2. 왜 논리 순서 초점인가

로그인 폼은, 아이디 → 비밀번호 → (옵션) → 로그인 버튼의 논리적 순서가 있습니다. 키보드 사용자는, Tab으로 이 순서대로 이동하죠. 그런데 CSS로 시각 배열을 바꾸면, 시각 순서와 DOM(초점) 순서가 어긋날 수 있습니다. SP-082는 초점이 논리 순서로 이동하게 하라고 합니다.

초점 순서가 어긋날 때의 문제:

엉뚱한 이동 CSS(flexbox order, grid, float 등)로 시각 배열만 바꾸고 DOM이 그대로면, 시각적으론 아이디 → 비밀번호인데, Tab 초점은 다른 순서로 튑니다. 키보드 사용자가 혼란스럽죠.

로그인 어려움 초점이 논리 순서가 아니면, 키보드 사용자가 로그인 폼을 순서대로 채우기 어렵습니다.

스크린 리더 혼란 가상 초점(읽기 순서)도 DOM을 따르므로, 어긋나면 엉뚱한 순서로 읽힙니다.

그래서 SP-082는 — 논리 순서 초점을 요구합니다:

DOM = 논리 순서 로그인 폼 요소를, DOM에서 논리적 순서(아이디 → 비밀번호 → 옵션 → 버튼)로 배치합니다. 그러면 Tab 초점이 자연히 논리 순서로 이동하죠(WCAG 2.4.3 초점 순서).

시각 = DOM 일치 CSS로 시각 배열을 바꾸더라도, DOM 순서(=초점·읽기 순서)와 시각 순서를 일치시킵니다(WCAG 1.3.2 의미 있는 순서). 시각만 바꾸고 DOM이 어긋나면 안 되죠.

tabindex 남용 금지 tabindex를 양수로 함부로 쓰지 않습니다. 양수 tabindex는 초점 순서를 꼬이게 하죠. DOM 순서를 논리적으로 두는 게 기본입니다.

BP-081·SP-082의 연결. BP-081(입력 필드 초점 자유 이동)을, 로그인 폼에 구체 적용한 게 SP-082입니다. BP-081은 키보드 트랩 없이 자유 이동, SP-082는 그 이동이 논리 순서이게요. 함께 키보드 로그인 접근성을 완성하죠.

WCAG 2.4.3·1.3.2. 초점 순서(2.4.3)와 의미 있는 순서(1.3.2)의 로그인 적용입니다. 콘텐츠 순서가 의미에 영향을 주면(로그인 폼의 입력 순서), 올바른 순서가 프로그램적으로 결정 가능해야 하죠.

이 규칙은 로그인(SP)의 ’로그인 폼 초점 순서’를 담당합니다 — 시각 배열과 무관하게 초점을 논리 순서로 이동하게 해(082), 키보드·스크린 리더 사용자가 로그인 폼을 순서대로 쓰게 하죠.

정리하면 — CSS로 시각 배열을 바꿔 초점 순서가 어긋나면 키보드 사용자가 혼란스러우므로, DOM을 논리적 순서로 두고 시각 =DOM을 일치시켜 초점이 논리 순서로 이동하게 해야 합니다(tabindex 양수 남용 금지).

3. 점검 / 개선

무엇을 점검하나

DOM 논리 순서 — 로그인 폼이 DOM에서 논리 순서(아이디→비밀번호→버튼)인가.

시각=DOM — 시각 배열과 DOM·초점 순서가 일치하는가(WCAG 1.3.2).

tabindex — tabindex 양수 남용이 없는가.

개선 방향

DOM을 논리 순서로 → Tab 초점 논리 순서(WCAG 2.4.3). 시각=DOM(1.3.2).

CSS order로 시각만 바꾸고 DOM 어긋남 방지. tabindex 양수 남용 금지.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	로그인 폼 DOM·초점 순서 구현
QA/접근성	키보드 초점 순서 검증

기관 유형	SP-082 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로그인 폼이 DOM에서 논리 순서(아이디→비밀번호→버튼)인가요?

□ 시각 배열과 DOM·초점 순서가 일치하나요(WCAG 1.3.2)?

□ tabindex 양수 남용이 없나요?

❓ FAQ

Q1. 초점 순서가 어긋나면 뭐가 문제인가요? CSS로 시각 배열만 바꾸고 DOM이 그대로면, 시각적으론 아이디→비밀번호인데 Tab 초점은 다른 순서로 튑니다. 키보드 사용자가 혼란스럽고 순서대로 못 채우죠. Q2. 어떻게 논리 순서로 보장하나요? DOM을 논리 순서(아이디→비밀번호→옵션→버튼)로 둡니다. 그러면 Tab 초점이 자연히 논리 순서로 이동하죠(WCAG 2.4.3). CSS로 시각만 바꾸고 DOM 어긋남을 막습니다. Q3. BP-081과 같나요? BP-081(입력 필드 초점 자유 이동)을 로그인 폼에 적용한 것입니다. BP-081은 키보드 트랩 없이 자유 이동, SP-082는 그 이동이 논리 순서이게요.

6. 마무리

SP-082의 메시지:

탭 순서는 논리대로 — 로그인 폼 초점을 시각 배열과 무관하게 논리 순서로 이동하게 하라.

CSS로 시각 배열을 바꿔 초점 순서가 어긋나면 키보드 사용자가 혼란스럽습니다. DOM을 논리 순서로 두고 시각=DOM을 일치 시키는 게 핵심이죠. 다음 편은 autocomplete 속성 설정입니다.

다음 편 예고 ▶ 「757. (SP-083) 웹사이트에서는 HTML 표준인 autocomplete 속성을 사용하여 입력 필드에 자동 완성 속성을 설정하고 있다.」

ViewCheck는 로그인 폼 초점이 논리적 순서로 이동하는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

WCAG 2.1 SC 2.4.3 Focus Order / 1.3.2 Meaningful Sequence — https://www.w3.org/WAI/WCAG21/Understanding/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준