WAI-ARIA UI - 아코디언 메뉴

널리에서 올려준 아코디언 메뉴 사용시 aria 쓰임 정리

페이지 이동이 아닌, 아코디언 헤더부분을 클릭 하면 내용을 보여주는가 안보여주는가이기 때문에

a 태그보단 button 태그를 추천한다. 아래와 같이 작성한다.

 

1. button을 쓸 경우

<button id="top1" type="button" aria-expanded="false"></button>  

• 각 아코디언의 타이틀부분의 헤더와 내용부분에 id값 부여.
• aria-expanded 값은 열렸을 경우 true, 닫혔을경우 false

 

2. a를 쓸 경우

<a herf="#" role="button"></a>

• 페이지이동이 아닌 버튼으로 인식되기 위해 role 부여.
• js로 스페이스 키를 통한 컨텐츠영역 확장/축소 가능하게 할 것.

 

 

 

 

그 외의 공통 정리 부분.

아코디언의 헤더

• 헤딩태그를 사용 할 것
• 헤딩태그를 사용 못할 경우 button에 role="heading" aria-level="3"의 속성을 사용.

 

아코디언의 컨텐츠

• aria-labelledby="해당헤더id값" 부여.

 

아코디언 헤더 확장시(오픈시)

button(또는 a태그)에 aria-controls 속성 추가.

<button type="button" aria-controls="콘텐츠영역의id값"> </button>  

 

아코디언이 확장 된 후 닫히지 않거나, 열릴 수 없는 구조 시

아코디언 헤더에 aria-disabled 속성 부여.

<button type="button" aria-disabled="true"></button>  

true or false 로 구분.

 

아코디언 컨텐츠가 동시 확장시.

확장된 모든 컨텐츠에 role="region" 추가.

<div id="컨텐츠id값" role="region">   
</div>

 

 

예외 사항.

ARIA 가 특정 html과 충돌하는 경우

dl dt dd 의 태그로 아코디언 구성시, role 속성과 의미가 충돌된다. 그러므로 dt 와 같은 태그에 role="presentation"로 태그의 의미를 인식되지 않도록 한다.

<dt role="presentation">  </dt>

 

더 자세한 사항은 아래에서 도움받으실 수 있습니다.
http://nuli.navercorp.com/sharing/blog/post/1132889

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

 

 

 

*댓글은 힘이 되어요!