어느 칸이 문제인지 콕 짚어주기

KRDS BP-080 — 어떤 항목에서 오류가 발생했는지에 관한 정확한 정보를 오류 메시지로 알려주고 있다.

0. 들어가며 — “오류가 있습니다”만으론 못 찾는다

이번 646편은 어떤 항목에서 오류가 발생했는지에 관한 정확한 정보를 오류 메시지로 알려주게 하라는 규칙입니다.

폼에서 — 여러 항목 중 어느 게 오류인지 정확히 짚어주지 않으면, 사용자는 일일이 찾아야 하죠. BP-080은 오류 항목을 정확히 알리라고 규정합니다. 오류 식별(BP-062)의 입력 폼 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 오류 항목 정확 안내

BP-080 (기본 패턴 > 입력 폼) “어떤 항목에서 오류가 발생했는지에 관한 정확한 정보를 오류 메시지로 알려주고 있다.”

오류가 발생한 항목에 관한 정확한 정보를 오류 메시지로 알리라는 뜻입니다.

정리: 어느 항목이 오류인지 정확히 오류 메시지로 알려라. 이게 BP-080입니다.

2. 왜 오류 항목 정확 안내인가

입력 폼은 여러 항목으로 구성됩니다. 제출 후 오류가 났을 때, 어느 항목이 문제인지 정확히 알려줘야 사용자가 찾아 고치죠. BP-080은 오류 항목의 정확한 정보를 요구합니다.

오류 항목이 불명확할 때의 문제:

항목 못 찾음 ‘입력 정보를 확인해 주세요’, ’오류가 있습니다’처럼 어느 항목인지 안 짚어주면, 사용자는 여러 항목 중 무엇이 문제인지 일일이 찾아야 합니다. 긴 폼이면 매우 번거롭죠.

추측·반복 실패 어느 항목인지 모르니, 이것저것 고쳐보다 반복 실패합니다. 좌절·이탈로 이어지죠.

그래서 BP-080은 — 정확한 항목 정보를 알리라고 합니다:

해당 항목 명시 오류 메시지에 어느 항목인지 명시합니다. ’이메일 항목: 형식이 올바르지 않습니다’처럼 항목명 + 오류 내용을요. 또는 해당 입력 필드 옆·아래에 메시지를 둬, 위치로 항목을 알리죠(BP-061 위치).

시각적 항목 표시 오류 난 필드를 시각적으로 표시(빨간 테두리·아이콘)해, 어느 칸인지 한눈에 보이게요.

여러 오류 요약 + 링크 여러 항목이 오류면, 폼 상단에 ‘○건의 오류’ 요약 + 각 항목으로 가는 링크를요. 사용자 가 하나씩 찾아 고치게요.

초점 이동 연계 오류 항목으로 초점을 이동시켜(BP-065), 바로 그 항목에 닿게요. 키보드·스크린 리더 사용자도 정확히 그 항목으로 가죠.

BP-062·080의 관계. BP-062(오류 그룹)는 ’어떤 종류의 오류가 어떤 지점에서’를 일반적으로 다뤘고, BP-080은 입력 폼 맥락에서 ’어떤 항목’을 정확히 알리라는 구체 요구입니다. 폼은 항목이 많아 ’어느 항목’이 특히 중요하죠.

접근성 메시지-필드 연결. 오류 메시지를 해당 입력 필드와 프로그램적으로 연결합니다(aria-describedby로 필드 ↔ 메시지 연결, aria-invalid="true"로 오류 표시). 스크린 리더가 그 필드에 가면 ’이메일, 형식이 올바르지 않습니다, 유효하지 않음’처럼 항목·오류를 함께 읽죠. 시각 표시(빨간 테두리)만으론 스크린 리더가 모릅니다.

이 규칙은 입력 폼의 ’오류 항목 식별’을 담당합니다 — 어느 항목이 오류인지 정확히 알려(080), 사용자가 문제 항목을 바로 찾아 고치게 하죠. 오류 식별(BP-062)·초점(BP-065)·필수 표시(BP-082)와 함께 폼 오류 처리를 완성합니다.

정리하면 — 어느 항목이 오류인지 불명확하면 사용자가 일일이 찾아야 하므로, 오류 메시지에 해당 항목을 정확히 명시하고 필드와 연결(aria-describedby/invalid)해 바로 찾아 고치게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

항목 명시 — 오류 메시지가 어느 항목인지 명시하는가(‘이메일 항목’ 등).

시각·요약 — 오류 필드 시각 표시 + 다건 시 상단 요약·링크가 있는가.

접근성 연결 — 메시지-필드 연결(aria-describedby/invalid)이 되는가.

개선 방향

오류 메시지에 항목 명시 + 필드 옆 배치 + 시각 표시.

다건은 상단 요약·링크. aria-describedby/aria-invalid로 연결(BP-065 초점).

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

역할	책임
개발	오류 항목 표시·aria 연결
UX 라이터	항목별 오류 문구

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 오류 메시지가 어느 항목인지 명시하나요(‘이메일 항목’ 등)?

□ 오류 필드 시각 표시 + 다건 시 상단 요약·링크가 있나요?

□ 메시지-필드 연결(aria-describedby/invalid)이 되나요?

❓ FAQ

Q1. ’오류가 있습니다’면 안 되나요? 어느 항목인지 모르면 일일이 찾아야 합니다. ’이메일 항목: 형식이 올바르지 않습니다’처럼 정확히 짚어줘야 바로 고치죠. Q2. aria-describedby/invalid가 뭔가요? 입력 필드와 오류 메시지를 연결(describedby)하고 오류 상태를 표시(invalid) 하는 속성입니다. 스크린 리더가 필드에서 항목·오류를 함께 읽죠. Q3. BP-062(오류 식별)와 같나요? BP-062는 일반적 오류 식별, BP-080은 입력 폼에서 ’어느 항목’을 정확히 알리는 구체 요구입니다. 폼은 항목이 많아 특히 중요하죠.

6. 마무리

BP-080의 메시지:

어느 칸이 문제인지 콕 짚어주기 — 오류 항목의 정확한 정보를 메시지로 알려라.

어느 항목이 오류인지 불명확하면 사용자가 일일이 찾아야 합니다. 항목을 정확히 명시하고 필드와 연결해 바로 찾아 고치게 하는 게 핵심이죠. 다음 편은 입력 필드 초점 자유 이동입니다.

다음 편 예고 ▶ 「647. (BP-081) 사용자가 입력 필드의 초점을 자유롭게 이동시킬 수 있도록 제공하고 있다.」

ViewCheck는 오류 항목의 정확한 정보가 오류 메시지로 안내되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

WCAG 2.1 SC 3.3.1 Error Identification — https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html

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

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