ARIA를 통한 웹접근성 최적화

요새 웹접근성에 관한 프로젝트가 한창이다. 웹 접근성을 처리하는 방법은 이미지에 alt를 추가하는 정도밖에 몰랐는데, 정말 복잡하고 세심한 처리가 필요함을 느끼고 있는 요즘. 이를 정리해보려한다.

웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

- 위키백과-

 

ARIA

상단에 언급한 image에 alt 속성을 추가하는 것은 이미지를 설명하기 위한 대체 텍스트를 넣는다는 의미이다. 만약 시각적으로 이미지를 볼 수 없는 상황에서 alt에 설정된 속성을 읽음으로써 image를 파악할 수 있는 것이다.

현재 웹 기술이 점점 발전함에 따라 웹이 이전보다 더욱 더 복잡해졌고, 장애를 가진 사람과 가지지 않은 사람 모두 복잡한 사이트를 쉽게 접근할 수 있도록 하기 위해 사용되는 것이 바로 aria 속성이다.

접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.

- MDN -

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

ARIA - 접근성 | MDN

 

하단 aria 설명을 위한 코드는 레진 깃헙 리드미를 참고하였다.
https://github.com/lezhin/accessibility/blob/master/aria/README.md

 

• 탭 목록 / 탭 패널

코드에서 보는 것과 같이 탭 리스트를 감싸는 div에 role 속성으로 tablist임을 명시하고, 리스트들에 role로 탭임을 명시한다. aria-selected로 현재 선택 되었는지 아닌지를 true/false로 나타내고, id를 명시하여 컨트롤 되는 탭 패널의 aria-labelledby와 연결시켜준다.

참고로 tabindex는 포커스가 될 수 있음을 의미한다.

<div class="weekly">
    <div role="tablist">
        <a id="mon-anchor" href="#mon" role="tab" aria-selected="true">월</a>
        <a id="tue-anchor" href="#tue" role="tab" aria-selected="false">화</a>
    </div>
    <div id="mon" tabindex="0" role="tabpanel" aria-labelledby="mon-anchor">
        월요일엔 빨간 장미를...
    </div>
    <div id="tue" tabindex="0" role="tabpanel" aria-labelledby="tue-anchor" hidden>
        화요일엔 노란 장미를...
    </div>
</div>

* role 속성은 일부 태그에서 제한이 있을 수 있다. (ex. <ul>태그)

• 툴팁

툴팁이 될 태그에 role 속성과 id를 넣어주고, 마우스가 올려질 태그에 aria-describedby 속성으로 툴팁에 설정한 id를 매칭시켜준다.

<button aria-describedby="TIP-DEL">게시물 삭제</button>
<p id="TIP-DEL" role="tooltip" hidden>게시물 삭제 후 복원할 수 없음.</p>

 

• 결과 메세지

어떤 처리에 대한 결과 메세지를 읽어주는 기능이다. role='status'로 설정하여 사용자 액션에 방해되지 않으면서도 보조기기 사용자에게 메세지를 전달하는 것을 의도한다. 따라서 해당 부분에 초점을 맞추지 않도록 주의해야한다. 

<p role="status">회원가입 양식 전송완료.</p>

role에 alert을 설정하게 되면 제안이나 오류 사항 등을 의미한다.

<p role="alert">우편번호 입력 오류.</p>

 

input이나 textArea 등 사용자 입력에 따라 실시간으로 오류를 표시할 수 있는 경우라면 role="alert" 대신 컨트롤 요소 (input, textArea 등) 에 aria-invalid="true|false" 속성과 aria-errormessage="ID reference"을 사용하여 처리한다.

status는 현재 읽어주고 있는 음성 안내를 모두 마친 후, 해당 내용을 낭독하는 반면에 alert는 현재 읽어주고 있는 음성 안내를 즉시 멈추고 메세지를 전달한다는 차이가 있다.

 

 

 

 

---

* aria 속성을 사용하는 것 보다 더 선행되어야 할 것은 올바른 HTML 사용이다.  예를 들어 다음과 같은 코드가 있을 때, 어떤 코드가 맞는 코드일까?

<a href="#" role="button">...</a>
<button type="button">...</button>

둘 다 button 역할을 하는 두 코드 중 조금 더 웹접근성에 알맞은 것은

<button type="button">...</button>

이다.

보조기기에서 버튼임을 인지하였지만 <a> 태그로 구현한 버튼은 href의 속성 등과 관련한 기능이 함께 제공되기 때문에 사용자에게 헷갈림을 선사할 수 있다.

더불어 <a> 태그는 엔터로만 동작을 하고, <button> 태그는 엔터와 스페이스를 통하여 동작하게 된다. 버튼이라고 인지한 후, 스페이스를 통하여 버튼을 실행시키려 할 때, <a> 태그로 구현한 버튼은 동작을 하지 않는다는 의미이다.