스크린 리더가 부르는 이름이 정확하게

KRDS CP-274 — 버튼의 접근 가능한 이름은 버튼을 통해 실행되는 기능을 적절하게 설명할 수 있는 내용으로 제공하고 있다.

0. 들어가며 — 버튼의 ‘진짜 이름’

이번 394편은 버튼의 접근 가능한 이름이 실행 기능을 적절하게 설명하게 하라는 규칙입니다.

’접근 가능한 이름(accessible name)’은 — 스크린 리더가 그 버튼을 읽을 때 부르는 이름입니다. 이게 버튼의 실제 기능과 어긋나거나 모호하면 — 비시각 사용자가 버튼을 오해하죠. CP-274는 접근 가능한 이름이 기능을 적절히 설명 하게 하라고 규정합니다. CP-270(동사형 레이블)의 접근성 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 접근 가능한 이름이 기능 적절 설명

CP-274 (컴포넌트 > 버튼) “버튼의 접근 가능한 이름은 버튼을 통해 실행되는 기능을 적절하게 설명할 수 있는 내용으로 제공하고 있다.”

버튼의 접근 가능한 이름(스크린 리더가 읽는 이름)을, 그 버튼이 실행하는 기능을 적절히 설명하는 내용으로 제공 하라는 뜻입니다.

정리: 버튼의 접근 가능한 이름이 실행 기능을 적절히 설명하게 하라. 이게 CP-274입니다.

2. 왜 접근 가능한 이름이 기능을 설명해야 하나

‘접근 가능한 이름(accessible name)’은 보조기술(스크린 리더)이 요소를 사용자에게 알릴 때 부르는 이름 입니다. 버튼이면 스크린 리더가 “○○, 버튼”이라고 읽을 때 그’○○‘이 접근 가능한 이름이죠. 이 이름이 버튼의 실제 기능을 적절히 설명해야 비시각 사용자가 ’이 버튼이 무슨 동작을 하는지’ 알고 누릅니다.

접근 가능한 이름은 어디서 오나. 버튼의 접근 가능한 이름은 — 여러 출처에서 계산됩니다(우선순위 있음):

보이는 텍스트 레이블 — <button>저장</button>이면 ’저장’이 이름. 가장 자연스럽죠(CP-272의 텍스트 설명).

aria-label — <button aria-label="검색">🔍</button>이면 ’검색’이 이름(아이콘만 버튼, CP-272).

aria-labelledby — 다른 요소를 가리켜 그 텍스트를 이름으로.

CP-274는 — 이 접근 가능한 이름이 실행 기능을 적절히 설명하는지를 봅니다. 보이는 텍스트가 명확한 동사형 (CP-270)이면 자연히 좋은 접근 가능한 이름이 되지만, 문제가 생기는 경우들이 있죠:

문제 사례:

모호한 이름 — “확인”, “예”, 빈 버튼처럼 — 접근 가능한 이름이 기능을 설명 못 하는 경우(CP-270 모호함과 연결). 스크린 리더가 “확인, 버튼”만 읽으면 무슨 확인인지 모르죠.

이름 없음 — 아이콘만의 버튼에 접근 가능한 이름(aria-label)이 없으면 — “버튼”으로만 읽혀 기능 불명 (CP-272 위반).

aria-label이 화면 텍스트와 어긋남 — 화면엔 “저장”인데 aria-label="제출"이면 — 시각·비시각 사용자가 받는 정보가 달라 혼란(WCAG SC 2.5.3 Label in Name 위반). aria-label은 화면 텍스트를 포함해야 하죠.

부적절한 이름 — 접근 가능한 이름이 파일명(“btn_2034.svg”)이거나 기능과 무관하면 무의미합니다.

그래서 CP-274는 — 접근 가능한 이름이 기능을 적절히 설명하게 합니다:

보이는 텍스트가 명확하면(CP-270 동사형) — 그게 좋은 이름.

아이콘만이면 — aria-label로 기능 설명(CP-272). “검색”, “메뉴 열기” 등.

