WAI-ARIA 요소 - Accordion

아코디언(Accordion) 컨텐츠란 확장/축소를 토글할 수 있는 여러 개의 요소가 하나의 그룹으로 묶여 있는 영역을 말한다.

자주 묻는 질문과 같은 도움말 페이지에서 페이이지에 따라 다를 수 있겠으나, 각각의 질문 요소들이 토글 버튼으로 확장/축소 할 수 있고 이에 따라 그 질문에 대한 본문 컨텐츠가 나타나거나 숨겨지는 것이 한 예이다. 각각의 토글할 수 있는 객체를 아코디언 헤더, 그 버튼과 관련된 컨텐츠 영역을 아코디언 패널이라고 한다.

 

한 페이지에 컨텐츠 양이 많을 때 모든 컨텐츠를 다 펼쳐 놓기보다 여러 버튼을 두어 사용자의 선택에 따라 확장/축소가 가능하도록 하면 페이지 컨텐츠 이용이 더 용이할 수 있다.

 

그러나 스크린리더 사용자는 아코디언 요소가 확장/축소될 때 페이지 경로가 변경되지 않기에 레이아웃 파악에 혼란을 겪게 된다. 페이지 전체가 새로 로딩되는 경우 스크린리더에서 페이지가 변경되었음을 다양한 방법으로 정보 제공하지만, 페이지의 일부 컨텐츠가 변경된 경우 접근성에 관한 마크업을 하지 않는 이상 스크린리더 사용자는 부분적인 컨텐츠 변경 사실을 알 수 없다. 따라서 아코디언 컨텐츠를 구상할 때는 다음에 유의해야 합니다.

 

 

적절한 ARIA 사용

• 각각의 아코디언 헤더 및 패널에는 각각 고유  id를 부여합니다. 예 <button id="ah1">
• 각각의 아코디언 헤더에는 aria-expanded="true" 혹은 false 속성을 상황에 맞게 부여합니다. 아코디언 패널이 표시되는 경우는 true로, 숨겨지는 경우는 false로 표시합니다. 예: <button aria-expanded="true"> (아코디언 패널이 확장된 경우)
• 각각의 아코디언 헤더는 아코디언 패널을 보여주거나 숨기는, 액션을 취하는 역할을 하므로 버튼 태그를 사용해야 합니다. 만약 <a href="#" 등으로 마크업되어 있는 경우 role="button"을 적용하여 스크린리더에서 버튼으로 인식되도록 하고 스크립트로  space keycode를 추가하여 스페이스 키 또한 확장/축소 할 수 있는 키로 인식되도록 합니다. 기본적으로 <a href="#" 적용시에는 브라우저 API 에서 엔터키로만 액션이 동작하도록 지원하기 때문입니다.
• 각각이 아코디언 헤더는 패널 콘텐츠를 포함하고 있으므로 문서 구조상 제목에 해당합니다. 따라서 <h2>와 같은 헤딩 태그를 추가합니다. 헤딩 레벨은 콘텐츠의 논리적 의미에 맞게 추가하면 됩니다. 만약 헤딩 태그를 사용할 수 없을 때는 role="heading"과 aria-level 속성을 사용할 수 있습니다.
  예: <button role="heading" aria-lebel="3">
• 아코디언 헤더가 확장되는 경우에는 aria-controls="id" 속성을 추가합니다. aria-controls는 컨트롤과 관련이 있는 컨텐츠를 하나로 연결하여 해당 속성을 지원하는 스크린리더에서는 특정 단축키를 눌러 컨텐츠로 바로 이동할 수 있도록 도와주는 역할을 합니다.
  예: <button aria-controls="ac1"> (아코디언 콘텐츠 id를 ah1로 가정함)
• 페이지 특성에 따라 특정 아코디언 헤더를 확장했을 때 다시 축소할 수 없는 경우에는 aria-disabled="true" 속성을 추가하여 확장 혹은 축소할 수 없음을 알려줍니다.
• 상황에 따라 여러 아코디언 헤더가 동시에 확장되면 확장된 모든 패널에 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">

 

 

샘플페이지

https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion.html

Accordion Example

 

참고:)

https://nuli.navercorp.com/community/article/1132889

WAI-ARIA 바르게 사용하기 2부 - Accordion