웹 접근성 높이기: Accessibility Tree와 WAI-ARIA

TL;DR#

• 스크린 리더 같은 보조 기술은 DOM Tree가 아니라 Accessibility Tree를 통해 웹과 상호작용합니다.
• Accessibility Tree는 name, description, role, state 네 가지 속성을 중심으로 콘텐츠를 표현합니다.
• 대부분은 시맨틱 태그와 alt 속성만 잘 써도 충분하지만, 서비스가 복잡해지면 WAI-ARIA로 보조 기술에 더 구체적인 정보를 전달할 수 있습니다.

왜 웹 접근성을 신경 써야 하는가#

어떻게 하면 더 많은 사람이 우리의 웹 서비스를 이용하게 만들 수 있을까요? 인터넷을 이용하는 사람들은 저마다 다른 환경에서 웹을 사용합니다. 키보드만으로 웹 서비스를 사용하는 사람도 있고, 스크린 리더로 웹 서비스를 사용하는 사람도 있습니다. 이 모든 사람이 우리의 웹 서비스를 이용할 수 있게 만드는 것이 핵심입니다.

스크린 리더 같은 보조 기술로 웹 서비스를 이용할 때는 브라우저의 콘텐츠를 다뤄야 합니다. 이때 DOM Tree에 직접 접근해 상호작용하지 않고, 대신 Accessibility Tree를 사용해 상호작용합니다.

Accessibility Tree란?#

• 접근성에 초점을 맞춘 콘텐츠를 담은 트리입니다.
• 스크린 리더가 이해할 수 있도록 만들어진 트리입니다.
• 대표적으로 name, description, role, state 네 가지 속성이 있습니다.
  • name - 주로 노드의 textContent와 관련이 있습니다. 예를 들어 <a href="/home">GoToHome</a> 노드가 있다면 이 노드의 name은 GoToHome입니다.
  • description - name 외에 추가적인 부연 설명을 제공하고 싶을 때 사용합니다.
  • role - 해당 노드가 어떤 역할을 하는지 나타냅니다. 예를 들어 input type="checkbox"는 checkbox라는 role을 가집니다.
  • state - 노드의 상태값을 나타냅니다. 예를 들어 input type="checkbox"에는 checked와 unchecked 상태가 있습니다. role마다 역할이 다르기 때문에 가질 수 있는 state도 모두 다릅니다.

접근성이 좋은 HTML 만들기#

• 설명이 담긴(descriptive) 콘텐츠를 사용하고 alt 속성을 활용합니다.
  • img 태그에 alt를 사용하지 않으면 스크린 리더가 src를 읽어 버립니다. 아무 의미 없는 이미지라면 빈 문자열을 넣어야 합니다.
• 시맨틱 태그를 사용합니다.
• 마우스 없이 키보드만으로도 웹 서비스를 적절히 이용할 수 있게 합니다.

일반적으로는 시맨틱 태그를 적절히 사용하는 것만으로 충분합니다. 하지만 웹 서비스가 복잡해질수록 좀 더 구체적인 정보가 필요할 때가 있습니다. 그때 WAI-ARIA를 사용할 수 있습니다.

WAI-ARIA#

• Web Accessibility Initiative의 약자입니다.
• 개발자가 의도한 사용자 행동이나 추가 정보를 스크린 리더 같은 보조 기술에 전달해, 더 향상된 웹 접근성을 제공합니다.

ARIA를 적용한 예제#

html
복사
<ol role="tablist">
  <li id="tab1" role="tab" aria-controls="panel1" aria-selected="true">Tab1</li>
  <li id="tab2" role="tab" aria-controls="panel2" aria-selected="false">Tab2</li>
  <li id="tab3" role="tab" aria-controls="panel3" aria-selected="false">Tab3</li>
</ol>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>
    Panel 1
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel2" aria-labelledby="tab2">
  <p>
    Panel 2
  </p>
</div>

<div class="hidden" role="tabpanel" id="panel3" aria-labelledby="tab3">
  <p>
    Panel 3
  </p>
</div>

• tablist role은 탭들을 감싸는 역할을 하는 요소입니다.
• tabpanel은 특정 탭의 콘텐츠와 관련된 요소입니다.
• aria-controls는 그 콘텐츠가 이 요소에 의해 제어되고 있음을 나타냅니다. 즉, 현재 요소가 제어하는 대상을 명시합니다.
• aria-labelledby는 사용된 요소에 label을 지정해, 어떤 요소의 식별자인지 명시합니다.
• aria-selected는 현재 선택된 상태를 나타냅니다.

느낀 점#

지금까지 개발할 때는 주로 시맨틱 태그에만 초점을 맞췄습니다. 솔직히 말하면 WAI-ARIA에 대한 개념도 거의 없었습니다. 하지만 웹 접근성을 조금 더 깊게 공부하면서 ARIA라는 개념을 알아보았고, 아직 웹 접근성에 대해 많이 부족하다는 것을 느꼈습니다. 생각보다 훨씬 많은 ARIA 속성이 있다는 것을 알게 되었고, 이런 속성들을 잘 활용해 접근성을 높이는 기술을 익히는 데 어느 정도 시간이 필요하겠다는 생각이 들었습니다.

이번 기회에 더 확실하게 공부해서, 모든 사람이 내가 만든 서비스를 잘 이용할 수 있게 만들고 싶다는 생각을 했습니다.