ARIA 속성을 알아보자

웹사이트는 기본적으로 키보드와 마우스를 사용하는 사용자를 위해 설계가 된다. 하지만 어떤 사용자는 사이트의 텍스트를 오디오나 점자로 변환하는 화면 판독기를 사용하기도 한다. 그뿐일까? 터치패드, 시선 추적 장치 등을 선호하는 사람들이 다양한 도구를 통해 웹사이트에 접근하기 때문에 웹 접근성은 우리 모두에게 매우 중요하고 필요하다.

이런 접근성을 위해 개발자는 시맨틱 태그를 이용하지만, 애플리케이션이나 복잡한 구성을 두고 있는 경우 제한이 될 수 있다. 그럴 경우 우리는 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Application)를 사용한다. ARIA는 정확하지 않은 마크업을 수정하고 HTML에 보조 기술(AT)을 사용하여 접근성 경험을 향상하기 위해 간극을 메우기 위한 속성(attribute)들의 모음으로 정의된다. 더 간단히 말하자면, ARIA는 웹사이트/앱과 보조 기기 사용자 사이의 간극을 메우는 헬퍼 코드이다.

ARIA(Accessible Rich Internet Applications) 속성

• html 요소의 역할, 상태 및 속성에 대한 자세한 정보를 제공할 수 있는 추가 속성이다.
• W3C ARIA 스펙에 의해 정의되며 스크린 리더에서 작동하도록 설계된 표준화된 속성 집합이다.
• 웹 표준을 사용할 수 없는 경우, 요소에 대한 명확한 의미(존재 이유, 작동 방식)를 제공한다.

role

요소가 무엇인지/무엇을 하는지 정의

• 사용자 인터페이스 요소를 정의하는 유형 <div tabindex="0" role="button">저장</div>
• 위젯 역할 : 요소가 사용자에게 표시되는 방법
  • checkbox : 선택할 수 있는 대화형 컨트롤에 사용
  • dialog: 응용 프로그램 대화 상자 또는 창에 사용되며 일반적으로 오버레이가 있는 페이지 콘텐츠 위에 배치.
  • 로그: 새로운 정보가 의미 있는 순서로 추가되고 오래된 정보가 사라질 수 있는 영역(예: 채팅 로그, 오류 로그, 메시지 대기열)에 사용.
  • progressbar : 진행 중인 작업의 상태를 표시하는 영역에 사용.
• 문서 구조 역할 : 페이지 내에서 특정 요소가 구성되는 방식을 설명
  • 그리드 : 하나 이상의 셀 행을 포함하는 요소에 사용.
  • toolbar : 도구 모음을 구성하는 요소를 그룹화하는 데 사용.
  • 텍스트 상자: 사용자가 자유 형식 텍스트를 입력할 수 있는 요소에 사용.
  • 그림 : 정보를 전달하는 이미지, 코드 발췌 및 기타 비텍스트 콘텐츠에 사용.

때에 따라 접근성에 이점을 제공할 수 있다. 하지만 다른 접근성 도구 및 전략이 불충분한 경우 최후의 수단으로 활용해야 한다. 과도하게 사용하거나 오용하면 경험을 개선하기보다는 오히려 더 많은 장벽을 만들 수 있기 때문이다.

properties/states

속성 : 객체의 특성이나 관계를 표현 상태 : 요소와 연관된 현재 상태나 데이터값을 정의

역할의 현재 또는 예상 상태에 대한 추가 정보로 ARIA 역할을 향상하는 데 사용되는 HTML 속성. 상태나 속성이 변경되면 보조 기술에 알림이 전달되어 사용자에게 변경이 발생했음을 알릴 수 있다.

• 특정 ARIA 위젯의 상태를 설명합니다.
• 업데이트와 새로운 정보를 받을 가능성이 있는 페이지 영역을 정의합니다.

• 드래그 앤 드롭 기능(드래그 소스 및 드롭 대상)에 사용할 수 있는 페이지 영역 정의.

• aria-checked : 기본적으로 선택되어야 하는 체크박스 요소를 설명.
• aria-valuemax : 슬라이더나 진행률 표시줄과 같은 위젯에 허용되는 최댓값을 설명.
• aria-readonly : 사용자가 편집할 수 없는 특정 필드를 정의.
• aria-busy : 현재 자동으로 업데이트되는 요소를 설명.

<form action="post">
  <label for="firstName">First name:</label>
  <input id="firstName" type="text" aria-required="true" />

  <label for="lastName">Last name:</label>
  <input id="lastName" type="text" aria-required="true" />

  <label for="streetAddress">Street address:</label>
  <input id="streetAddress" type="text" />
</form>

<section>
  <button aria-label="Search"><i class="fa fa-search"></i></button>

  <div role="tabpanel" aria-labelledby="tab1">
    <p>Tab panel content goes here.</p>
  </div>

  <button aria-expanded="false" aria-controls="collapse1">Show More</button>
  <div id="collapse1" aria-hidden="true">
    <p>Additional content goes here.</p>
  </div>
</section>

• aria-required : 이름과 성을 입력하도록 요구하는 양식을 설명
• aria-label : 현재 요소를 설명할 텍스트가 없으면, 현재 요소의 역할에 대한 정보를 제공(대체 텍스트)
• aria-labelledby : 현재 요소를 설명할 텍스트가 있으면, 해당 텍스트 영역과 현재 요소를 연결할 때 사용(label보다 최우선)

<!-- 설명용 텍스트(숨겨진 요소도 참조가 가능) -->
<span id="rg-label" style="display:none"> Drink options </span>

<!-- rg-label(Drink options)에 관한 radiogroup이다. -->
<ul role="radiogroup" aria-labelledby="rg-label">
  <li>
    <input type="radio" name="drink" id="drink1" />
    <label for="drink1">Water</label>
  </li>
  <li>
    <input type="radio" name="drink" id="drink2" />
    <label for="drink2">Tea</label>
  </li>
  <li>
    <input type="radio" name="drink" id="drink3" />
    <label for="drink3">Coffee</label>
  </li>
  <li>
    <input type="radio" name="drink" id="drink4" />
    <label for="drink4">Cola</label>
  </li>
  <li>
    <input type="radio" name="drink" id="drink5" />
    <label for="drink5">Ginger Ale</label>
  </li>
</ul>

• aria-expanded : 연결된 div 요소의 콘텐츠가 확장 / 축소 여부를 나타냄
• aria-controls : 연결된 div의 ID를 참조하는 데 사용
• aria-hidden : 콘텐츠가 접혀 있을 때 숨겨져 있음

시맨틱만으로도 웹 접근성을 준수하기 충분하다 못해 넘친다. 그러므로 ARIA는 정말 어쩔 수 없이 사용해야만 할 때 사용하는 게 좋을 것 같다.

참고 자료 | W3C