WAI-ARIA

WAI-ARIA 재생목록 : http://bit.ly/wai_aria

WAI-ARIA 소개

WCAG

WAI(W3C에서 설립한 기구)에서 권하고 있는 웹접근성 지침
시각장애인이나 저시력자, 청각장애인 등 다양한 장애를 가진 사용자들이 보다 접근 가능한 콘텐츠를 제공하는 것을 목표로 두고 있다.

한국형 웹콘텐츠 접근성 지침 (KWCAG)

"웹콘텐츠 접근성 가이드 라인"의 버전이 업테이트 되면서 웹접근성 보장 수준이 좋아지고 있으나 새롭게 등장하는 신기술들을 지원하기에는 아직도 부족한 부분이 많다.
- RIA의 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족
- Ajax를 통한 실시간 변경 콘텐츠를 못 읽을 수 있음
- 페이지 콘텐츠 중 일부만 변경 시, 동일한 내용을 계속 읽어야 하는 문제 발생
- 화면 확대 사용자의 경우, 가시 범위 밖의 콘텐츠 변경 내용을 알 수 없음.

ARIA의 목적

WAI-ARIA는 마크업의 역할, 속성, 상태 정보를 추가하여 스크린 리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하기 위함이다.
- 추가된 정보는 웹브라우저에 의해 자동으로 해석되어 각각의 운영체제의 접근성 API로 변환되도록 설계되었다. 이 때 스크린리더 및 보조기기는 운영체제에서 제공하는 접근성 API를 통해 데스크탑 애플리케이션과 동일한 방법으로 Javascript 컨트롤을 인식하고 상호작용을 하게 된다. 이것이 스크린리더 및 보조기기 사용자가 웹 애플이케이션을 사용할 때 데스크탑 애플리케이션의 동작과 유사하게 인식하고 작동하기 때문에 보다 향상된 사용자 경험을 제공하게 된다.

ARIA의 3가지 기능

역할(Role)

특정 요소(Element)에 역할을 정의하는 것
역할을 부여하여 사용자에게 정보를 제공
부여된 역할은 동적으로 변경할 수 없음
메뉴 정의
- 의미를 가지지 않는 중립적인 요소인 div를 사용할 때 ARIA의 rloe 속성의 값을 menu로 지정하면 해당 콘텐츠가 메뉴 콘텐츠라는 의미를 부여하게 되며 사용자는 해당 요소의 콘텐츠가 메뉴 정보 영역임을 알게 된다.

<div class="user_menu" role="menu"></div>

경고 대화상자 정의

<div class="auth_error" role="alertdialog"></div>

버튼 정의
- 버튼 컴포넌트를 제작하기 위해 마우스 사용및 키보드 접근을 위해 <a>요소를 사용하는 경우가 있다. 하지만 a 요소는 스크린 리더 사용자에게 버튼이 아닌 링크로 전달되어 다른 페이지로 이동할 것이라는 예상을 하게 한다. 이 때 ARIA의 rloe 속성을 추가하면 버튼으로 인식하게 된다.

<a class="btn_01" role="botton"></a>

속성(Properties) & 상태(States)

요소가 기본적으로 갖고 있는 특징이나 상황
속성과 상태는 "aria-*" 접두어를 가진다
상태는 요소의 상황을 나타내므로 애플리케이션이 실행중에 자주 바뀌는 반면, 속성은 상대적으로 바뀌는 경우가 드물다.

속성

필수 항목 속성
사용자는 해당 입력 서식이 필수 항목임을 전달받게 된다.

<input type="checkbox" aria-required="true" />

추가 설명 속성

<input type="text" aria-describedby="reference" />

그룹 레이블 명명

<div role="group" aria-label="레이블"></div>

상태

확장되어 있는 상태의 탭패널

<div role="tabpanel" aria-expanded="true"></div>

오류가 발생한 상태의 입력상자

<input type="text" aria-invalid="true" />

선택된 상태의 토글버튼

<button aria-pressed="true"></button>

ARIA 사용 규칙

ARIA와 HTML5

ARIA의 역할(role)과 HTML5 섹션 요소를 중복해서 사용하지 않는다.

<nav role="navigation"></nav>

ARIA의 Role과 HTML5 섹션 관련 요소 비교

<role="application">
- 동일한 역할의 요소 없음.
  주로 <div>요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
<role="banner">
- 동일한 역할의 요소 없음.
  비슷한 의미로 <header>요소를 사용할 수 있으나 <header role="banner">로 사용하였다면 한 페이지에게 한 개의 요소만 사용하길 권장한다.
<role="navigation">
- <nav>요소.
  다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메뉴 및 서브 메뉴 등에 사용할 수 있다.
<role="main">
- <main>요소.
  본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>,<aside>,<footer>요소의 하위 요소로 사용할 수 없다.
<role="aside">
- <aside>요소.
  주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다.
  <aside>영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
<role="form">
- <form>요소.
  폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
<role="search">
- 동일한 역할의 요소 없음.
  검색의 역할을 담당하는 서식 영역임을 의미하며 <div>또는 <form>요소를 사용하는 것을 권장한다.
<role="contentinfo">
- 동일한 역할의 요소 없음.
  비슷한 의미로 <footer>요소를 사용할 수 있으나 <footer role="contentinfo">로 사용하였다면 한 페이지에서 한 개의 요소만 사용하길 권장한다.

HTML요소의 기능 변경 제한

<h1 role="button">버튼</h1>
<!-- X -->
<h1><button>버튼</button></h1>
<!-- O -->
<h1><span role="button">버튼</span></h1>
<!-- O -->

키보드 사용 보장

<span role="button">버튼</span>
<!-- X -->
<span role="button" tabindex>버튼</span>
<!-- O -->

숨김콘텐츠

<button aria-hidden="true">버튼</butten>  <!-- X -->
<button role="presentation">버튼</butten> <!-- X -->

button {display: none;}
<button aria-hidden="true">버튼</butten>  <!-- O -->

레이블 제공

<div>
  <div id="user-name">이름</div>
  <input type="text" id="name" aria-labelledby="user-name" />
</div>

유효성 검사

https://validator.w3.org/

Previous이해, 견고

Last updated 3 years ago