모든 버튼은 키보드로 눌리게

KRDS CP-275 — 비활성화, 사용불가 상태인 경우를 제외하고 모든 버튼은 키보드로 접근하고 조작할 수 있도록 하고 있다.

0. 들어가며 — 마우스 없이 버튼 누르기

이번 395편은 비활성 상태를 제외한 모든 버튼을 키보드로 접근·조작할 수 있게 하라는 규칙입니다.

버튼은 동작을 실행하는 핵심 요소죠. 이것이 마우스로만 작동하면 — 키보드 사용자는 신청·제출·저장 같은 동작을 못 합니다. CP-275는 모든 버튼이 키보드로 닿고(Tab) 실행(Enter/Space)되게 하라고 규정합니다. 링크 키보드 접근 (CP-261), 구조화 목록 CP-148과 같은 가장 기본 규칙이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모든 버튼 키보드 접근·조작

CP-275 (컴포넌트 > 버튼) “비활성화, 사용불가 상태인 경우를 제외하고 모든 버튼은 키보드로 접근하고 조작할 수 있도록 하고 있다.”

비활성 상태가 아닌 모든 버튼을 키보드로 초점 이동(Tab)하고 실행(Enter/Space)할 수 있게 구현하라는 뜻입니다.

정리: (비활성 제외) 모든 버튼을 키보드로 접근·조작 가능하게 하라. 이게 CP-275입니다.

2. 왜 모든 버튼이 키보드로 접근돼야 하나

키보드 접근성은 웹 접근성의 가장 기본 토대입니다(WCAG SC 2.1.1) — 마우스를 못 쓰는 사용자(운동 장애· 스크린 리더·스위치)는 키보드로 조작하죠. 버튼은 — 동작을 실행하는 핵심 인터랙티브 요소라, 키보드로 닿지 않으면 그 사용자는 신청·제출·저장 같은 중요 행동을 못 합니다. 링크가 ’이동’을 막힌다면, 버튼은 ’동작’이 막히죠.

버튼을 키보드로 쓰는 방식 — Tab으로 버튼에 초점을 옮기고, Enter 또는 Space로 실행합니다(링크는 Enter만, 버튼은 Enter와 Space 둘 다). 이것이 작동하려면 버튼이 표준 인터랙티브 요소여야 하죠:

표준 버튼 <button> — <button>은 기본적으로 키보드 포커스를 받고 Enter·Space로 실행됩니다. 즉 버튼을 <button>으로 만들면 키보드 접근이 자동으로 되죠. 대부분의 버튼은 별도 처리 없이 충족됩니다.

문제는 비표준 구현(가짜 버튼):

<div>/<span> + onclick — 버튼을 <div>·<span>에 클릭 이벤트만 붙여 만들면 — 키보드 포커스를 못 받아 Tab으로 닿지 않고, Enter/Space 실행도 안 됩니다(구조화 목록 CP-148, 링크 CP-261, 버튼 인지 CP-277 정신). 마우스 전용 함정이죠.

<a> 를 버튼처럼 — 링크(<a>)를 버튼 동작에 쓰면 역할이 어긋나고(CP-265 링크/버튼 구분), Space 키 동작도 다르죠.

그래서 — 버튼은 <button>(또는 role="button" + 키보드 핸들러)으로 만들어야 합니다. <button>이 가장 간단· 안전하죠.

초점 표시도 함께. 키보드로 닿는 것만으론 부족하고 — 그 초점이 시각적으로 보여야(focus indicator) 키보드 사용자가 위치를 압니다. 이는 다음 편 CP-276(키보드 초점 명확 표시 + 적절한 크기)에서 다루죠. CP-275(키보드 실행)와 CP-276(초점 표시)이 함께 키보드 사용성을 완성합니다.

‘비활성 제외’. 규칙은 ‘비활성화, 사용불가 상태 제외’를 명시합니다 의도적으로 비활성화한 버튼(현재 못 누르는)은 키보드 접근 대상에서 빠질 수 있죠. 다만 비활성 버튼의 처리는 신중해야 합니다. disabled 버튼은 키보드 초점도 못 받는데(완전 비활성), 일부는 비활성이지만 초점은 받게 해 ’왜 비활성인지’ 안내하는 게 낫기도 하죠(aria-disabled). 비활성 처리는 그 이유를 명확히 전달하는 게 중요합니다(탭 사용 불가 배제 CP-232 정신).

왜 ‘기본인데 규칙으로?’ 표준 <button>이면 자동 충족인데 왜 규칙일까요? — 실무에서 가짜 버튼(div 클릭, 커스텀 컴포넌트) 이 흔하기 때문입니다. 특히 SPA·디자인 시스템에서 버튼을 커스텀으로 만들다 키보드 접근을 빠뜨리기 쉽죠. 그래서 ‘모든 버튼이 키보드로 되는지’ 점검이 필요합니다.

이 규칙은 버튼의 ’기본 접근성’을 보장하고, CP-276(초점·크기)·CP-277(버튼 인지)과 함께 버튼을 키보드·스크린 리더 사용자가 쓰게 하죠.

정리하면 — 버튼은 동작을 실행하는 핵심 요소이므로, <button>으로 만들어(비활성 제외) 모든 버튼이 키보드로 닿고 Enter·Space로 실행되게 해, 마우스를 못 쓰는 사용자도 동작을 수행하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 접근 — 모든 버튼에 Tab으로 닿고 Enter·Space로 실행되는가.

표준 요소 — 버튼이 <button>인가(div 클릭·링크 아님).

초점 표시 — 버튼의 키보드 초점이 보이는가(CP-276).

개선 방향

버튼을 <button>으로 구현. div 클릭·가짜 버튼 제거.

부득이하면 role="button"+tabindex="0"+Enter/Space 핸들러. SPA 커스텀 버튼 점검.

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

역할	책임
퍼블리셔/개발	<button>·키보드 접근 구현
접근성 담당	키보드만으로 전 버튼 사용 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 버튼에 Tab으로 닿고 Enter·Space로 실행되나요?

□ 버튼이 <button>인가요(div 클릭·링크 아님)?

□ 버튼의 키보드 초점이 보이나요?

❓ FAQ

Q1. <button>이면 자동으로 키보드 접근되나요? 네. 표준 버튼은 기본적으로 포커스·Enter·Space 실행이 됩니다. <div onclick>이 문제죠. Q2. 버튼과 링크의 키보드가 다른가요? 버튼은 Enter와 Space 둘 다, 링크는 Enter로 실행됩니다. 역할에 맞는 요소를 써야 하죠. Q3. 비활성 버튼은요? 의도적 비활성은 제외 가능하나, 비활성 이유를 명확히 전달하는 게 좋습니다.

6. 마무리

CP-275의 메시지:

모든 버튼은 키보드로 눌리게 — (비활성 제외) <button>으로 키보드 접근·조작 가능하게.

버튼은 동작을 실행하는 핵심 요소라 키보드로 닿지 않으면 신청·제출 같은 행동이 막힙니다. <button>으로 만들면 자동 충족되지만, div 클릭·커스텀 버튼이 함정이죠. 초점 표시도 챙겨야 합니다. 다음 편은 키보드 초점 표시와 적절한 크기입니다.

다음 편 예고 ▶ 「396. (CP-276) 키보드 초점이 명확하게 표시되도록 하고 있으며, 적절한 크기로 제공하고 있다.」

ViewCheck는 모든 버튼이 키보드로 접근·조작 가능한지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.1.1 Keyboard — https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

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

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