웹 접근성 준수를 위해 사용하는 ARIA에 대한 기본 개념을 정리해 보았다
ARIA란?
-
접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.
-
ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공한다. 예를 들어 ARIA는 HTML4에서의 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공한다.
ARIA role 속성
- 자세한 내용은 여기를 참조하자.
| Landmark Role | HTML5 관련 요소 |
|---|---|
| role=”application” | 동일한 역할의 요소 없음. 주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다. |
| role=”banner” | 동일한 역할의 요소 없음. 비슷한 의미로 <header> 사용 가능, <header role="banner">로 사용 시 1페이지에서 1개만 사용하기를 권장한다. |
| role=”navigation” | <nav>와 동일하다. 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메 뉴 및 서브 메뉴 등에 사용할 수 있다. |
| role=”main” | <main>과 동일하다. 본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다. |
| role=”aside” | <aside>와 동일하다. 주요 컨텐츠와 연관이 적은 의미를 가진 영역이다. |
| role=”form” | <form>과 동일하다. 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함할 수 있다. |
| role=”search” | 동일한 역할의 요소 없음. 검색 역할을 담당하는 서식 영역을 의미하며 <div>또는 <form> 요소를 사용하는 것을 권장한다. |
| role=”contentinfo” | 동일한 역할의 요소 없음. <footer>와 비슷하나 <footer role="contentinfo">로 사용 시 한 페이지에 한 개의 <footer> 요소만 사용하는 것을 권장한다. |
| role=”button” | p, span, div에서도 버튼 컨트롤로 사용된다는 것을 스크린리더에 인식시킬 수 있다. 가능하다면 button role보다 기본 html의 <button>, <input type="button">, <input type="submit">을 사용해야 한다. 기본 html 요소들은 추가 사용자 정의 없이도 키보드 포커스를 지원한다. |
| role =”tablist” | 탭 메뉴 등의 리스트임을 사용자에게 전달한다. |
| role=”tab” | 보조기기가 탭으로 인식 (버튼에 tab 역할을 주어, 메뉴를 컨트롤하는 의미를 추가하는 것이 가능하다.) |
| role=”tabpanel” | 보조기기가 탭 패널로 인식한다. |
| role=”presentation”, role=”none” | semantic 의미를 요소와 그 자식요소로부터 제거하기 위해서 사용한다. 시각적으로 게시하는 용도의 요소에 적용한다. none은 최근에 나온 속성값으로 presentation과 같은 역할을 한다. 호환성 문제가 있을 수 있으니까 두개 다 기입해 주는것이 좋다. |
| role=”group” | 라디오 버튼과 같이 여러개의 옵션 중 한 가지를 선택 할 때, name 속성값에 같은 값을 넣어줘서 그룹화하더라도 스크린리더 사용자는 시각적으로 볼수있는 사용자와 달리 묶여있는 그룹이라는 것을 인식하기 어렵다. 이러한 경우 role=”group”를 부여하여 같은 그룹이라는 것을 인식시킨다. |
ARIA properties(속성)과 states(상태)
- 자세한 내용은 여기를 참조하자.
- 요소가 기본적으로 가진 특징 or 상황, “aria-“라는 접두어를 갖는다.
properties(속성)
| aria-required | form 요소의 입력 필수 속성을 표시한다. |
| aria-label | 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트이다. |
| aria-labelledby | 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. |
| aria-live | 요소의 내부에 변경이 발생했을 때 스크린 리더가 변화를 감지할 지를 결정하는 속성이다. |
| aria-controls | 이 요소가 어떤 요소에 대한 컨트롤인지 표시한다. |
states(상태)
| aria-checked(true,false,undefined) | 선택 상태 |
| aria-hidden(true,false,undefined) | 숨김 상태 |
| aria-disabled(true,false) | 사용 불가능/가능 상태 |
| aria-pressed(true,false,대상) | 눌림 상태 |
사용법
-
구현하려는 기능을 가진 HTML 요소가 존재한다면 ARIA 대신 HTML 요소를 사용해야 한다. 네이티브 요소는 키보드 접근성, 역할, 상태를 지원한다.
-
HTML 요소와 중복 사용하지 않는다.
<nav role="navigation"> <nav> (x)
- HTML 요소의 의미, 기능 변경을 하지 않는다.
<h1 role="button">버튼</h1> (x)
- ARIA로 사용된 모든 요소는 키보드로 제어할 수 있어야 한다.
- 만약 role=”button” 이라면 tab으로 focus한 다음 enter 키나 return 키를 눌렀을 때 active 상태가 되어야 한다.
- 만약 role=”button” 이라면 tab으로 focus한 다음 enter 키나 return 키를 눌렀을 때 active 상태가 되어야 한다.
- 시멘틱 태그에 role은 될 수 있으면 쓰지 않는다.
<nav role="button"></nav> (x)
<nav><button></button></nav> (o)
출처
접근성 - MDN
ARIA - MDN
ARIA의 속성,상태,역할 및 사용 예시/주의사항
ARIA 역할(role), 속성(properties), 상태(states)
WAI-ARIA: role과 aria-label 사용법
WAI-ARIA 웹퍼블리싱
W3C - WAI-ARIA
영역에 대한 설명, 레이블 (aria-label, aria-labelledby)
WAI-ARIA Roles
ARIA states and properties