누르면 무슨 일이 일어날지

KRDS CP-310 — 태그를 실행하였을 때 어떤 동작이 발생하는지 예측할 수 있도록 용도에 적합한 접근 가능한 이름이나 상태 정보를 제공한다.

0. 들어가며 — ’X’만 들리는 삭제 태그

이번 430편은 대화형 태그를 실행했을 때 어떤 동작이 발생할지 예측할 수 있도록, 용도에 적합한 접근가능한 이름· 상태 정보를 제공하라는 규칙입니다.

대화형 태그(필터·선택·삭제)는 — 누르면 동작이 일어나죠. 스크린 리더 사용자가 그 태그를 안전하게 쓰려면 — ‘누르면 무슨 일이 일어나는지’(필터 적용? 삭제?)와 ‘지금 어떤 상태인지’(선택됨? 안 됨?)를 알아야 합니다. CP-310은 대화형 태그의 접근가능한 이름·상태 정보를 규정합니다. 캐러셀 CP-198, 탭 CP-238의 태그 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 용도에 맞는 이름·상태 정보

CP-310 (컴포넌트 > 태그) “태그를 실행하였을 때 어떤 동작이 발생하는지 예측할 수 있도록 용도에 적합한 접근 가능한 이름이나 상태 정보를 제공해야 하고 있다.”

대화형 태그에, 실행 시 일어날 동작을 예측할 수 있는 접근가능한 이름과 (선택·삭제 등) 상태 정보를 용도에 맞게 제공하라는 뜻입니다.

정리: 대화형 태그에 동작을 예측할 접근가능한 이름·상태를 제공하라. 이게 CP-310입니다.

2. 왜 이름·상태 정보가 필요한가

대화형 태그(CP-307)는 누르면 동작이 일어나는 컨트롤입니다. 스크린 리더 사용자가 이를 안전하게 쓰려면 ①이 태그를 누르면 무슨 일이 일어나는지(접근가능한 이름)와 ②지금 어떤 상태인지(상태 정보)를 알아야 하죠. 이것이 없으면 보지 않고 조작하는 사용자는 예측 불가능한 동작에 당황합니다.

① 용도에 적합한 접근가능한 이름. 태그의 이름이 — 실행 시 동작을 예측하게 해야 합니다. 태그 용도별로 보면:

필터 태그 — ‘복지’라는 필터 태그면 — 스크린 리더가 ’복지, 필터’ 또는 ‘복지로 필터링’ 정도로 읽혀, ’누르면 복지로 거르는구나’를 예측하게요.

삭제 가능 태그(removable) 입력한 키워드 태그에 ‘X’(삭제) 버튼이 있으면 그 X가 시각적으론 명확해도, 스크린 리더엔 ‘버튼’으로만 들리면 무엇을 지우는지 모르죠. aria-label="복지 태그 삭제"처럼 무엇을 삭제 하는지 이름을 줘야 합니다. 시각적 ’X’ 아이콘에 접근가능한 이름을 부여하는 게 핵심이죠.

선택 칩(choice chip) — 누르면 선택/해제되는 칩이면 — 그 용도(선택)가 이름·역할로 전달돼야 합니다.

즉 — 태그의 용도(필터/삭제/선택)에 맞는 이름을 줘, 누르면 무슨 동작인지 예측하게 하죠. 단순히 보이는 텍스트 (‘복지’)만으론 — 그게 정보인지 필터인지 삭제인지 불분명할 수 있으니, 용도를 명확히 합니다.

② 상태 정보. 대화형 태그가 — 상태를 가지면(선택됨/안 됨, 눌림/안 눌림), 그 상태를 스크린 리더에 전해야 합니다:

선택 상태 필터·선택 태그가 현재 적용/선택됐는지 aria-pressed(토글 버튼) 또는 aria-selected 등으로 전합니다. 스크린 리더가 ’복지, 선택됨’처럼 읽게요. 시각적으로 선택된 태그(색·테두리)가 스크린 리더에도 ’선택됨’으로 전달돼야 하죠(색만으로는 색맹·전맹에게 안 통하니, CP-311의 색 무관 + 상태 정보).

