[HTML] ARIA 역할 (role), 속성(properties), 상태(states)

ARIA role(역할) 

특정 요소에 역할 정의, 사용자에게 정보제공, 부여한 역할 동적 변경 불가

 

ARIA role 속성

role="application"	동일요소x, div요소와같이 그룹역할을하는 요소로 대체
role="banner"	비슷한 의미로 <header>사용가능👉🏻 <header role="banner"> 로 사용시 1페이지에서 1개만 사용하기를 권장
role="navigation"	<nav>와 동일
role="main"	<main>과 동일 👉🏻 1페이지 내에 1개만 사용가능하다. 본문의 주요 컨텐츠 영역
role="aside"	<aside>와 동일, 주요컨텐츠와 연관이 적은 의미를 가진 영역
role="form"	<form>와 동일, 서버에 전송될 수 있는 콘텐츠, 폼관련 요소 모임
role="search"	검색 역할을 담당하는 서식영역, <div>또는 <form>에 사용권장.
role="contentinfo"	<footer>와 비슷, <footer role="contentinfo">로 사용시 한 페이지에 한 개요소만 사용하길 권장
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-"라는 접두어를 갖는다.

(상태: 요소의 상황을 나타내므로 application 실행 중 자주 바뀐다.)

(속성:상대적으로 바뀌는 정도가 드물다.)

 

필수 항목 속성

속성	aria-required	form 요소의 입력 필수 속성
	aria-label	text없이 이미지로 표현될 때 정보 설명
	aria-live	업데이트된 정보의 상황에 대한 설명
	aria-controls(속성에 제어대상)	제어대상

상태	aria-checked(true,false,undefined)	선택 상태
	aria-hidden(true,false,undefined)	숨김 상태
	aria-disabled(true,false)	사용 불가능/가능 상태
	aria-pressed(true,false,대상)	눌림 상태

 

aria-required를 true로 지정하여 스크린 리더 사용자에게 해당 요소가 필수적으로 입력되어야 함을 전달한다.

 

 

예제

<input type="checkout" aria-required="true">

 

추가설명 속성 : div #reference의 내용을 input의 추가설명으로 사용해준다.

<input type="text" aria-describedby="reference">
<div id="reference">추가설명</div>

 

예시

 "아이디를 최소 8글자이상 입력하세요" 라는 정보를 전달해주기 위한 추가설명요소로 사용

• 그룹레이블 명명 : 간단한 명사로 해당 요소의 기능의 이해를 돕는다.
• aria-label로 div요소를 labelling 해준다.

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

 

속성

1. 확장되어 있는 탭 패널 : aria-expanded로 현재 탭 패널이 펼쳐짐(활성화)상태 라는 것을 전달. (false=접힌상태)

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

2. input에 입력된 값이 유효한지 판단하기 위한 것, true는 오류가 발생한 상태라는 것을 전달.

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

3. 선택된 상태의 토글버튼: pressed를 이용하여 해당 요소를 토글버튼으로 정의하여 준다. true는 누른상태, false는 누르지않은 상태, mixed는 부분적으로 눌린상태이다.

<button aria-pressed="true">

true는 현재 버튼이 눌림상태라는 것을 전달한다.

 

 

 

참고

https://inswave.com/confluence/pages/viewpage.action?pageId=19076563