WAI-ARIA 속성을 활용한 웹 접근성 개선 방법

19 Oct 2023

javascript

웹 접근성은 모든 사용자가 웹 사이트를 이용할 수 있도록 하는 것을 의미합니다. 하지만, 일부 사용자들은 시각, 청각, 운동 능력 등에 제약이 있기 때문에 웹 페이지에 접근할 때 어려움을 겪을 수 있습니다. 이러한 사용자들도 웹 사이트를 편리하게 이용할 수 있도록 도와주는 것이 바로 WAI-ARIA(Accessible Rich Internet Applications)입니다.

WAI-ARIA는 웹 콘텐츠와 애플리케이션의 접근성을 향상시키기 위한 기술로, HTML이나 CSS로는 제공하기 어려운 접근성 기능을 제공합니다. WAI-ARIA는 역할(role), 속성(property), 상태(state)와 같은 속성을 요소에 추가하여 웹 페이지의 의미와 동작을 명확하게 정의할 수 있게 해줍니다.

WAI-ARIA 속성의 사용 방법

WAI-ARIA 속성은 role, aria-*접두사를 사용하여 요소에 추가할 수 있습니다. 예를 들어, 시각적으로 구분되지 않는 메뉴나 대화 상자 등에 ARIA 라벨을 제공하려면 role="menubar" 또는 role="dialog"과 같은 속성을 사용할 수 있습니다.

<div role="menubar">
  <button role="menuitem">Home</button>
  <button role="menuitem">About Us</button>
  <button role="menuitem">Contact</button>
</div>

또한, WAI-ARIA 속성을 사용하여 요소의 상태를 나타낼 수도 있습니다. 예를 들어, 로딩 중인 콘텐츠를 나타내기 위해 aria-busy="true"와 같은 속성을 사용할 수 있습니다.

<div role="status" aria-live="polite" aria-busy="true">
  Loading...
</div>

WAI-ARIA를 활용한 웹 접근성 개선 사례

Tab 키 순서 조정: 일부 웹 페이지는 기본 순서가 제대로 설정되지 않아 키보드만을 이용하는 사용자들이 콘텐츠에 접근하기 어려울 수 있습니다. 이 경우에는 WAI-ARIA 속성을 사용하여 탭 키 순서를 조정할 수 있습니다.

<div tabindex="0">First</div>
<div tabindex="0">Second</div>
<div tabindex="0">Third</div>

폼 필드 유효성 검사 표시: 폼 필드에 입력된 데이터의 유효성을 검사하여 오류가 있을 경우 사용자에게 알리는 기능을 추가할 수 있습니다. 이를 위해 WAI-ARIA 속성을 사용하여 오류 메시지를 제공합니다.

<label for="name">Name:</label>
<input type="text" id="name" required aria-invalid="true" />
<div role="alert" aria-live="assertive">
  Please enter your name.
</div>

결론

WAI-ARIA 속성은 사용자들이 웹 페이지에 접근하고 상호 작용할 수 있는 능력을 향상시키는 데 도움을 줍니다. 웹 개발자는 WAI-ARIA 속성을 적절히 활용하여 웹 접근성을 개선할 수 있으며, 이는 모든 사용자들이 웹 콘텐츠에 더욱 쉽게 접근할 수 있도록 도와줍니다.

더 많은 정보를 알고 싶으시면 WAI-ARIA 문서를 참조하시기 바랍니다.

#웹접근성 #WAI-ARIA