상태 변화 알림 — 태그를 눌러 상태가 바뀌면(필터 적용, 태그 삭제) — 그 결과가 스크린 리더에 전달되게(상태 변경·라이브 영역 등).

적절한 마크업. 이를 위해 — 대화형 태그는 <button>(또는 적절한 role)으로 만들고, aria-label/aria-pressed 등을 줍니다. CP-307에서 대화형/비대화형을 가른 덕에 — 대화형에만 이 마크업·속성을 적용하죠. 비대화형 태그는 정보 표시라 이 규칙이 없습니다.

이 규칙은 대화형 태그의 ’예측 가능성·식별성’을 담당합니다 — 초점 표시(309)로 어디 있는지 알고, 이름·상태(310)로 누르면 무슨 일인지·지금 어떤 상태인지 알아, 스크린 리더 사용자가 대화형 태그를 안전하게 조작하게 하죠. 라디오 CP-287·체크박스 CP-296의 ’이름 제공’과 같은 정신을, 태그의 ’동작 예측’으로 확장한 것입니다.

정리하면 — 대화형 태그는 누르면 동작하는데 이름·상태 정보가 없으면 스크린 리더 사용자가 결과를 예측 못 하므로, 용도에 맞는 접근가능한 이름과 선택·삭제 등 상태 정보를 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

접근가능한 이름 — 대화형 태그에 용도(필터/삭제/선택)를 예측할 이름이 있는가.

삭제 태그 이름 — ‘X’ 삭제 버튼에 무엇을 지우는지 aria-label이 있는가.

상태 정보 — 선택·적용 상태가 aria-pressed/selected 등으로 전달되는가.

개선 방향

대화형 태그를 <button>/role로, 용도에 맞는 aria-label 부여.

삭제 ‘X’에 ’OO 삭제’ 이름. 선택 상태를 aria-pressed/selected로 전달.

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

역할	책임
퍼블리셔/개발	접근가능한 이름·상태 속성 구현
콘텐츠/UX	태그 용도·이름 텍스트 정의
QA/접근성	스크린 리더 동작 예측·상태 검증

기관 유형	CP-310 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (대화형 태그 사용 시)

필터·선택·삭제 등 대화형 태그를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 대화형 태그에 용도(필터/삭제/선택)를 예측할 접근가능한 이름이 있나요?

□ ‘X’ 삭제 버튼에 무엇을 지우는지 aria-label이 있나요?

□ 선택·적용 상태가 aria-pressed/selected 등으로 전달되나요?

❓ FAQ

Q1. 삭제 ‘X’에 왜 이름이 필요한가요?** 시각적 X는 명확해도 스크린 리더엔 ’버튼’으로만 들립니다. ’OO 태그 삭제’ 라고 이름을 줘야 무엇을 지우는지 알죠. Q2. 보이는 텍스트(‘복지’)만으론 부족한가요?** 그게 정보인지 필터인지 삭제인지 불분명할 수 있습니다. 용도에 맞는 이름·역할로 동작을 예측하게 하죠. Q3. 선택 상태는 어떻게 전하나요? 토글이면 aria-pressed, 선택형이면 aria-selected 등으로 스크린 리더에 ’선택됨’을 전합니다. 색만으론 부족하죠.

6. 마무리

CP-310의 메시지:

누르면 무슨 일이 일어날지 — 대화형 태그에 동작 예측할 이름과 상태 정보를.

대화형 태그는 누르면 동작하는데 이름·상태가 없으면 스크린 리더 사용자가 결과를 예측 못 합니다. 용도에 맞는 접근 가능한 이름(특히 삭제 ‘X’)과 선택·적용 상태를 제공하는 게 핵심이죠. 다음 편은 태그 색상의 의미 전달과 대비입니다.

다음 편 예고 ▶ 「431. (CP-311) 태그의 색상으로 의미를 전달하지 않으며, 인접 배경과 3:1 이상의 명도 대비를 준수하고 있다.」

ViewCheck는 대화형 태그의 접근가능한 이름·상태 정보를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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