웹 접근성(Web Accessibility)

웹 접근성(Web Accessibility)이란 장애를 가진 사람뿐만 아니라 노년층과 저기능성을 가진 사람들, 다양한 환경에서 웹을 사용하는 모든 사람이 웹 상의 콘텐츠와 서비스에 동등하게 접근할 수 있도록 보장하는 것을 말한다.

웹 접근성의 주요 원칙

웹 접근성의 주요 원칙은 WCAG (Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)에 의해 정의된다. WCAG는 다음과 같은 4가지 주요 원칙을 포함한다.

인식의 용이성 : 사용자에게 제공되는 정보와 사용자 인터페이스 구성 요소는 인식 가능해야 한다. 예를 들어, 시각 장애인이 화면 판독기를 통해 콘텐츠를 인식할 수 있도록 텍스트 대체 태그(alt text)를 사용해야 한다.
운용의 용이성: 사용자 인터페이스 구성 요소와 네비게이션이 운용 가능해야 한다. 예를 들어, 키보드만으로도 모든 기능을 사용할 수 있도록 설계해야 한다.
이해의 용이성: 정보와 사용자 인터페이스 운용은 이해 가능해야 한다. 예를 들어, 간단한 언어를 사용하고, 오류 메시지를 명확하게 제공하여 사용자가 쉽게 이해할 수 있도록 해야 한다.
견고성: 콘텐츠는 다양한 사용자 에이전트, 특히 보조 기술을 통해 접근할 수 있도록 충분히 견고해야 한다. 예를 들어, 웹 표준을 준수하여 다양한 브라우저와 기기에서 제대로 작동하도록 해야 한다.

웹 접근성을 개선을 위한 가이드라인

시멘틱 태그 : 올바른 HTML 요소 사용은 시멘틱 웹을 구축하고 정보를 의미론적으로 표현하는 핵심
이미지 설명(alt) : 시각 장애인들이 웹 페이지의 이미지들을 이해하고 의미를 파악하는 데 도움을 주는 요소이다. 이미지가 나타내는 내용이나 주요 정보를 간결하게 설명해야 한다.
명료한 텍스트 : 사용자들이 웹 페이지의 내용을 이해하고 정보를 쉽게 파악할 수 있도록 간결한 언어와 명확한 표현을 사용해야 한다.
키보드 접근성 : 시각 장애인이나 기타 장애를 가진 사용자들이 마우스 없이 키보드만으로 조작할 수 있는 기능을 제공해야 한다.
색 대비 : 충분한 색 대비를 사용하여 시각 장애가 있는 사용자가 내용을 쉽게 구분할 수 있도록 해야 한다.
폰트 크기 조정 : 폰트 크기 조정 기능을 제공함으로써 웹 페이지의 접근성을 향상시키고, 모든 사용자가 콘텐츠를 편리하게 읽을 수 있도록 도움을 줄 수 있다.
자막 및 수화 인식 : 모든 사용자에게 동등한 정보 및 경험을 제공하고, 청각 장애자들에게 중요한 역할을 한다.

웹 접근성의 중요성

웹 접근성은 단지 장애를 가진 사람들만을 위한 것이 아니다. 접근성의 향상은 모든 사용자에게 더 나은 사용자 경험을 제공하며, 더 많은 사람들이 웹 사이트와 서비스를 이용할 수 있게 도와준다. 또한, 웹 접근성을 준수함으로써 법적 규제를 충족하고, 더 넓은 사용자 기반을 확보할 수 있다.

ARIA (Accessible Rich Internet Applications)

웹 접근성을 개선하기 위해 개발된 W3C 표준으로, 복잡한 웹 애플리케이션의 접근성을 높이기 위해 추가적인 HTML 속성과 역할을 정의함. ARIA는 특히 동적인 콘텐츠와 고급 사용자 인터페이스 제어의 접근성을 보장하는 데 초점을 맞추고 있다.

웹 접근성을 구현할 때는 ARIA를 사용하는 것 외에도 HTML5의 의미론적 요소를 최대한 활용하고, WCAG 지침을 준수하는 것이 중요하다. ARIA는 의미론적 요소를 보완하여 추가적인 접근성 정보를 제공하는 역할을 한다.

대부분의 WAI-ARIA 명세는 HTML 요소와 속성을 흉내내는 것으로 올바른 HTML을 사용한다면 WAI-ARIA 사용을 최소화할 수 있음

ARIA의 주요 개념과 구성 요소

Role (역할): 요소의 목적을 정의한다. 예를 들어, role="button"은 해당 요소가 버튼임을 나타낸다.
State (상태)와 Property (속성): 요소의 현재 상태나 속성을 나타냅니다. 예를 들어, aria-checked="true"는 체크박스가 체크되어 있음을 나타낸다.
Live Regions: 동적 업데이트가 발생하는 영역을 정의하며, 스크린 리더와 같은 보조 기술에 이 변화를 알립니다. 예를 들어, aria-live="polite"는 중요한 업데이트가 발생할 때 사용자에게 알리도록 한다.

ARIA의 주요 속성

aria-label: 요소에 레이블을 제공하여 사용자에게 그 목적을 설명한다.

<button aria-label="Close">X</button>

aria-labelledby: 다른 요소의 ID를 참조하여 레이블을 지정한다.

<label id="nameLabel">Name:</label>
<input type="text" aria-labelledby="nameLabel">

aria-describedby: 다른 요소의 ID를 참조하여 설명을 제공한다.

<input type="text" aria-describedby="nameDesc">
<div id="nameDesc">Please enter your full name.</div>

aria-live: 동적인 콘텐츠 변경 사항을 사용자에게 알립니다.

<div aria-live="polite">New updates will be announced here.</div>

aria-expanded: 요소의 현재 확장 또는 축소 상태를 나타낸다.

<button aria-expanded="true">Toggle</button>

aria-controls: 특정 요소가 다른 요소를 제어함을 나타낸다.

<li id="tab-button-1" role="tab" aria-controls="tab-panel-1">tab</li>
<div id="tab-panel-1" role="tabpanel" aria-labelledby="tab-button-1"> content</div>

주의점

의미를 가진 HTML 요소를 함부로 바꾸면 안된다.

<!-- X -->
<h1 role="button">GROUP</h1>
<!-- △ -->
<h1><span role="button">GROUP</span></h1>
<!-- ○ -->
<h1><button>GROUP</button></h1>

키보드를 사용하여 접근할 수 있어야 한다.

<!-- html5 -->
<button>버튼<button>
</select>


<!-- div + WAI-ARIA -->
<div role="button" tabindex="0">버튼</div>

사용자의 브라우저와 보조기기가 WAI-ARIA를 지원하는지 확인해야 한다.