aria 속성 예시, 아코디언에 aria 속성 적용

 

✅ aria 속성이란?

• 웹, 앱 콘텐츠의 접근성 향상을 위해 사용되는 속성.
• ARIA 속성은 접근성 트리를 수정 ➡️보조 기술이 사용자에게 콘텐츠를 제공하는 방식을 변경.
• 요소의 실제 기능이나 동작은 바뀌지 않는다.
  
  

✅ aria의 중요성

• 스크린리더 사용자 지원
• 키보드(tab) 사용자 지원
• 코드 가독성 향상
• WCAG(Web Content Accessibility Guidelines) 준수

 

✅ aria 속성 예시

📍 role : 요소의 역할을 정의

<!-- 버튼의 역할일때 -->
<div role="button" onclick="closeBtn()">
  X
</div>

<!-- 알림의 역할일때 -->
<div role="alert">
  안내 메세지
</div>

<!-- 체크박스의 역할일때 -->
<div role="checkbox">
  선택
</div>

 

 

📍 aria-label : 요소에 대한 설명 제공

<button aria-label="메뉴">메뉴 버튼</button>

 

 

📍 aria-hidden : 요소를 보조 기술에서 숨긴다

• 화면 UI에는 그려지지만 스크린 리더에서는 읽지 않는다.

<div aria-hidden="true">포커스가 불필요한 영역에 주로 쓰인다.</div>

 

 

📍 aria-expanded : 확장 가능한 요소의 상태를 나타낸다 (ex. 아코디언)

<button aria-expanded="false">아코디언 펼치기<button>

 

 

📍 aria-disabled : 요소의 비활성화 상태를 나타낸다 (ex. 클릭 할 수 없는 버튼)

<button aria-disabled="true">비활성화 버튼<button>

 

 

📍 aria-checked: 체크박스 또는 라디오 버튼의 상태를 나타냄

<div role="checkbox" aria-checked="true">
  선택
</div>

 

 

📍 aria-describedby : 요소를 설명하는 다른 요소를 지정

 

📍 aria-labelledby  : 다른 요소를 레이블로 지정

 

 

✅ 아코디언 코드로 예시를 들어봄

• 자바스크립트를 사용하여 aria-expanded 값은 동적으로 변경이 되어야한다.
• 키보드 접근성을 위해서는 키보드 이벤트 처리가 필요
• 여러 패널이 동시에 열릴 수 있게 하려면 aria-multiselectable="true" 사용한다.

<div class="accordion-style" role="tablist" aria-multiselectable="true">
  <!-- s: 아코디언 영역 1 -->
  <button aria-expanded="false" aria-controls="panel1" id="title1">
    아코디언 제목 01
  </button>
  <div id="panel1" role="region" aria-labelledby="title1" hidden>
    아코디언 제목 01에 맞는 콘텐츠 영역
  </div>
  <!-- e: 아코디언 영역 1 -->
  
  <!-- s: 아코디언 영역 2 -->
  <button aria-expanded="false" aria-controls="panel2" id="title2">
    아코디언 제목 02
  </button>
  <div id="panel2" role="region" aria-labelledby="title2" hidden>
    아코디언 제목 02에 맞는 콘텐츠 영역
  </div>
  <!-- e: 아코디언 영역 2 -->
</div>

 

📍 아코디언 버튼 영역

• aria-expanded: 아코디언 패널의 확장상태를 나타낸다.
• aria-controls: 제어하는 패널 ID 지정 (타이틀 버튼과 맞는 콘텐츠랑 짝을 지어주는 것)

📍 아코디언 콘텐츠 영역

• aria-labelledby: 헤더 버튼의 ID와 연결