틀린 곳으로 바로 데려가기

KRDS BP-065 — 오류가 발생한 요소로 초점이 자동으로 이동되도록 제공하고 있다.

0. 들어가며 — 오류 항목을 일일이 찾아야 하면

이번 631편은 오류가 발생한 요소로 초점이 자동으로 이동되도록 제공하라는 규칙입니다.

폼을 제출했는데 — 오류가 났을 때, 어느 항목이 문제인지 일일이 스크롤해 찾아야 하면 번거롭죠. 특히 — 키보드·스크린 리더 사용자는 더요. BP-065는 오류 요소로 초점을 자동 이동시키라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 오류 요소 초점 자동 이동

BP-065 (기본 패턴 > 오류) “오류가 발생한 요소로 초점이 자동으로 이동되도록 제공하고 있다.”

오류가 난 요소로 초점(포커스)을 자동으로 이동시키라는 뜻입니다.

정리: 오류 요소로 초점을 자동 이동시켜라. 이게 BP-065입니다.

2. 왜 초점 자동 이동인가

폼을 제출했는데 오류가 나면, 사용자는 오류 난 항목을 찾아 고쳐야 합니다. 그런데 그 항목이 화면 어디 있는지 일일이 찾으려면 번거롭죠. 특히 마우스 없이 키보드만 쓰거나, 스크린 리더를 쓰는 사용자는 더 어렵습니다. BP-065는 초점 자동 이동으로 이를 해결합니다.

초점 자동 이동이 없을 때의 문제:

오류 항목 찾기 어려움 긴 폼에서 오류가 났는데, 초점이 그대로 있거나 엉뚱한 곳에 있으면, 사용자는 어느 항목이 문제인지 스크롤하며 찾아야 합니다.

키보드 사용자 곤란 — 키보드 사용자는 — Tab으로 일일이 이동해 오류 항목을 찾아야 합니다. 매우 번거롭죠.

스크린 리더 사용자 막막 스크린 리더 사용자는 시각적 오류 표시(빨간 테두리)를 못 봅니다. 초점이 오류 요소로 가지 않으면, 어디가 문제인지 알기 어렵죠.

그래서 BP-065는 — 초점을 자동 이동시키라고 합니다:

오류 요소로 초점 이동 제출 후 오류가 나면 첫 번째 오류 요소(또는 오류 요약)로 초점(포커스)을 자동 이동시킵니다. 사용자가 바로 그 항목에 가 있게요. 키보드 사용자는 즉시 입력해 고치고, 스크린 리더 사용자는 그 요소의 오류 메시지를 듣죠.

오류 메시지 연결 초점이 간 요소에 오류 메시지가 연결돼야(aria-describedby로 입력과 오류 메시지 연결), 스크린 리더가 ’○○ 항목, 필수입니다’처럼 요소와 오류를 함께 읽습니다.

오류 요약 + 초점(권장) 여러 오류면 폼 상단에 오류 요약(BP-062)을 두고, 그 요약으로 초점을 이동시켜 스크린 리더가 전체 오류를 먼저 안내받게 하기도 합니다. 요약의 각 항목 링크로 해당 필드로 가게요.

키보드·스크린 리더 접근성의 핵심. 초점 이동은 마우스 없는 사용자에게 특히 중요합니다. 시각 사용자는 빨간 표시를 보고 마우스로 클릭하면 되지만, 키보드·스크린 리더 사용자는 초점이 가야 그 항목에 닿죠. 초점 관리(focus management)는 동적 변화 접근성의 핵심입니다.

WCAG 연계. 오류 식별(WCAG 3.3.1) + 초점 관리와 연결됩니다. 오류 발생 시 — 사용자가 오류 위치로 효율적으로 이동하게 돕는 거죠. aria-live(BP-049 정신)로 오류 발생을 알리는 것과도 함께 갑니다.

이 규칙은 오류의 ’오류 위치 접근’을 담당합니다 — 오류 요소로 초점을 자동 이동시켜(065), 모든 사용자가(특히 키보드· 스크린 리더) 오류 항목에 바로 닿아 고치게 하죠.

정리하면 — 오류 난 항목을 일일이 찾는 건 번거롭고 키보드·스크린 리더 사용자에겐 특히 어려우므로, 제출 후 오류 시 첫 오류 요소(또는 요약)로 초점을 자동 이동시켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 이동 — 제출 후 오류 시 오류 요소(또는 요약)로 초점이 자동 이동하는가.

메시지 연결 — 오류 요소와 오류 메시지가 연결되는가(aria-describedby).

키보드·스크린 리더 — 마우스 없이도 오류 항목에 바로 닿는가.

개선 방향

제출 후 오류 시 첫 오류 요소/요약으로 초점 자동 이동.

aria-describedby로 입력↔오류 메시지 연결. 키보드·스크린 리더 검증.

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

역할	책임
개발	초점 이동·aria 연결 구현
QA/접근성	키보드·스크린 리더 검증

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

웹접근성 의무 대상이며 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 제출 후 오류 시 오류 요소(또는 요약)로 초점이 자동 이동하나요?

□ 오류 요소와 오류 메시지가 연결되나요(aria-describedby)?

□ 마우스 없이도 오류 항목에 바로 닿나요?

❓ FAQ

Q1. 왜 초점을 자동 이동하나요? 오류 항목을 일일이 찾는 건 번거롭습니다. 키보드 사용자는 Tab으로, 스크린 리더 사용자는 시각 표시를 못 보니 더 어렵죠. 초점이 가야 바로 고칩니다. Q2. 어디로 초점을 보내나요? 첫 번째 오류 요소로요. 여러 오류면 폼 상단 오류 요약으로 보내 전체를 먼저 안내받게 하기도 합니다. 요약 링크로 각 필드로 가게요. Q3. aria-describedby가 뭔가요? 입력 요소와 그 오류 메시지를 연결하는 속성입니다. 스크린 리더가 입력에 초점이 가면 ’○○ 항목, 필수입니다’처럼 오류를 함께 읽죠.

6. 마무리

BP-065의 메시지:

틀린 곳으로 바로 데려가기 — 오류 요소로 초점을 자동 이동시켜라.

오류 항목을 일일이 찾는 건 번거롭고 키보드·스크린 리더 사용자에겐 특히 어렵습니다. 첫 오류 요소로 초점을 자동 이동 시켜 바로 고치게 하는 게 핵심이죠. 다음 편은 입력값 유지 — 오류 그룹의 마지막입니다.

다음 편 예고 ▶ 「632. (BP-066) 오류 발생을 안내한 후에도 사용자가 입력한 값이나 조작한 내용을 유지하고 있다.」

ViewCheck는 오류 발생 시 오류 요소로 초점이 자동 이동되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 오류 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_07.html

WCAG 2.1 SC 3.3.1 Error Identification / 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/

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

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