웹 접근성의 핵심 요소 중 하나는 모든 사용자가 마우스 없이도 키보드만으로 웹사이트를 자유롭게 탐색할 수 있는 기능을 제공하는 것입니다. 키보드 네비게이션은 특히 시각 장애가 있거나, 마우스를 사용할 수 없는 사용자를 위한 접근성의 중요한 부분입니다. 이번 글에서는 키보드 인터랙션을 고려한 웹사이트 내비게이션 기능을 구현하는 방법에 대해 알아보겠습니다.
1. 키보드 네비게이션의 중요성
키보드 인터랙션을 고려한 접근성 기능을 추가하면 다양한 사용자에게 편리한 환경을 제공할 수 있습니다. 특히 웹 표준과 접근성 가이드라인(WCAG)을 준수하는 것은 사용자 경험을 개선하고, 구글 애드센스의 승인을 받는 데도 긍정적인 영향을 미칩니다. 기본적으로 사용자는 Tab, Enter, Space 키를 사용하여 사이트의 주요 요소를 탐색하게 됩니다.
2. 키보드 네비게이션의 기본 요소
(1) Tab 키를 이용한 포커스 이동
Tab키를 누르면 페이지 내에서 포커스를 이동할 수 있는 요소들이 순서대로 선택됩니다.- 웹사이트에서
a,button,input과 같은 상호작용 가능한 요소는 자동으로Tab순서에 포함됩니다. 그러나 이를 최적화하고 사용자 경험을 개선하기 위해 몇 가지 추가 작업이 필요합니다.
(2) Enter와 Space 키를 통한 상호작용
Enter키는 링크와 버튼 요소를 활성화하는 데 기본적으로 사용됩니다.Space키는 체크박스, 라디오 버튼 등을 선택하는 데 사용됩니다.- 이러한 기본 동작을 지원하지 않는 요소가 있다면,
keydown이벤트 핸들러를 통해 해당 기능을 추가할 수 있습니다.
3. 접근성을 높이기 위한 키보드 네비게이션 구현 방법
(1) 포커스 가능한 요소에 tabindex 속성 추가
tabindex 속성은 요소가 Tab 키로 포커스될 수 있도록 지정하는 속성입니다. 기본적으로 포커스가 불가능한 요소에도 tabindex를 추가하면 키보드 탐색이 가능해집니다.
tabindex="0": 요소가 문서의 포커스 순서에 따라 자연스럽게 포함됩니다.tabindex="-1":Tab키로는 포커스되지 않지만, 스크립트로 포커스를 설정할 수 있습니다.
<div tabindex="0">이 요소는 키보드로 포커스 가능합니다.</div>
(2) 시각적 포커스 스타일 추가
키보드 탐색 시 포커스된 요소가 명확히 보이도록 시각적 스타일을 적용하는 것이 중요합니다. 기본적으로 브라우저는 포커스된 요소에 점선이나 테두리 스타일을 적용하지만, 사용자 경험을 개선하기 위해 커스텀 스타일을 추가할 수 있습니다.
button:focus,
a:focus {
outline: 2px solid #0078d4; /* 시각적 포커스 색상 */
outline-offset: 4px;
}
(3) 스킵 네비게이션 링크 추가
페이지 상단에 “본문으로 이동” 링크를 추가하면, 키보드만으로 웹사이트를 탐색하는 사용자가 상단 메뉴를 건너뛰고 본문으로 바로 이동할 수 있습니다. 이는 페이지 구조가 복잡할 때 특히 유용합니다.
<a href="#main-content" class="skip-link">본문으로 이동</a> <main id="main-content"> <!-- 메인 콘텐츠 --> </main>
(4) ARIA 속성을 활용하여 상호작용 요소 설명 추가
ARIA 속성(Accessible Rich Internet Applications)은 화면 읽기 도구가 요소를 더 잘 인식하도록 돕는 속성입니다. 특히, 복잡한 UI 요소나 상태 정보를 전달할 때 유용합니다.
aria-label: 특정 요소에 텍스트 라벨을 추가하여 설명할 때 사용합니다.aria-expanded: 버튼 클릭 시 확장 여부를 설명합니다.aria-controls: 해당 요소가 제어하는 대상 요소를 지정합니다.
예시:
<button aria-expanded="false" aria-controls="dropdown-menu">메뉴 열기</button> <div id="dropdown-menu" hidden>내용...</div>
4. 자바스크립트를 통한 키보드 인터랙션 개선
(1) 키보드 이벤트 핸들러 추가하기
자바스크립트를 사용하여 특정 키보드 입력에 대한 이벤트 핸들러를 구현할 수 있습니다. 예를 들어, Enter나 Space 키로 드롭다운 메뉴를 여닫도록 설정할 수 있습니다.
document.querySelector('.dropdown-toggle').addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
toggleDropdown();
}
});
(2) focus()와 blur() 메서드를 사용한 포커스 제어
드롭다운 메뉴를 열었을 때, 첫 번째 항목으로 자동 포커스되도록 하여 접근성을 높일 수 있습니다.
function openDropdown() {
document.querySelector('#dropdown-menu').hidden = false;
document.querySelector('#dropdown-menu a').focus(); // 첫 번째 링크에 포커스
}
(3) aria-expanded 속성 동적 업데이트
자바스크립트를 사용하여 드롭다운이나 아코디언 메뉴의 상태를 업데이트하면, 사용자가 메뉴의 현재 상태를 쉽게 알 수 있습니다.
const toggleButton = document.querySelector('.dropdown-toggle');
toggleButton.addEventListener('click', function() {
const expanded = toggleButton.getAttribute('aria-expanded') === 'true';
toggleButton.setAttribute('aria-expanded', !expanded);
});
5. 웹 접근성 테스트 방법
웹 접근성 기능을 테스트하기 위해 다음과 같은 방법을 사용할 수 있습니다.
- 키보드만으로 웹사이트 탐색:
Tab키로 모든 주요 요소를 순서대로 탐색하고,Enter,Space키로 상호작용할 수 있는지 확인합니다. - 스크린 리더: NVDA, JAWS 등의 스크린 리더를 사용하여 ARIA 속성과 설명이 정확히 전달되는지 테스트합니다.
- Lighthouse: 크롬 개발자 도구의 Lighthouse를 통해 접근성 점수를 확인하고, 개선점을 찾을 수 있습니다.
웹 접근성을 고려한 키보드 인터랙션 기능을 구현하면, 웹사이트가 더 많은 사용자에게 접근 가능해집니다. 특히 키보드 네비게이션은 시각 장애가 있는 사용자와 키보드 의존 사용자에게 필수적인 요소입니다. 이번 글에서 소개한 키보드 네비게이션 구현 방법과 ARIA 속성, 자바스크립트를 활용한 동적 상호작용 개선 방법을 통해 웹사이트의 접근성과 사용자 경험을 모두 개선할 수 있습니다.
