WAI-ARIA 바르게 사용하기 2부 - Accordion
안녕하세요. 엔비전스입니다.
‘WAI-ARIA 바르게
사용하기 1부’에서는 탭컨트롤에 대해 함께 살펴보았습니다. 이번 아티클에서는 아코디언(Accordion) 콘텐츠에 ARIA 적용하는 방법에 대해 함께 살펴보도록 하겠습니다.
아코디언(Accordion) 콘텐츠란 확장/축소를 토글할 수 있는 여러 개의 요소가 하나의 그룹으로 묶여 있는 영역을 말합니다. 자주 묻는 질문과 같은 도움말 페이지에서 페이지에 따라 다를 수 있겠으나 각각의 질문 요소들이 토글 버튼으로
확장/축소할 수 있고 이에 따라 그 질문에 대한 본문 콘텐츠가 나타나거나 숨겨지는 것이 한 예입니다. 각각의 토글할 수 있는 객체를 아코디언 헤더, 그 버튼과 관련된
콘텐츠 영역을 아코디언 패널이라고 합니다.
한 페이지에 콘텐츠 양이 많을 때 모든 콘텐츠를 다 펼쳐 놓기보다 여러 버튼을 두어 사용자의 선택에 따라 확장/축소가 가능하도록 하면 페이지 콘텐츠 이용이 더 용이할 수 있습니다.
그러나 스크린리더 사용자는 아코디언 요소가 확장/축소될 때 페이지
경로가 변경되지는 않기에 레이아웃 파악에 혼란을 겪게 됩니다. 페이지 전체가 새로 로딩되는 경우 스크린리더에서
페이지가 변경되었음을 다양한 방법으로 정보를 제공하지만, 페이지의 일부 콘텐츠가 변경된 경우 접근성에
관한 마크업을 하지 않는 이상 스크린리더 사용자는 부분적인 콘텐츠 변경 사실을 알 수 없습니다. 따라서
아코디언 콘텐츠를 구상할 때는 다음에 유의해야 합니다.
적절한
ARIA 사용
1.
각각의 아코디언 헤더 및 패널에는 각각 고유 id를
부여합니다. 예: <button id=”ah1”>
2.
각각의 아코디언 헤더에는 aria-expanded
true 혹은 false 속성을 상황에 맞게 부여합니다.
아코디언 패널이 표시되는 경우는 true로, 숨겨지는
경우는 false로 표시합니다. 예: <button aria-expanded=”true”> (아코디언
패널이 확장된 경우)
3.
각각의 아코디언 헤더는 아코디언 패널을 보여주거나 숨기는,
액션을 취하는 역할을 하므로 버튼 태그를 사용해야 합니다. 만약 <a href=”#” 등으로 마크업되어 있는
경우 role=”button”을 적용하여 스크린리더에서 버튼으로 인식되도록 하고 스크립트로 space keycode를 추가하여 스페이스
키 또한 확장/축소할 수 있는 키로 인식되도록 합니다. 기본적으로
<a href=”#” 적용시에는 브라우저 API에서 엔터키로만 액션이 동작하도록 지원하기 때문입니다.
4.
각각의 아코디언 헤더는 패널 콘텐츠를 포함하고 있으므로 문서 구조상 제목에 해당합니다. 따라서 <h2>와 같은 헤딩 태그를 추가합니다. 헤딩 레벨은 콘텐츠의 논리적 의미에 맞게 추가하면 됩니다. 만약
헤딩 태그를 사용할 수 없을 때는 role=”heading”과 aria-level 속성을 사용할 수 있습니다. 예: <button role=”heading” aria-level=”3”>
5.
아코디언 헤더가 확장되는 경우에는 aria-controls=”id” 속성을 추가합니다. Aria-controls는 컨트롤과 관련이 있는 콘텐츠를 하나로 연결하여 해당 속성을 지원하는 스크린리더에서는
특정 단축키를 눌러 콘텐츠로 바로 이동할 수 있도록 도와주는 역할을 합니다. 예: <button aria-controls=”ac1”> (아코디언
콘텐츠 id를 ah1로 가정함).
6.
페이지 특성에 따라 특정 아코디언 헤더를 확장했을 때 다시 축소할 수 없는 경우에는 aria-disabled true 속성을 추가하여 확장 혹은 축소할 수 없음을 알려줍니다.
7.
상황에 따라 여러 아코디언 헤더가 동시에 확장되면 확장된 모든 패널에 role=”region” 속성을 추가합니다. 예: <div role=”region” aria-labelledby=”ah1”> (aria-labelledby에 연결된 아코디언 헤더 id 연결).
참고: ARIA role이 특정
html과 충돌하는
경우
Role=”heading”, role=”region”과 같은 콘텐츠는 기존 마크업된 html 특성에 따라 특정 태그와
충돌할 수 있습니다. 예를 들어 기존 html에서 <dl> <dd> <dt> 등의 태그를 사용하여 아코디언 헤더 및 패널을 구성한
경우 여기에 heading, region과 같은 role을
적용하면 서로 다른 의미의 언어가 충돌하게 됩니다. 따라서 이러한 경우 <dl> <dt> 등의 태그를 role로 대체하는
것이므로 role=”presentation” 속성을 사용하여 해당 태그가
스크린리더에서 인식되지 않도록 해야 합니다. 예: <dt
role=”presentation”>
지금까지 열거한 내용들은 샘플 페이지를 통하여 테스트가 가능합니다.