화살표만 있으면 이름이 없다

KRDS CP-130 — 이전/다음 화면 이동 버튼을 아이콘으로만 제공하는 경우, aria-label=“이전 페이지”, aria-label=“다음 페이지”와 같은 방식으로 버튼에 접근 가능한 이름을 제공하고 있다.

0. 들어가며 — 250편, 화살표의 이름 붙이기

이번 250편은 이전/다음 버튼을 아이콘으로만 제공할 때 aria-label="이전 페이지"·"다음 페이지" 를 주라는 규칙입니다. 시리즈 250편을 이 규칙으로 맞습니다.

이전(◀)·다음(▶) 버튼을 화살표 아이콘으로만 만들면 — 시각 사용자는 모양으로 ’앞/뒤로 가기’를 알지만, 스크린 리더 사용자에게는 이름이 없는 버튼이 됩니다. 아이콘은 텍스트가 아니라, 스크린 리더가 읽을 게 없죠. CP-130은 이 아이콘 버튼에 “이전 페이지”·“다음 페이지” 이름을 부여합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아이콘 버튼 접근 가능한 이름

CP-130 (컴포넌트 > 페이지네이션) “이전/다음 화면 이동 버튼을 아이콘으로만 제공하는 경우, aria-label="이전 페이지", aria-label="다음 페이지" 와 같은 방식으로 버튼에 접근 가능한 이름을 제공하고 있다.”

이전/다음 버튼이 텍스트 없이 아이콘(◀▶)만으로 돼 있을 때, aria-label로 “이전 페이지”·“다음 페이지” 같은 이름을 부여해 보조기술이 버튼의 기능을 읽게 하라는 뜻입니다.

정리: 아이콘만의 이전/다음 버튼엔 “이전/다음 페이지” 이름을 줘라. 이게 CP-130입니다.

2. 왜 아이콘 버튼에 이름이 필요한가

이것은 ‘아이콘 버튼의 접근 가능한 이름’ 이라는, 웹 접근성에서 매우 흔하고 중요한 주제입니다. 버튼이나 링크에는 ‘접근 가능한 이름(accessible name)’이 있어야 합니다 — 스크린 리더가 그것을 읽어 사용자에게 ’이게 무슨 버튼인지’ 알려주죠. 텍스트 버튼(“이전”)은 그 텍스트가 곧 이름이라 문제없습니다. 하지만 아이콘만의 버튼은 다릅니다.

화살표 아이콘(◀▶)이 어떻게 구현됐든 — 폰트 아이콘, SVG, 배경 이미지, 유니코드 기호 — 그것은 시각적 그래픽 이지 스크린 리더가 읽을 텍스트가 아닙니다. 그래서 이름 없는 아이콘 버튼을 스크린 리더가 만나면:

“버튼” 또는 “링크”라고만 읽고 무슨 버튼인지 안 알려주거나,

최악의 경우 파일명(“arrow-left.svg”)이나 빈 내용을 읽거나,

아예 건너뛰어, 사용자는 그 버튼이 있는지도 모릅니다.

결과적으로 비시각 사용자는 ‘이전/다음 페이지로 가는’ 핵심 기능을 쓸 수 없죠. 페이지네이션에서 이전/다음은 가장 빈번히 쓰는 이동 수단(CP-114)인데, 그게 막히는 겁니다.

그래서 CP-130은 아이콘 버튼에 aria-label로 명시적 이름을 줍니다 — aria-label="이전 페이지", "다음 페이지". 그러면 스크린 리더가 “이전 페이지, 버튼”, “다음 페이지, 버튼”으로 읽어, 사용자가 기능을 정확히 알고 씁니다.

’아이콘으로만’이라는 조건. 규칙은 ’아이콘으로만 제공하는 경우’라 한정합니다. 만약 버튼에 텍스트(“이전”)가 함께 있으면 그 텍스트가 이름이 되어 별도 aria-label이 불필요할 수 있죠. 문제는 텍스트 없이 아이콘만 있을 때입니다. 이때 이름을 주는 방법은 — aria-label(권장), 또는 시각적으로 숨긴 텍스트(<span class="sr-only"> 이전 페이지</span>), 또는 title(보조)입니다.

