오늘은 웹 접근성에 대해 알아보자!
웹 접근성(Web Accessibility)
- 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다.
- 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.
웹 접근성을 갖추면 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.
- 결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것이다.
우리 나라의 웹 접근성은 어떨까?
우리나라의 웹 접근성 수준은 높은 정보화 수준에도 불구하고 높지 않다. 2021년 기준, 일반 국민의 정보화 수준을 100이라고 할 때, 장애인, 고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이었고, 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었다.
국내에서는 대부분의 경우 웹 접근성에 대한 인식이 낮은 편이고, 잘 지켜지지 않는 경우가 많다. 실제로 법으로 정해져 있어도 단속이 이루어지지는 않다.
그럼에도 웹 접근성을 갖추기 위해서 노력하면 정보의 평등에 다가갈 수 있는 것은 물론이고, 그 외에도 여러 가지 효과를 기대할 수 있다!
웹 접근성을 갖추면 어떤 효과를 얻을 수 있을까?
1. 사용자층 확대
웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 돼서 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게된다.
2. 다양한 환경 지원
앞서 이야기 했듯 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있다.
예를들어 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황 등이 있다.
웹 접근성을 향상시키면 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다. 그렇기 때문에 자연스럽게 서비스의 이용자 수 증가를 기대할 수 있다.
3. 사회적 이미지 향상
기업의 사회적 책임에 대한 중요성이 점점 증가하고있는 상황에서, 웹 접근성 확보를 통해 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다.
기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성이 늘어나게 되는 것이다.
그렇다면 웹 콘텐츠는 어떤 방식으로 접근해야 할까?
참고: ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1’
: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
alt
속성 사용하기<img src="이미지 주소" alt="대체 텍스트" />
alt
값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 한다.멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
track
요소를 사용하여 자막 파일 불러오기<video ... ><track src="자막.vtt" kind="captions" /></video>
콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.
이럴 때 다음과 같은 방법으로 문제를 해결할 수 있음.
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
따라서 해당 버튼을 설명하는 대체 텍스트를 작성해야 한다.
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
자동으로 소리가 재생되지 않아야 한다.
이웃한 콘텐츠는 구별될 수 있어야한다.
: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
예를 들어 은행 사이트의 경우 보안 문제로 일정 시간 이후 자동 로그아웃을 진행하는데...
이 때 (1) 충분한 시간을 제공하면서 (2) 종료까지 남은 시간을 알려주고, (3) 시간을 연장할 수 있는 버튼과 바로 로그아웃할 수 있는 버튼을 제공해야 한다.
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족해야 함.
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
그 외에도 건너뛰기 목적을 달성할 수 있는 방법이 있으면 된다.
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
: 콘텐츠는 이해할 수 있어야 한다.
주로 사용하는 언어를 명시해야 한다.
HTML
요소에 lang
속성을 사용하여 제공<html lang="ko">
lang
속성을 표기한다.사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
예를 들어 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주면 된다.
```html
<a href="...">페이지<span class="blind">새 창</span></a>
```
- 링크 요소에 `title` 속성으로 새 창 작성하기
```html
<a href="..." title="새 창">페이지</a>
```
- 링크 요소에 `target=”_blank”` 속성을 넣기
```html
<a href="..." target="_blank">페이지</a>
```
콘텐츠는 논리적인 순서로 제공해야 한다.
스크린 리더는 마크업 순서대로 내용을 읽어준다는 것을 항상 고려하자!
```html
// 잘못 작성한 예시 : 탭1 -> 탭2 -> 탭1 관련 내용 -> 탭2 관련 내용 순서로 읽습니다.
<div>탭1</div><div>탭2</div><div>탭1 관련 내용</div><div>탭2 관련 내용</div>// 해결 방법 : 탭1 -> 탭1 관련 내용 -> 탭2 -> 탭2 관련 내용 순서로 읽습니다.
<div>탭1</div><div>탭1 관련 내용</div><div>탭2</div><div>탭2 관련 내용</div>
```
표는 이해하기 쉽게 구성해야 한다.
테이블 요소 안에 caption
요소를 사용해서 표에 제목을 제공하자.
<th>
, 데이터 셀은 <td>
를 사용scope
혹은 id
와 headers
속성을 사용하여 작성한다.사용자 입력에는 대응하는 레이블을 제공해야 한다.
<input>
요소에 value
나 placeholder
속성만 설정하는 것은 적합하지 않다.(X) <input type="text" placeholder="아이디" />
<input>
요소에 id
를 설정하고 <label>
요소의 for
속성으로 연결해준다.(O) <label for="user_id">아이디</label><input id="user_id" type="text" placeholder="아이디" />
title
속성을 사용한다.(O) <input type="text" title="아이디" placeholder="아이디" />
aria-label
속성을 사용한다.WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋다.
- 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용하자.
```html
(O) <input type="text" aria-label="아이디" placeholder="아이디" />
```
입력 오류를 정정할 수 있는 방법을 제공해야 한다.
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
(X) <div><span></div></span>
(O) <div><span></span></div>
(X) <div class="중복" class="사용"></div>
(O) <div class="안 돼요"></div>
id
를 중복해서 사용해선 안 된다.(X) <div id="아이디"><span id="아이디"></span></div>
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
그럼 이제 마지막으로 WAI-ARIA에 대해 알아보자!
WAI-ARIA는 WAI와 ARIA를 합친 단어이다.
- WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.
정리하자면, WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격, 즉 웹 접근성을 향상시킬 수 있는 방법 중의 하나이다.
그렇다면 왜 WAI-ARIA가 필요할까?
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해주기 때문에 보조적으로 사용하면 웹 접근성을 향상시킬 수 있다.
여기서 ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미이다.
여기서 주의!
흠... 그렇다면 WAI-ARIA는 어떻게 사용해야 할까?
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.
WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
- 속성(property) : 요소의 특징을 정의하는 속성(attribute)
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute).
예를 들어, 버튼으로 사용되는 요소를 만들었는데 <div>
요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.
<div role="button">div이지만 button으로 사용되는 요소</div>
주의할 점은, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해줄 필요는 없다.
// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>
또한, 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다.
// WAI-ARIA의 잘못된 사용 예시
<h1 role="button">h1인 요소</h1>
예시를 하나 더 들어보자.
탭 리스트의 경우 WAI-ARIA를 사용해서 이 구조가 탭의 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.
<div role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</div><div role="tabpanel">Tab menu ONE</div><div role="tabpanel">Tab menu TWO</div><div role="tabpanel">Tab menu THREE</div>
aria-selected
Tab 컴포넌트에서 role
만 추가하면 될까?
아니다...!
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개의 탭 중에서 첫 번째 탭이 선택된 상태임을 알 수 있게 되었다.
이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded
, 요소가 숨김 상태인지를 표시하는 aria-hidden
등의 속성이 있다.
aria-label
텍스트 콘텐츠 없이 이미지로만 만들어진 버튼 처럼 요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다.
돋보기 모양의 검색 버튼, X자 모양의 닫기 버튼의 이미지만 들어있는 버튼의 경우 HTML 요소의 구조만으로 어떤 역할을 하는 버튼인지 파악할 수 있을까?
아마 힘들 것이다...
<button> <img src="X.png" /> </button><button> <img src="돋보기.png" /> </button>
그래서 aria-label
를 사용해야 한다!
aria-label
은 말 그대로 요소에 라벨을 붙여주는 기능을 한다.
<button aria-label="닫기"/> <img src="X.png" /> </button><button aria-label="검색"/> <img src="돋보기.png" /> </button>
aria-live
aria-live
속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시함한다.
alert
, modal
, dialog
와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성이다. 시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려주면 큰 도움이 된다.
속성 값은
polite
,assertive
,off(default)
polite
: 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달한다.assertive
: 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달한다.마지막으로, 다시 한 번 강조하지만 앞서 말했듯 WAI-ARIA는 보조적인 역할로만 사용해야 한다!
WAI-ARIA에 대한 더 자세한 설명과 속성의 종류를 알아보고 싶다면 다음 레퍼런스들을 참조하자.