🎄 A11y Advent Calendar (번역) 6일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)
오늘은 종종 간과되지만 중요한 기능인, 사이트의 주요 콘텐츠 영역으로 바로 이동할 수 있는 ‘Skip-to-Content’ 또는 ‘Skip-Navigation’ 링크에 대해 이야기해보겠습니다.
하이퍼링크를 사용하는 기존 웹사이트에서는 링크를 클릭할 때 페이지가 완전히 새로고침되며 초점이 페이지 상단으로 이동합니다. 키보드로 탐색하는 경우, 메인 콘텐츠에 도달하려면 헤더, 내비게이션 바, 사이드바 등을 일일이 탭으로 건너뛰어야 합니다. 이는 사용자 경험 측면에서 바람직하지 않습니다.
Single Page Application(SPA)도 이 문제에서 완전히 자유롭지 않습니다. 링크를 따라가면 콘텐츠 영역이 다시 로드되면서 현재 초점이 사라지고 문서 상단으로 이동하는 일이 자주 발생합니다. 결국, 전통적인 웹사이트든 SPA든 모두 동일한 문제를 안고 있다고 볼 수 있습니다.
이 문제를 해결하기 위한 대표적인 디자인 패턴 중 하나는 ‘Skip 링크’를 구현하는 것입니다. Skip 링크는 메인 콘텐츠 영역으로 바로 이동할 수 있도록 돕는 <a /> 링크입니다. 그렇다면, Skip 링크는 어떤 방식으로 작동해야 효과적일까요?
- Skip 링크는 페이지 상단에 위치하는 것이 가장 이상적이며, 초점을 가장 먼저 받을 수 있는 요소로 배치해야 합니다.
- 꼭 첫 번째 요소로 위치할 필요는 없지만, 앞에 초점을 받을 요소가 많아질수록 Skip 링크를 발견하기 어려워져 유용성이 떨어질 수 있습니다.
- 페이지의 주요 콘텐츠 영역으로 이어져야 합니다.
- "탐색 건너뛰기" 또는 "콘텐츠로 건너뛰기"와 같은 명확한 문구를 사용해 시각적·청각적으로 쉽게 인식될 수 있도록 해야 합니다. "건너뛰기"라는 단어를 포함한 직관적인 표현이 가장 효과적입니다.
여기에 HTML 코드가 있습니다.
<body>
<a href="#main" class="sr-only sr-only--focusable">Skip to content</a>
</body>
3일차에서 배운 내용을 사용하여 요소에 초점이 맞춰졌을 때 드러나도록 스타일링을 추가할 수 있습니다.
.sr-only.sr-only--focusable:focus,
.sr-only.sr-only--focusable:active {
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}
이와 관련한 live demo도 있으니 참고해보시면 좋을 것 같습니다!
출처
'웹 접근성' 카테고리의 다른 글
| Day 8) 이미지의 대체 텍스트(alt text) (0) | 2024.12.03 |
|---|---|
| Day 7) SPA와 접근성: 페이지 제목과 포커스 관리하기 (1) | 2024.12.02 |
| Day 5) 적절한 제목 계층 구조로 접근성 높이기 (0) | 2024.11.24 |
| Day 4) 접근성을 고려한 링크 작성법 (0) | 2024.11.20 |
| Day 3) 스크린 리더 사용자만을 위한 컨텐츠 숨기기 (0) | 2024.11.18 |