aria-label 사용 시 — 화면 텍스트와 일치/포함(SC 2.5.3).

버튼 이름 묶음. CP-270(동사형 레이블), CP-272(텍스트 설명 제공), CP-273(중복 배제), CP-274(접근 가능한 이름 기능 설명)가 함께 — 버튼의 이름을 명확하고 적절하게 만듭니다:

CP-270 — 보이는 레이블을 동사형·명확하게.

CP-272 — 모든 버튼에 텍스트 설명(아이콘만은 aria-label).

CP-273 — 아이콘+텍스트는 중복 배제.

CP-274 — 결과적으로 접근 가능한 이름이 기능을 적절히 설명.

CP-274는 이 묶음의 ’종합 결과’를 점검하는 규칙이죠 — 어떤 방식으로 이름이 정해지든, 최종적으로 스크린 리더가 읽는 이름이 기능을 적절히 설명하는가.

이 규칙은 링크의 접근 가능한 이름(CP-262 목적지 설명, CP-263 고유)에 대응하는 버튼 버전입니다 — 링크는 목적지를, 버튼은 기능을 접근 가능한 이름으로 설명하죠.

정리하면 — 버튼의 접근 가능한 이름은 스크린 리더가 부르는 이름이므로, 그것이 버튼의 실행 기능을 적절히 설명 하게(명확한 텍스트·aria-label, 화면 텍스트 일치) 제공해 비시각 사용자가 기능을 알고 누르게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

기능 설명 — 접근 가능한 이름이 버튼의 실행 기능을 적절히 설명하는가.

이름 존재 — 모든 버튼에 접근 가능한 이름이 있는가(빈 버튼·파일명 아님).

화면 일치 — aria-label이 화면 텍스트와 일치/포함하는가(SC 2.5.3).

개선 방향

보이는 텍스트를 명확한 동사형으로(CP-270). 아이콘만은 aria-label(CP-272).

aria-label은 화면 텍스트 포함. 스크린 리더 낭독으로 기능 설명 검증.

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

역할	책임
퍼블리셔/개발	접근 가능한 이름·aria-label 적절 제공
접근성 담당	이름이 기능 설명하는지 낭독 검증

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 접근 가능한 이름이 버튼의 실행 기능을 적절히 설명하나요?

□ 모든 버튼에 접근 가능한 이름이 있나요(빈 버튼·파일명 아님)?

□ aria-label이 화면 텍스트와 일치/포함하나요?

❓ FAQ

Q1. 접근 가능한 이름이 뭔가요? 스크린 리더가 버튼을 읽을 때 부르는 이름입니다. 보이는 텍스트·aria-label· aria-labelledby에서 정해지죠. Q2. CP-270과 뭐가 다른가요? CP-270은 보이는 레이블을 동사형으로, CP-274는 최종 접근 가능한 이름이 기능을 적절히 설명하는가(종합 점검)입니다. Q3. aria-label이 화면과 달라도 되나요? 안 됩니다. 화면 텍스트를 포함해야 시각·비시각 사용자가 같은 정보를 받죠(SC 2.5.3).

6. 마무리

CP-274의 메시지:

스크린 리더가 부르는 이름이 정확하게 — 접근 가능한 이름이 실행 기능을 적절히 설명하게.

버튼의 접근 가능한 이름은 스크린 리더가 부르는 이름입니다. 그것이 실행 기능을 적절히 설명해야 비시각 사용자가 기능을 알죠. 명확한 텍스트·aria-label로, 화면 텍스트와 일치하게 제공합니다. 다음 편은 버튼의 키보드 접근 입니다.

다음 편 예고 ▶ 「395. (CP-275) 비활성화, 사용불가 상태인 경우를 제외하고 모든 버튼은 키보드로 접근하고 조작할 수 있도록 하고 있다.」

ViewCheck는 버튼의 접근 가능한 이름이 기능을 적절히 설명하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.html

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

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

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