[Web 표준] 웹 접근성

LMH·2023년 1월 3일

이번 포스팅에서는 웹 접근성에 대한 개념과 어떻게 하면 웹 접근성을 향상시킬 수 있는지에 대해 정리하겠습니다.

웹 접근성이란?

소리가 잘 들리지 않는 사람이나 시력이 안좋은 사람들은 웹 페이지에서 정보를 전달 받거나 서비스를 이용하는데 어려움이 발생할 수 있습니다.

웹 접근성이란 웹 페이지에서 제공하는 서비스 이용의 불편함을 해소하고 정보에 대한 접근의 제한을 줄이고자하는 노력이라 할 수 있습니다.

우리나라의 정보화 수준은 세계적으로 선진화 되어 있지만 웹 접근성은 그렇지 않은 것이 현실 입니다. 2008년 4월 11일부터 시행된 장애인 차별 금지 및 권리 구제 등에 관한 법률에 의해 현재 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 강제성이 부여되었음에도, 다양한 장애 상황을 모두 고려하여 웹 접근성을 확보한 경우는 찾아보기 어렵습니다. 규모가 작은 웹 사이트에서 웹 접근성을 갖춘 사례는 더욱 찾기 힘듭니다.

웹 접근성의 장점

1. 사용자층 확대

웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 됩니다. 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 됩니다. 실제로 웹 접근성 향상을 통해 매출이 증가한 외국 쇼핑몰 사례도 있으며, 국내 온라인 쇼핑몰에서도 노년층의 매출이 증가 추세를 보이고 있습니다.

2. 다양한 환경 지원

앞서 이야기 했듯 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있습니다. 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황 등이 있습니다. 웹 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대됩니다. 자연스럽게 서비스의 이용자 수 증가를 기대할 수 있습니다.

3. 사회적 이미지 향상

기업의 사회적 책임에 대한 중요성이 점점 증가하고있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있습니다. 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 됩니다.

WAI-ARIA(웨이 아리아)

WAI는 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관이며, ARIA(Accessible Rich Internet Applications)는 장애가 있는 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술을 의미합니다.

HTML 요소에 의미를 부여한 시맨틱 요소를 사용하는 것만으로도 웹 접근성을 향상시킬 수 있지만 WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해줍니다.

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있습니다. WAI-ARIA의 속성에는 크게 세 가지 분류가 있습니다.

역할(role) : HTML 요소의 역할을 정의하는 속성
상태(state) : 요소의 현재 상태를 나타내는 속성
속성(property) : 요소의 특징을 정의하는 속성(attribute)

속성은 매우 다양하지만 그 중에서 몇가지를 예시로 알아보겠습니다.

1. 역할

role

HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)입니다. 예를 들어, 버튼으로 사용되는 요소를 만들었는데 div 요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있습니다.

다만, HTML 요소로 충분히 파학할 수 있는 내용을 WAI-ARIA로 설명해 줄 필요는 없습니다.

<div role="button">div이지만 button으로 사용되는 요소</div>

<button role="button">button인 요소</button> // 잘못된 예시

<h1 role="button">h1인 요소</h1> // 잘못된 예시

2. 상태

aria-selected

탭 컴포넌트에서 현재 어떤 탭이 선택되어 있는지 표시하기 위해서 aria-selected 라는 속성을 사용할 수 있습니다.

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

3. 속성

aria-label

텍스트 콘텐츠 없이 이미지로만 만들어진 버튼은 시각적으로 보이지 않는다면 어떠한 정보도 얻을 수 없습니다. 이럴 때 aria-label 속성을 사용한다면 화면의 정보를 소리로 알려주는 Screen Reader를 이용하여 정보를 확인할 수 있습니다.

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

aria-live

해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시합니다. 즉, 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성입니다. 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려줄 수 있습니다.