어느 정책의 버튼인지 알리게

KRDS SP-163 — 각 컨트롤 요소에 title 속성 또는 aria-describedby 속성을 활용하여 접근 가능한 이름이 변별될 수 있도록 하고 있다.

0. 들어가며 — 정책 목록에 ’자세히 보기’가 줄줄이면

이번 837편은 각 컨트롤 요소에 title 속성 또는 aria-describedby 속성을 활용하여 접근 가능한 이름이 변별될 수 있도록 하라는 규칙입니다.

정책 목록의 각 항목에 ‘자세히 보기’ 버튼·링크가 줄줄이 같으면, 스크린 리더 사용자는 어느 정책의 버튼인지 모르죠. SP-163은 컨트롤의 접근가능한 이름을 변별하라고 규정합니다. SP-110·158의 정책 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 컨트롤 접근가능한 이름 변별

SP-163 ([정책 탐색] 서비스 패턴 > 정책 정보 확인 > 정책 탐색) “각 컨트롤 요소에 title 속성 또는 aria-describedby 속성을 활용하여 접근 가능한 이름이 변별될 수 있도록 하고 있다.”

각 컨트롤의 접근가능한 이름을 변별되게 하라는 뜻입니다.

정리: 각 컨트롤의 접근가능한 이름을 변별되게 하라. 이게 SP-163입니다.

2. 왜 컨트롤 이름 변별인가

정책 목록(SP-159)의 각 항목에는, ‘자세히 보기’·‘신청’·‘다운로드’ 같은 컨트롤(버튼·링크)이 반복 됩니다. 그런데 이 컨트롤들이, 전부 똑같이 ’자세히 보기’면, 스크린 리더 사용자는 어느 정책의 것 인지 모르죠. SP-163은 이름 변별을 요구합니다.

이름이 변별 안 될 때의 문제:

어느 정책 모름 스크린 리더 사용자가, 컨트롤만 따로 탐색(버튼·링크 목록)하면, ’자세히 보기, 자세히 보기…’로 똑같이 읽힙니다. 어느 정책의 컨트롤인지 구분 못 하죠(WCAG 2.4.4 링크 목적).

잘못 클릭 어느 정책인지 모르면, 엉뚱한 정책을 클릭할 수 있습니다.

그래서 SP-163은 — 이름 변별을 요구합니다:

title 속성 각 컨트롤에, title 속성으로 변별 정보를요. 단, title은 모바일·키보드 지원이 약하 므로 보조로요.

aria-describedby 컨트롤에, aria-describedby로 그 정책명을 연결합니다. ‘자세히 보기’ + (그 정책명)으로, 스크린 리더가 ’○○ 정책 자세히 보기’처럼 읽게요. 변별되죠(BP-074·SP-110).

aria-label 대안 또는 aria-label로 ’○○ 정책 자세히 보기’를 직접 주거나, 시각적 숨김 텍스트(sr-only)로요. 변별되는 접근가능한 이름이면 됩니다.

각 컨트롤마다 목록의 모든 반복 컨트롤에요. ‘자세히 보기’·‘신청’·‘다운로드’ 각각요.

SP-110·158·163의 일관. SP-110(신청 목록 컨트롤 이름)·SP-158(신청 체크박스 레이블)·SP-163(정책 컨트롤 이름)이 같은 정신입니다. 반복되는 목록 컨트롤에, 각각 변별되는 접근가능한 이름을요. 신청 목록·정책 목록 어디서나요. WCAG 2.4.4(링크 목적)·4.1.2(이름·역할·값)의 일관 적용이죠.

접근가능한 이름의 원리. 접근가능한 이름은, visible 텍스트 + aria(label·labelledby·describedby) + title의 우선순위로 계산됩니다. ‘자세히 보기’ 같은 모호한 visible 텍스트는, aria-describedby(정책명 연결)· aria-label로 보완하죠. 시각 사용자는 옆 정책명으로 알지만, 스크린 리더 사용자는 컨트롤 자체에 변별 정보가 있어야 합니다.

이 규칙은 정책 정보 확인(SP)의 ’컨트롤 접근성’을 담당합니다 — 각 컨트롤의 접근가능한 이름을 변별해(163), 스크린 리더 사용자도 어느 정책의 컨트롤인지 알게 하죠. SP-110·158과 같은 정신입니다.

정리하면 — 반복 컨트롤이 똑같이 읽히면 어느 정책인지 모르므로, title·aria-describedby·aria-label로 각 컨트롤의 접근가능한 이름을 변별되게(정책명 연결) 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

이름 변별 — 반복 컨트롤이 각각 변별되는 접근가능한 이름을 갖는가.

연결 방법 — aria-describedby(정책명 연결)·aria-label로 보완하는가.

모든 컨트롤 — 목록의 모든 반복 컨트롤에 적용됐는가.

개선 방향

aria-describedby로 정책명 연결 또는 aria-label로 ‘○○ 정책 자세히 보기’.

title은 보조. 모든 반복 컨트롤(SP-110·158 정신)에 적용.

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

역할	책임
퍼블리셔/개발	컨트롤 접근가능한 이름 구현
QA/접근성	스크린 리더 컨트롤 변별 검증

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

웹접근성 의무 대상 전체가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 반복 컨트롤이 각각 변별되는 접근가능한 이름을 갖나요?

□ aria-describedby(정책명 연결)·aria-label로 보완하나요?

□ 목록의 모든 반복 컨트롤에 적용됐나요?

❓ FAQ

Q1. 이름이 변별 안 되면 왜 문제인가요? 스크린 리더가 컨트롤만 따로 탐색할 때 ‘자세히 보기, 자세히 보기…’로 똑같이 읽혀 어느 정책의 컨트롤인지 구분 못 합니다(WCAG 2.4.4). 엉뚱한 정책을 클릭할 위험도 있죠. Q2. 어떻게 변별하나요? aria-describedby로 그 정책명을 연결해’○○ 정책 자세히 보기’처럼 읽히게 하거나, aria-label· 시각적 숨김 텍스트(sr-only)로 직접 주면 됩니다. title은 모바일·키보드 지원이 약해 보조로요. Q3. SP-110·158과 같나요? 같은 정신입니다. 반복되는 목록 컨트롤에 각각 변별되는 접근가능한 이름을 주는 것이죠. 신청 목록(110)·신청 체크박스(158)·정책 컨트롤(163) 어디서나 일관 적용합니다.

6. 마무리

SP-163의 메시지:

어느 정책의 버튼인지 알리게 — 각 컨트롤의 접근가능한 이름을 변별되게 하라.

반복 컨트롤이 똑같이 읽히면 어느 정책인지 모릅니다. title·aria-describedby·aria-label로 각 컨트롤의 접근가능한 이름을 변별해 스크린 리더 사용자도 알게 하는 게 핵심이죠. 다음 편부터는 [정보 확인] 서브섹션 — 정책명 강조입니다.

다음 편 예고 ▶ 「838. (SP-164) 사용자가 명확하게 파악할 수 있도록 정책명을 제목으로 제공하고 본문에서 가장 강조된 형태로 표현하고 있다.」

ViewCheck는 각 컨트롤의 접근가능한 이름이 변별되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 정책 정보 확인 가이드 — https://www.krds.go.kr/html/site/service/service_05.html

WCAG 2.1 SC 2.4.4 Link Purpose / 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/

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

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