CSS 캐러셀 키보드 탐색, tabs와 links는 어떻게 다를까?
캐러셀 아래 점을 Tab으로 하나씩 다 지나야 다음 링크에 닿는다. Chrome 154의 scroll-marker-group에서 tabs와 links 중 무엇을 골라야 키보드 이동이 자연스러울까?
- Chrome 154는 scroll-marker-group에 tabs와 links 모드를 추가했다.
- tabs는 슬라이드 선택기, links는 콘텐츠로 이동하는 링크 목록에 맞는 동작을 제공한다.
- before와 after는 그룹의 위치·탐색 순서이며, 키보드 모드를 대신하지 않는다.
표시점을 하나씩 방문할지, 선택기로 묶을지 고른다
CSS 캐러셀의 표시점이 모두 Tab 키에 걸린다면 scroll-marker-group의 모드를 확인할 필요가 있다. Chrome 154에서 추가한 두 모드 중 기본값은 links다. 슬라이드 번호를 탭처럼 고르고 싶다면 tabs를 명시한다.
| 선택 | 키보드 동작 | 접근성 역할 |
|---|---|---|
| links | 각 표시점을 Tab으로 방문한다. | 그룹은 navigation, 표시점은 link다. |
| tabs | 활성 표시점으로 진입한 뒤 화살표로 다른 표시점을 고른다. | 그룹은 tablist, 표시점은 tab, 연결된 콘텐츠는 tabpanel이다. |
CSS Overflow 5 편집 초안은 tabs에서 비활성 패널의 콘텐츠를 접근성 트리에서도 숨기도록 정한다. 단순히 Tab을 덜 누르게 하는 옵션이 아니라, 콘텐츠를 탭 패널로 탐색하게 하는 선택이다. 여러 본문 구간을 계속 읽으면서 이동하는 목차에는 링크 방식이 더 자연스럽다.
같은 위치에서도 두 모드를 다르게 쓸 수 있다
표시점 그룹을 콘텐츠 뒤에 놓는 선언은 그대로 두고 모드만 바꿀 수 있다. 다음은 이미 가로 스크롤과 슬라이드 배치를 구현한 컨테이너에 적용하는 핵심 선언이다.
/* 슬라이드 선택기 */
.slides { scroll-marker-group: after tabs; }
/* 각 콘텐츠로 이동하는 링크 목록 */
.sections { scroll-marker-group: after links; }구현자 Robert Flack의 데모에서 링크 모드는 Enter로 해당 구간으로 이동하고, 이후 Tab 탐색도 그 콘텐츠를 기준으로 이어진다. 화살표는 마커 사이를 고르는 키가 아니라 평소처럼 페이지를 스크롤한다. 탭 모드에서는 화살표로 표시점과 슬라이드를 전환한다.
before와 after는 그룹을 콘텐츠 앞뒤 어디에 두는지 정한다. 화면에서는 위에 보이는데 키보드로는 콘텐츠를 지난 뒤에 도착하는 식으로 어긋나지 않도록, 시각적 배치와 탐색 순서를 함께 맞춰야 한다.
모드 선언과 표시점 생성은 별도다
scroll-marker-group을 지정하는 것만으로 슬라이드 이름까지 생기지는 않는다. ::scroll-marker에는 none이 아닌 content가 필요하다. 예를 들어 각 슬라이드에 data-label="제품 사진 1"처럼 의미 있는 이름을 두고 이를 표시할 수 있다.
.slide::scroll-marker {
content: attr(data-label);
}
.slide::scroll-marker:target-current {
font-weight: bold;
}
.slide::scroll-marker:focus-visible {
outline: 2px solid currentColor;
}현재 슬라이드를 나타내는 상태와 키보드 초점을 나타내는 상태는 따로 표현한다. 점 모양으로만 꾸미더라도 사용자가 어느 슬라이드로 이동하는지 알아볼 이름이 필요하다. 이 코드는 마커 부분의 예이며 전체 캐러셀 레이아웃이나 자동 재생을 구현하지 않는다.
지원 확인 뒤에는 실제 탐색 순서를 본다
CSS.supports()에는 속성명과 사용할 값을 함께 넘길 수 있다. CSS.supports('scroll-marker-group', 'after tabs')로 모드 선언 지원을 확인하고, 미지원 환경에서도 콘텐츠를 읽을 수 있는 기본 목록이나 기존 탐색 수단을 유지하는 편이 좋다.
지원 결과가 참이어도 접근성 검사가 끝난 것은 아니다. Tab·Shift+Tab으로 그룹에 들어가고 나오는 순서, 화살표로 선택한 뒤 콘텐츠 링크에 도달하는지, 표시점 이름이 전달되는지를 확인해야 한다. 자동 재생을 추가한다면 WAI 캐러셀 패턴이 요구하는 정지·재시작 컨트롤과 포커스 진입 시 정지 동작도 필요하다. 먼저 콘텐츠가 목차인지 슬라이드 선택기인지 결정하면 모드를 고를 기준이 분명해진다.