WAI-ARIA 바르게 사용하기 1부 - tab 컨트롤 활용하기
안녕하세요. 엔비전스입니다.
널리 블로그를 통하여, 웹페이지를 마크업 할 때 의미에 맞는 요소 사용 및 키보드 접근성 구현의 중요성에 대해 몇 차례 다룬 적이 있습니다. 위 내용이 중요한 까닭은 스크린리더 사용자는 포커스 되는 각각의 요소의 이름이나 상태를 통하여 페이지 구조를 파악하고 각 요소에 맞는 키보드 액션을 통해 컨트롤하기 때문입니다. WAI-ARIA 접근성 기술이 보편화되기 시작하면서 이러한 중요성은 더 커지게 되었습니다. 그러나 WAI-ARIA와 HTML 요소를 어떻게 적용해야 하는지, 또 이 요소의 키보드 접근성은 어떻게 구현해야 하는지 등에 대한 국내 자료가 부족한 것이 현실입니다. 따라서 이번 시리즈를 통하여 주요 WAI-ARIA를 탭, 메뉴, 대화상자, 자동완성, 콤보 박스 레이어 팝업, LiveRegion 등 그룹별로 나누어 살펴봄으로써 WAI-ARIA의 바른 사용 방법을 함께 알아보겠습니다.
본 콘텐츠는 개념 설명, 키보드 액션, 사용되는 ARIA 요소, 샘플 페이지(WAI-ARIA 1.1 authoring Practices 콘텐츠를 주로 사용) 순서로 기술할 예정입니다.
ARIA를 이용한 tab 컨트롤 구현하기
tab 이란 주메뉴, 하위 메뉴보다는 작은 개념으로, 한 주제에 대해 여러 개의 세부 섹션을 표현하는 방법 중의 하나입니다. Tab은 3가지의 요소로 나뉩니다.
- Tab list: tab, tab panel을 하나의 그룹으로 묶어 ‘tab list’라고 표현합니다. 만약 같은 페이지에 두 개의 tab 섹션이 있다면 두 개의 tab 리스트가 존재하는 것이 됩니다.
- Tab: tab 리스트의 하위 영역으로 각각의 tab 요소를 일컫습니다. 만약 하나의 tab 리스트에 4개의 선택 가능한 요소가 있다면 4개의 tab이 존재하는 것이 됩니다. Role="tablist", role="tab"을 사용하여 tab 컨트롤을 구현하면 스크린리더가 tab 컨트롤에 접근했을 때 '접근성 블로그 tab, 선택됨, 2/4'와 같이 전체 tab 및 현재 선택된 tab이 몇 번째 tab 인지를 알려주게 됩니다.
- Tab 패널: 각각의 tab 하위 콘텐츠를 가리킵니다. 사용자가 tab 중 하나를 선택할 때마다 관련된 tab 패널은 변경되며 처음 페이지 로딩 시 tab 요소 중 하나는 항상 선택된 상태이므로 하나의 tab 패널 역시 표시된 상태가 됩니다.
키보드 액션
'커스텀 컨트롤에 접근성 적용하기' 블로그에서 살펴본 바와 같이 브라우저는 링크, 버튼과 같은 각각의 태그마다 그 태그에 맞는 키보드 액션을 제공합니다. 그러나 tab은 네이티브 html에 포함되지 않은 컨트롤 요소이므로 키보드 접근성을 스크립트로 구현해 주어야 합니다.
- Tab 요소 사이를 이동할 때는 왼쪽, 오른쪽 화살표를 사용합니다. 각각의 tab이 가로로 나열되어 있을 때는 왼쪽·오른쪽 화살표, 세로로 나열되어 있을 때는 위·아래 화살표 키를 눌러 tab과 tab을 이동하도록 구현합니다. 일반적으로 tab 컨트롤은 왼쪽·오른쪽 화살표를 사용하여 이동하므로 가로로 이동할 때는 문제가 없으나 위·아래 화살표를 이용하는 경우 스크린리더 사용자가 tab 컨트롤이 세로로 되어 있는 것을 인지할 수 없으므로 tablist 요소에 aria-orientation="vertical"을 추가하여 위아래 화살표 키로 이동해야 함을 알려줍니다. Aria-orientation을 지원하는 스크린리더는 위아래 방향키를 이용하여 요소를 이동할 수 있다고 안내합니다. 센스리더를 포함한 스크린리더에서도 키보드의 탭 키를 눌러 tab 리스트로 포커스 된 경우에는 가상 커서가 자동 해제되어 브라우저 혹은 스크립트로 구현된 키보드 액션을 사용 가능하도록 해줍니다.
- Tab 요소가 방향키로 이동되므로 키보드의 탭 키로는 각각의 tab 컨트롤에 포커스 되지 않도록 합니다. Tab 요소에서 키보드 탭 키를 누르면 해당 tab 요소에 해당하는 tab 패널의 첫 번째 포커스 가능한 요소로 포커스 되어야 합니다.
- 키보드의 탭 키를 눌러 tab 컨트롤에 접근한 경우에는 선택된 tab 요소에 포커스 되어야 합니다. 즉, 4개의 tab 중 두 번째 tab이 선택되어 있다면 두 번째 tab 요소로 포커스 되어야 합니다.
- 오른쪽 혹은 왼쪽 방향키를 눌러 tab 컨트롤 사이를 이동할 때 오른쪽 방향키를 눌러 마지막 tab으로 이동한 상태에서 다시 오른쪽 화살표 키를 누르면 첫 번째 tab으로, 왼쪽 화살표를 눌러 첫 번째 tab 컨트롤로 이동한 상태라면 다시 왼쪽 화살표를 눌렀을 때 마지막 tab 컨트롤로 이동하도록 구현합니다. 위아래 방향키 역시 마찬가지입니다.
- home/end: tab 컨트롤의 첫/마지막 요소로 이동합니다.
Tab 컨트롤 실행
Tab 컨트롤 사이를 이동할 경우 일반적으로는 포커스 됨과 동시에 해당 tab 요소가 실행되도록 합니다. 그러나 다음 사항에 유의합니다.
- 각각의 tab 패널이 한 페이지에 다 마크업 되어 있고 display:none, block 등을 통하여 선택된 tab 컨트롤에 따라 tab 패널이 표시되거나 숨겨지는 경우에는 방향키로 tab 요소 간 이동 시에 바로 선택되도록 할 수 있습니다.
- Tab 컨트롤 전환 시에 페이지 콘텐츠가 다른 url로부터 새로 로딩되는 경우에는 tab 컨트롤에 포커스 되어 바로 전환 시에 tab 내비게이션이 느려질 뿐 아니라 페이지가 새로 고침되면서 포커스가 페이지 상단 등으로 이동되는 경우가 있으므로 tab 컨트롤 이동 시에 바로 선택되지 않도록 합니다. 대신 해당 tab 요소는 엔터나 스페이스로 선택 가능하도록 합니다.
Tab 컨트롤에 사용되는 Wai-ARIA 요소들
위에서 설명한 tablist, tabpanel, tab, aria-orientation 속성 외에 다음과 같은 속성이 추가로 필요합니다.
- Aria-selected: 선택된 tab은 스크린리더 사용자에게 선택된 tab 임을 알려주어야 하므로 aria-selected true, false를 사용하여 선택된 tab 요소를 알려줍니다.
- Aria-label: tab 리스트가 어떠한 tab 리스트인지 스크린리더 사용자에게 알려주어야 할 때 사용합니다. 예: 정렬 옵션 tab.
- Aria-controls: aria-controls는 선택한 요소에 영향을 받는 하위 요소가 현재 포커스 한 라인과 떨어져 있을 경우 스크린리더 사용자가 하위 요소가 열린 위치를 파악하기 어려우므로 관련된 하위 요소로 바로 이동할 수 있도록 해 주는 역할을 합니다. Tab 역시 특정 tab을 선택한 경우 tab 패널이 시작되는 부분으로 바로 이동할 수 있도록 aria-controls를 포함할 수 있습니다.