role 속성

wow·2020년 9월 29일
2

적절한 의미와 elements를 가지고 HTML 문서를 작성하면 웹 접속 장비에서도 해석이 수월해진다.
HTML을 의미있게 사용하기 위해 role이라는 속성에 대해 알아보려 한다.

role은 웹 접근성을 위해 생겨났으며 위젯, 구조 및 동작에 대한 의미 정보를 올바르게 전달하기 위해 생겼다.

elements의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할

참고 이미지: https://www.w3.org/TR/wai-aria-1.1/#roles_categorization

Role은 아래의 카테고리를 따른다.

  • Abstract Roles
  • Widget Roles
  • Document Structure Roles
  • Landmark Roles
  • Live Region Roles
  • Window Roles

각각의 Role 속성에 대한 의미와 종류에 대해 알아볼 것이고, role-attribute는 해당 role 속성에 맞게 사용하면 된다.

Abstract Roles

일반적인 역할 개념을 정의할 목적으로 사용

Abstract roles설명
command입력 데이터를 수신하지 않는 위젯 형식
composite위젯 탐색 또는 자식을 포함하는 형식
input사용자 입력을 허용하는 위젯형식
range사용자가 설정할 수 있는 값 범위
roletype역할이 할당 된 개체에 구조적, 기능적 목적을 설명
sectionheadsection의 주제를 표시하거나 요악하는 구조
section문서 또는 응용 프로그램에서 렌더링 가능한 구조 단위
select사용자가 선택 항목 집합에서 선택을 할 수 있게 하는 위젯
structure문서의 구조 요소
widgetGUI 사용자 인터페이스
window브라우저 또는 응용 프로그램 창

Widget Roles

독립형 사용자 인터페이스 위젯 또는 더 큰 복합 위젯의 일부로 작동

Widtet Roles설명
button버튼을 누르거나 사용자 트리거 동작을 허용하는 입력
checkbox체크가 확인 됐는지, 확인 되지 않은지, 다중 체크가 되었는지 확인하는 란
link내부 또는 외부 링크로 이동
menuitem메뉴 또는 선택 세트 옵력
optionselect 목록에서 선택 가능한 항목
progressbar작업의 상태를 표시하는 요소
radio역할이 동일한 요소 그룹의 확인 가능한 입력으로 한 번에 하나만 확인 가능
scrollbar내용 스크롤을 제어하는 그래픽 객체
searchbox검색 기준을 지정하기 위한 텍스트 상자 유형
slider슬리어다의 크기와 가능한 값의 현재 값가 범위를 나타냄
switch체크 또는 체크되지 않은 값 (on 또는 off)
tab탭 내용을 선택하기 위한 그룹화 레이블
textbox자유 형식의 텍스트를 값으로 사용할 수 있는 입력 유형
treeitem하나의 요소로 하위 레벨의 트리 항목 요소 그룹을 포함하는 경우 확장이나 축소 가능
grid하나 이상의 셀이 있는 하나 이상의 행 컬렉션을 포함하는 그룹
listbox사용자가 선택의 목록에서 하나 이상의 항목을 선택할 수 있음
menu사용자에게 선택 목록을 제공하는 위젯 유형

Document Structure Roles

페이지에서 컨텐츠를 구성하는 구조를 설명

Document Structure roles설명
article문서, 페이지 또는 사이트의 독립적인 부분을 구성하는 페이지 섹션
cell테이블 컨테이너의 셀
columnheader열에 대한 헤더 정보가 들어있는 셀
definition용어 또는 개념의 정의
directory목차와 같은 그룹 구성원에 대한 참조 목록
document컨텐츠가 포함된 요소
figure그래픽 문서, 이미지, 예제 텍스트를 포함하는 인식 가능한 컨텐츠
group페이지 요약 또는 목차에서 포함되지 않는 일련의 사용자 인터페이스
heading페이지 섹션의 제목
img이미지를 구성하는 요소
listlistitem을 소유하고 있는 section
listitem목록 또는 디렉토리 단일 항목
row테이블 형식 컨테이너의 셀 행
rowgroup테이블 형식 컨테이너에 하나 이상의 행 요소를 포함하는 구조
rowheader격자의 행에 대한 헤더 정보가 들어있는 셀
tablesection 데이터가 행과 열로 정렬
term해당 정의가 있는 단어 또는 구문
toolbar시각적 형태로 표현되는 기능 버튼 또는 컨트롤 모음
tooltip요소에 대한 설명을 표시하는 상황별 팝업

Landmark Roles

Landmark 기본 유형에서 상속되며 각 역할 속성에서 모두 가져옴

Landmark roles설명
banner페이지별 콘텐츠가 아닌 사이트 중심 콘텐츠를 주로 포함하는 영역
contentinfo상위 문서에 대한 정보를 포함한 인식이 가능한 큰 영역
form양식을 만들 결합, 항목 및 개체의 컬렉션을 포한한 지역
main문서의 주요 내용
navigation문서 또는 관련 문서를 탐색하기 위한 탐색 요소 모음
region의도한 목적에 사용자가 쉽게 섹션을 이동하고 요약된 내용을 통해 요소로 빠르게 탐색 할 수 있게 하는 역할
search전체, 검색 기능을 만들 결합, 항목 및 개체의 컬렉션을 포함한 지역

Live Region Roles

라이브 영역 특성에 의해 수정

Live Region roles설명
alert경고 메세지를 전달하여 사용자에게 경고 표시(알람)
log새로운 정보가 의미있는 순서로 추가되고, 오래된 정보가 사라지는 라이브 영역
marquee중요하지 않은 정보가 자주 변경되는 라이브 영역
status사용자를 위한 자문 정보를 위한 라이브 영역
timer시작 지점에서 경과된 시간 또는 종료 지점까지 남은 시간을 나타내는 숫자 카운터 라이브 영역

Window Roles

브라우저 또는 응용 프로그램 내에서 창 역할을 함

Window roles설명
alertdialog초기 포커싱 시, 대화 상자의 요소로 이동하는 경고 메세지가 포함된 대화 상자 유형
dialog웹 애플리케이션의 기본 하위 창

https://www.w3.org/TR/wai-aria-1.1/

0개의 댓글