안 보이는 슬라이드엔 초점도 없게

KRDS CP-225 — 키보드와 스크린 리더는 기본 항목에만 접근하도록 하고 있다.

0. 들어가며 — 숨은 슬라이드 속에 갇히지 않게

이번 345편은 키보드와 스크린 리더가 기본(현재 보이는) 항목에만 접근하게 하라는 규칙입니다.

캐러셀은 여러 슬라이드 중 하나만 화면에 보이고 나머지는 숨어 있습니다. 그런데 이 숨은 슬라이드의 콘텐츠(링크· 버튼·텍스트)에 키보드 초점이 가거나 스크린 리더가 읽으면 — 사용자는 ‘안 보이는 곳’에 갇히죠. CP-225는 보이는 기본 항목에만 접근하게 하라고 규정합니다. 사이드 메뉴 CP-105의 ’숨긴 것은 접근 제외’ 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 기본 항목만 접근

CP-225 (컴포넌트 > 캐러셀) “키보드와 스크린 리더는 기본 항목에만 접근하도록 하고 있다.”

캐러셀에서 현재 화면에 보이는 슬라이드(기본 항목)의 콘텐츠에만 키보드 초점·스크린 리더가 접근하고, 숨겨진 (화면 밖) 슬라이드에는 접근하지 않게 하라는 뜻입니다.

정리: 숨은 슬라이드엔 키보드·스크린 리더 접근을 막고, 보이는 항목만 접근하게 하라. 이게 CP-225입니다.

2. 왜 기본 항목만 접근해야 하나

캐러셀의 핵심 구조는 — ’여러 슬라이드 중 하나만 보이고 나머지는 숨김’입니다. 화면에는 현재 슬라이드만 보이고, 이전·다음 슬라이드들은 화면 밖이나 가려진 상태죠. 시각 사용자는 보이는 슬라이드만 인지합니다. 그런데 숨은 슬라이드가 코드상 살아 있고 접근 가능하면, 키보드·스크린 리더 사용자에게 문제가 생깁니다.

숨은 슬라이드가 접근 가능할 때:

키보드 함정 캐러셀에 슬라이드마다 링크·버튼·CTA가 있다면, Tab으로 이동할 때 보이는 슬라이드의 링크 뿐 아니라 숨은 슬라이드의 링크들에도 초점이 들어갑니다. 사용자는 Tab을 눌렀는데 초점이 ‘화면에 안 보이는’ 곳(숨은 슬라이드)으로 사라지죠. 화면엔 변화가 없는데 초점만 보이지 않는 곳에 가, 완전히 길을 잃습니다. 슬라이드 5개에 각 3개 링크면 숨은 12개 링크에 다 초점이 가는 혼란이죠.

스크린 리더 혼란 — 스크린 리더가 보이는 슬라이드뿐 아니라 숨은 슬라이드들까지 다 읽으면 — 사용자는 ‘화면엔 하나만 보인다는데 왜 이렇게 많은 내용이 들리지?’ 헷갈립니다. 현재 슬라이드와 숨은 슬라이드 콘텐츠가 뒤섞여 들리죠.

그래서 CP-225는 — 현재 보이는 기본 항목에만 키보드·스크린 리더가 접근하고, 숨은 슬라이드는 접근에서 제외하라고 합니다. 그러면 — 키보드 사용자는 보이는 슬라이드의 링크만 거치고, 스크린 리더는 보이는 슬라이드만 읽죠. 화면에 보이는 것 = 키보드·스크린 리더가 접근하는 것이 일치합니다.

구현:

숨은 슬라이드 비활성화 — 화면 밖 슬라이드를 display:none/visibility:hidden으로 숨기면 그 안 요소도 키보드·스크린 리더에서 제외됩니다. 또는 aria-hidden="true" + 내부 포커스 요소에 tabindex="-1"(또는 inert 속성)로 접근을 막죠(사이드 메뉴 CP-105의 일관 숨김 정신).