아이콘 자체는 보조기술에서 숨기기. 버튼에 aria-label로 이름을 줬다면, 안의 장식 아이콘은 aria-hidden= "true"로 처리해 스크린 리더가 중복하거나 엉뚱하게 읽지 않게 하는 것이 좋습니다(브레드크럼 구분자 CP-088, 사이드 메뉴 처리와 같은 정신).

이 규칙은 페이지네이션 ’이름 묶음’을 완성합니다 — CP-128(숫자 “페이지 N”), CP-129(마지막 “마지막 페이지, N”), CP-130(아이콘 이전/다음 “이전/다음 페이지”). 텍스트가 있는 요소든 아이콘만의 요소든, 모든 클릭 대상이 스크린 리더에 명확한 이름으로 전달되게 하죠. 첫/마지막 점프 버튼도 아이콘(⏮⏭)이면 같은 방식으로 “첫 페이지로”· “마지막 페이지로” 이름을 줍니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 버튼 이름 — 아이콘만의 이전/다음 버튼에 “이전/다음 페이지” 이름이 있는가.

낭독 확인 — 스크린 리더가 “이전 페이지, 버튼”으로 읽는가(빈 버튼·파일명 아님).

아이콘 숨김 — 장식 아이콘이 aria-hidden으로 처리됐는가.

개선 방향

<a href="?page=2" aria-label="이전 페이지"><svg aria-hidden="true">…◀…</svg></a> <a href="?page=4" aria-label="다음 페이지"><svg aria-hidden="true">…▶…</svg></a>

첫/마지막 아이콘 버튼도 “첫 페이지로”·“마지막 페이지로” 이름 부여.

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

역할	책임
퍼블리셔/개발	아이콘 버튼 aria-label·아이콘 aria-hidden 처리
접근성 담당	버튼 이름 낭독 검증

기관 유형	CP-130 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아이콘 이전/다음 버튼 사용 시)

화살표 아이콘으로 이전/다음을 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘만의 이전/다음 버튼에 “이전/다음 페이지” 이름이 있나요?

□ 스크린 리더가 “이전 페이지, 버튼”으로 읽나요(빈 버튼·파일명 아님)?

□ 장식 아이콘이 aria-hidden으로 처리됐나요?

❓ FAQ

Q1. 화살표 아이콘이면 누구나 알지 않나요? 시각 사용자는 모양으로 알지만, 스크린 리더는 아이콘을 못 읽어 이름이 없습니다. aria-label이 필요합니다. Q2. 버튼에 텍스트도 있으면요? 텍스트가 이름이 되어 별도 aria-label이 불필요할 수 있습니다. ’아이콘 으로만’일 때가 문제입니다. Q3. 첫/마지막 아이콘 버튼은요? 같은 방식으로 “첫 페이지로”·“마지막 페이지로” 이름을 줍니다.

6. 마무리

CP-130의 메시지:

화살표만 있으면 이름이 없다 — 아이콘 이전/다음 버튼에 “이전/다음 페이지” 이름을 줘라.

아이콘은 시각 그래픽이지 스크린 리더가 읽을 텍스트가 아닙니다. 이름 없는 아이콘 버튼은 비시각 사용자에게 ‘무슨 버튼인지 모를’ 함정이 되죠. aria-label로 “이전/다음 페이지” 이름을 주고 장식 아이콘은 숨깁니다. CP-128·129·130이 페이지네이션 이름 묶음을 완성합니다. 다음 편은 구성 요소의 크기와 영역 구분입니다.

다음 편 예고 ▶ 「251. (CP-131) 구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 적절한 크기로 표현하고 영역 간 구분을 제공하고 있다.」

ViewCheck는 아이콘만의 이전/다음 버튼에 접근 가능한 이름이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 페이지네이션(Pagination) 가이드 — https://www.krds.go.kr/html/site/component/component_10.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컴포넌트,웹표준