버튼이면 버튼이라고 알려라

KRDS CP-277 — 버튼으로 작동하는 모든 요소는 스크린 리더에서 버튼으로 인지될 수 있도록 한다.

0. 들어가며 — 버튼 그룹의 마지막

이번 397편은 버튼 그룹(CP-266~277, 12개)의 마지막 규칙입니다. 버튼으로 작동하는 모든 요소가 스크린 리더에서 버튼으로 인지되게 하라는 내용이죠.

겉으로 버튼처럼 보이고 누르면 동작하는데 — <div>·<span>에 클릭 이벤트만 붙인 ’가짜 버튼’이면, 스크린 리더는 그것을 ’버튼’으로 인지 못 합니다. CP-277은 버튼으로 작동하는 요소를 스크린 리더가 ’버튼’으로 인지하게 마크업하라고 규정합니다. 링크 인지(CP-265)의 버튼 버전이죠. 이번 편으로 버튼 12개를 마무리합니다.

1. 원문 — 버튼 작동 요소 SR 버튼 인지

CP-277 (컴포넌트 > 버튼) “버튼으로 작동하는 모든 요소는 스크린 리더에서 버튼으로 인지될 수 있도록 한다.”

누르면 동작을 실행하는(버튼으로 작동하는) 모든 요소를 <button>이나 role="button"으로 마크업해, 스크린 리더가 ’버튼’으로 인지하게 하라는 뜻입니다.

정리: 버튼으로 작동하는 요소를 스크린 리더가 ’버튼’으로 인지하게 마크업하라. 이게 CP-277입니다.

2. 왜 스크린 리더가 버튼으로 인지해야 하나

웹 요소의 역할(role) 은 — 스크린 리더가 사용자에게 ’이게 무엇이고 어떻게 작동하는지’를 알리는 핵심입니다. 버튼의 역할은 ’누르면 동작을 실행’이죠. 스크린 리더가 어떤 요소를 ’버튼’으로 인지하면 — “○○, 버튼”이라고 읽어, 사용자가 ’이건 누르면 동작이 실행되는 버튼이구나’를 알고 누릅니다. 또 버튼만 모아 듣는 탐색에도 포함되죠.

가짜 버튼 — 인지 실패. 버튼처럼 작동하는데 버튼이 아닌 요소로 만들면 — 스크린 리더가 ’버튼’으로 인지 못 합니다. 흔한 가짜 버튼:

<div>/<span> + onclick — 클릭 시 동작하는 것을 <div>·<span>에 JavaScript로 붙임. 시각적으론 버튼처럼 보이고 마우스로 작동하지만 — 역할이 없어 스크린 리더가 ’버튼’으로 안 읽고(그냥 텍스트로 읽음), 키보드 포커스도 못 받죠(CP-275 위반). 비시각·키보드 사용자는 그게 누를 수 있는 버튼인지 모릅니다.

링크(<a>)를 버튼처럼 — 동작 실행을 링크로 만들면 역할이 어긋나죠(CP-265 링크/버튼 구분).

올바른 마크업:

<button> (권장) — 가장 확실합니다. <button>은 — 스크린 리더가 자동으로 “버튼”으로 인지하고, 키보드 접근(CP-275)·Enter/Space 실행도 됩니다. 버튼으로 작동하는 요소는 <button>으로 만드는 게 기본이죠.

부득이 다른 요소면 role="button" — 정말 <button>을 못 쓰면 role="button" + tabindex="0" + 키보드 핸들러(Enter/Space)를 붙여야 하지만 — <button>이 훨씬 간단·안전합니다.

링크 vs 버튼 역할 구분(재확인). CP-265(링크 인지)와 CP-277(버튼 인지)은 짝입니다 — 역할을 정확히 구분해야 하죠:

링크 — ‘다른 곳으로 이동’. <a href>, 스크린 리더 “링크”(CP-265).

버튼 — ‘동작 실행’(제출·토글·펼침 등, 이동 아님). <button>, 스크린 리더 “버튼”(CP-277).

이동하는 것은 링크로, 동작하는 것은 버튼으로 — 역할을 맞춰야 스크린 리더가 정확히 안내하고, 사용자가 결과를 예측하죠(Enter/Space 키 동작도 다름). 흔한 실수 — 동작 버튼을 <a href="#">로 만들거나, 페이지 이동을 <button> + JS로 만드는 것. 의미에 맞는 요소를 써야 합니다.

이로써 버튼 12개 규칙(CP-266~277)이 완성됩니다 — 그룹 크기·위계(266·267·268·269), 레이블 명확성(270·272·273· 274), 안전·접근성(271·275·276·277)까지. 동작을 실행하는 핵심 요소인 버튼을, 시각·안전·접근성 모두 챙겨 만드는 규칙들이죠. CP-275(키보드 접근)·CP-277(버튼 인지)이 함께 — 버튼을 키보드·스크린 리더 사용자가 인지하고 쓰게 합니다.

정리하면 — 버튼으로 작동하는 요소는 <button>(또는 role="button")으로 마크업해 스크린 리더가 ’버튼’으로 인지하게 하고, 이동(링크)과 동작(버튼)의 역할을 구분해, 비시각 사용자도 버튼을 인지·활용하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

버튼 인지 — 버튼으로 작동하는 요소가 스크린 리더에 “버튼”으로 인지되는가.

표준 마크업 — <button>으로 마크업됐는가(div 클릭·링크 아님).

링크/버튼 구분 — 동작은 버튼, 이동은 링크로 역할이 맞는가.

개선 방향

버튼으로 작동하는 요소를 <button>으로. 가짜 버튼(div 클릭) 제거.

부득이하면 role="button"+키보드. 동작/이동에 버튼/링크 역할 일치.

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

역할	책임
퍼블리셔/개발	<button>·역할 마크업·링크/버튼 구분
접근성 담당	스크린 리더 버튼 인지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 버튼으로 작동하는 요소가 스크린 리더에 “버튼” 으로 인지되나요?

□ <button>으로 마크업됐나요(div 클릭·링크 아님)?

□ 동작은 버튼, 이동은 링크로 역할이 맞나요?

❓ FAQ

Q1. <div onclick>으로 버튼을 만들면 안 되나요? 역할이 없어 스크린 리더가 ‘버튼’으로 인지 못 하고 키보드 접근도 안 됩니다. <button>을 쓰세요. Q2. 버튼과 링크는 같은 거 아닌가요? 다릅니다. 버튼은 ’동작 실행’, 링크는 ’이동’입니다. 역할을 맞춰야 스크린 리더가 정확히 안내하죠. Q3. role="button"만 주면 되나요? <button>이 훨씬 간단·안전합니다. role="button"은 tabindex· 키보드 핸들러도 직접 구현해야 하죠.

6. 마무리

CP-277의 메시지:

버튼이면 버튼이라고 알려라 — 버튼으로 작동하는 요소를 스크린 리더가 ’버튼’으로 인지하게.

버튼처럼 작동하는데 <div> 클릭으로 만든 가짜 버튼은 스크린 리더가 ’버튼’으로 인지 못 합니다. <button>으로 마크업해 ’버튼’으로 인지되게 하고, 이동(링크)과 동작(버튼)의 역할을 구분하죠. 이로써 버튼 12개(CP-266~277)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 라디오 버튼(Radio button) 으로 넘어갑니다.

다음 편 예고 ▶ 「398. (CP-278) 라디오 버튼 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 버튼으로 작동하는 요소가 스크린 리더에서 버튼으로 인지되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 버튼(Button) 가이드 — https://www.krds.go.kr/html/site/component/component_25.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컴포넌트,웹표준