[웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값!

지금... 난 1년차이지만 언제나 루키같은 마음이다!

최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 

토글 및 아코디언 메뉴에서 접근성 코드가 들어가게 됩니다.

 

 

<button type="button" role="tab" aria-expanded="false">
	<strong>과금</strong><span>미사용된 아이템을 환불 받을 수 있나요?</span>
</button>

(CSS는 따로 잡지 않았습니다.)

• 현재 토글 메뉴에서 aria-expanded="false" 로 최초로 닫혀있는 상태입니다.

<button type="button" role="tab" aria-expanded="true">
	<strong>과금</strong><span>미사용된 아이템을 환불 받을 수 있나요?</span>
</button>
<div class="view">
	<div class="inner">
		<strong>답변</strong>
		<span>사이트 운영자 답변</span>
		<p>
			구매한 후에 24시간 이내에 환불 요청을 하신다면 가능합니다.
		</p>
	</div>
</div>

• 과금 부분을 클릭하게 되면 <button> 태그에 있던 aria-expanded="true"로 속성값을 변화시킵니다.
• view 클래스를 가지고 있던 div 태그를 display: block 값을 줍니다.

---

다른 방법으로도 접근성을 하는 방법도 있겠지만, 가장 기초적이면서 토글 및 아코디언에서 많이 사용하는 방법입니다. 자바스크립트로 attr 값만 제어해주고, 나머지는 CSS로 컨트롤한다면 코드 값도 줄어들기 때문에 쉽게 사용할 수 있는 방법 중에 하나입니다.

 

코드가 짧고, 유지보수가 수월하면 그거만한 코드가 없다고 생각합니다. 웹 접근성 뿐만 아니라, 이제 새로운 직원분을 위해서라도 조금씩 정리해서 올려보려고 노력합니다.