슬라이드 전환 시 갱신 — 슬라이드가 바뀌면, 새로 보이는 슬라이드는 접근 가능하게·이전 슬라이드는 접근 제외로 동적 갱신해야 합니다. 항상 ‘현재 보이는 것만’ 접근 가능하게요.

inert 속성 — 현대적 방법으로, 숨은 슬라이드 컨테이너에 inert를 주면 그 안 모든 요소가 키보드·포인터· 보조기술에서 제외됩니다. 깔끔하죠.

이 규칙의 난이도가 높은(★★★★) 이유는 — 슬라이드 전환(수동·자동·스와이프)마다 접근성 상태를 정확히 갱신해야 하고, 동적 상태 관리가 까다롭기 때문입니다(모달 초점 관리 CP-182, 달력 CP-166·167과 같은 동적 접근성 난이도).

이 규칙은 CP-224(전 기능 키보드 실행)와 짝입니다 — 캐러셀 기능은 키보드로 다 되게 하되(224), 접근 범위는 보이는 항목으로 한정(225). 함께 키보드·스크린 리더 사용자가 캐러셀을 ‘보이는 대로’ 온전히 쓰게 하죠. ’보이는 것 = 접근하는 것’이라는 일관성이 핵심입니다.

정리하면 — 캐러셀은 한 슬라이드만 보이므로, 키보드·스크린 리더가 숨은 슬라이드에 접근해 길을 잃지 않게, 현재 보이는 기본 항목에만 접근하게 하고 전환 시 동적으로 갱신해야 합니다.

3. 점검 / 개선

무엇을 점검하나

숨은 슬라이드 제외 — 숨은 슬라이드의 링크·요소에 키보드 초점이 가지 않는가.

스크린 리더 제외 — 스크린 리더가 보이는 슬라이드만 읽는가(숨은 것 미낭독).

전환 갱신 — 슬라이드 전환 시 접근 가능 범위가 현재 항목으로 갱신되는가.

개선 방향

숨은 슬라이드에 inert(또는 aria-hidden+tabindex="-1"·display:none) 적용.

슬라이드 전환마다 접근성 상태 동적 갱신(현재만 접근 가능).

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

역할	책임
퍼블리셔/개발	숨은 슬라이드 접근 제외·전환 시 갱신 구현
접근성 담당	보이는 항목만 접근하는지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 숨은 슬라이드의 링크·요소에 키보드 초점이 가지 않나요?

□ 스크린 리더가 보이는 슬라이드만 읽나요(숨은 것 미낭독)?

□ 슬라이드 전환 시 접근 가능 범위가 현재 항목으로 갱신되나요?

❓ FAQ

Q1. 숨은 슬라이드에 초점이 가면 뭐가 문제죠? 키보드 사용자가 화면에 안 보이는 곳으로 초점이 사라져 길을 잃습니다. 스크린 리더는 숨은 내용까지 읽어 혼란스럽죠. Q2. 어떻게 막나요? 숨은 슬라이드에 inert나 aria-hidden+tabindex="-1"·display:none을 적용합니다. Q3. 전환할 때마다 갱신해야 하나요? 네. 항상 ‘현재 보이는 것만’ 접근 가능하게 동적으로 갱신해야 합니다.

6. 마무리

CP-225의 메시지:

안 보이는 슬라이드엔 초점도 없게 — 기본(보이는) 항목에만 접근하게 하라.

캐러셀은 한 슬라이드만 보이는데, 숨은 슬라이드가 접근 가능하면 키보드 사용자가 길을 잃고 스크린 리더가 숨은 내용까지 읽죠. inert 등으로 숨은 슬라이드를 접근에서 제외하고, 전환마다 갱신해 ’보이는 것 = 접근하는 것’을 일치시킵니다. 다음 편은 캐러셀 그룹의 마지막 — 텍스트 이미지 금지입니다.

다음 편 예고 ▶ 「346. (CP-226) 슬라이드에 텍스트가 포함된 이미지를 사용하지 않고 있다.」

ViewCheck는 캐러셀에서 키보드·스크린 리더가 기본 항목에만 접근하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

WAI-ARIA APG — Carousel Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

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

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