요약
한눈에 보기
모든 속성과 역할을 한 장에 모았습니다. 인쇄하거나 회의 자료로 띄워 두기 좋습니다.
속성
이름·설명
aria-braillelabel속성- 점자 디스플레이에 표시할 점자용 이름을 따로 정합니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.
문자열 aria-brailleroledescription속성aria-roledescription으로 바꾼 역할 이름의 점자용 짧은 표현을 정합니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.문자열aria-describedby속성- 다른 요소의 텍스트를 ID로 참조해 이름 뒤에 읽히는 접근 가능한 설명으로 씁니다.
ID 참조 목록 aria-description속성- 참조할 요소 없이 문자열로 직접 접근 가능한 설명을 붙입니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.
문자열 aria-label속성- 화면에 보이는 텍스트가 없거나 부족한 요소에 문자열로 직접 접근 가능한 이름을 붙입니다.
문자열(빈 문자열 또는 공백) aria-labelledby속성- 페이지에 있는 다른 요소의 텍스트를 ID로 참조해 접근 가능한 이름으로 씁니다.
ID 참조 목록 aria-roledescription속성- 보조기술이 읽는 역할 이름을 사람이 읽기 쉬운 표현으로 바꿉니다. 역할 자체는 바뀌지 않습니다.
문자열
위젯 상태
aria-autocomplete속성- 입력하는 동안 입력값을 예측해 제안하는 방식(목록, 입력란 안 자동 채움, 둘 다)을 알립니다.
inlinelistbothnone aria-checked상태- 체크 상자·라디오 버튼·스위치가 체크되었는지, 해제되었는지, 일부만 체크되었는지 알립니다.
truefalsemixedundefined aria-current상태- 여러 항목 중 현재 페이지·현재 단계·현재 위치에 해당하는 항목을 표시합니다.
pagesteplocationdatetimetruefalse aria-disabled상태- 요소가 보이고 포커스도 받지만 지금은 조작할 수 없음을 알립니다.
truefalse aria-expanded상태- 버튼 등이 제어하는 영역이 펼쳐졌는지 접혔는지 알립니다.
truefalseundefined aria-haspopup속성- 요소를 조작하면 메뉴·목록·트리·그리드·대화상자 같은 팝업이 열린다는 것과 그 종류를 알립니다.
falsetruemenulistboxtreegriddialog aria-hidden상태- 화면에는 보이지만 보조기술에서는 숨길 요소를 표시합니다. 하위 요소 전체가 접근성 트리에서 빠집니다.
truefalseundefined aria-invalid상태- 입력한 값이 요구 형식에 맞지 않음을 알립니다. 오류 메시지와 함께 씁니다.
truefalsegrammarspelling(그 밖의 값) aria-keyshortcuts속성- 요소를 실행하거나 포커스하는 키보드 단축키가 있다는 것을 알립니다. 단축키 동작은 따로 구현해야 합니다.
단축키 문자열여러 단축키 (공백 구분) aria-modal속성- 대화상자가 모달이라서, 열려 있는 동안 바깥 콘텐츠를 사용할 수 없다는 것을 알립니다.
truefalse aria-multiline속성- 텍스트 상자가 여러 줄 입력을 받는지(Enter가 줄바꿈인지) 한 줄 입력인지 알립니다.
truefalse aria-multiselectable속성- 목록 상자·그리드·트리·탭 목록에서 여러 항목을 동시에 선택할 수 있는지 알립니다.
truefalse aria-orientation속성- 위젯이 가로 방향인지 세로 방향인지 알려, 어떤 방향키로 조작하는지 짐작할 수 있게 합니다.
horizontalverticalundefined aria-placeholder속성- 텍스트 상자가 비어 있을 때 보여 주는 입력 힌트(예시 값·형식)를 알립니다.
문자열 aria-pressed상태- 버튼을 토글 버튼으로 만들고, 지금 눌린(켜진) 상태인지 알립니다.
truefalsemixedundefined aria-readonly속성- 값을 읽고 탐색할 수는 있지만 바꿀 수는 없음을 알립니다.
truefalse aria-required속성- 양식을 제출하기 전에 반드시 입력하거나 선택해야 하는 항목임을 알립니다.
truefalse aria-selected상태- 탭·목록 상자 옵션·그리드 셀처럼 고를 수 있는 항목이 현재 선택되었는지 알립니다.
truefalseundefined
값·범위
aria-valuemax속성- 범위 위젯이 가질 수 있는 가장 큰 값을 숫자로 알립니다.
<숫자>(생략) aria-valuemin속성- 범위 위젯이 가질 수 있는 가장 작은 값을 숫자로 알립니다.
<숫자>(생략) aria-valuenow속성- 범위 위젯의 현재 값을 숫자로 알립니다. 사용자가 조작할 때마다 함께 바꿔야 합니다.
<숫자>(생략) aria-valuetext속성- 현재 값을 숫자 대신 사람이 이해하기 쉬운 문장으로 알립니다. (예: "보통", "오후 3시", "70,000원")
<문자열>
관계
aria-activedescendant속성- DOM 포커스는 컨테이너에 둔 채, 그 안에서 현재 활성화된 항목이 무엇인지 ID로 알립니다. ("가상 포커스")
<ID>(없음 / 빈 값) aria-controls속성- 이 요소가 내용이나 표시 여부를 제어하는 다른 요소를 ID로 연결합니다.
<ID 목록> aria-details속성- 요소에 대한 구조를 가진 자세한 설명(표, 목록, 링크 등)이 있는 다른 요소를 ID로 연결합니다.
<ID> aria-errormessage속성- 입력값이 잘못되었을 때 보여 주는 오류 메시지 요소를 ID로 연결합니다. 반드시
aria-invalid와 함께 씁니다.<ID> aria-flowto속성- 문서 순서와 다른 대체 읽기 순서에서 다음에 올 요소를 ID로 알립니다. 보조기술 지원이 매우 제한적입니다.
<ID 목록> aria-owns속성- DOM 구조로는 표현할 수 없는 부모-자식 관계를 만들어, 다른 곳에 있는 요소를 이 요소의 자식으로 접근성 트리에 넣습니다.
<ID 목록> aria-posinset속성- 목록·트리·메뉴 같은 집합에서 이 항목이 몇 번째인지 알립니다. 일부 항목만 DOM에 있을 때 필요합니다.
<정수 ≥ 1>(생략) aria-setsize속성- 목록·트리·메뉴 같은 집합의 전체 항목 수를 알립니다. 모르면
-1을 씁니다.<정수 ≥ 1>-1(생략)
표·목록 구조
aria-colcount속성- 표·그리드에 전체 열이 몇 개인지 알립니다. 일부 열만 DOM에 있을 때 씁니다.
<정수>-1(생략) aria-colindex속성- 셀이 전체 표에서 몇 번째 열에 있는지 알립니다. 일부 열만 DOM에 있을 때 씁니다.
<정수 ≥ 1>(생략) aria-colindextext속성- 열 번호를 숫자 대신 사람이 읽는 텍스트(예: "B열", "e")로 알립니다. ARIA 1.3 초안 속성입니다.
<문자열> aria-colspan속성- 셀이 가로로 몇 개의 열을 차지하는지(열 병합) 알립니다. 네이티브 표에서는
colspan을 씁니다.<정수 ≥ 1>(생략) aria-level속성- 제목·트리 항목·중첩 목록 등이 계층 구조에서 몇 번째 수준인지 알립니다.
<정수 ≥ 1>(생략) aria-rowcount속성- 표·그리드에 전체 행이 몇 개인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.
<정수>-1(생략) aria-rowindex속성- 행(또는 셀)이 전체 표에서 몇 번째 행인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.
<정수 ≥ 1>(생략) aria-rowindextext속성- 행 번호를 숫자 대신 사람이 읽는 텍스트(예: "A행")로 알립니다. ARIA 1.3 초안 속성입니다.
<문자열> aria-rowspan속성- 셀이 세로로 몇 개의 행을 차지하는지(행 병합) 알립니다. 네이티브 표에서는
rowspan을 씁니다.<정수 ≥ 1>0(생략) aria-sort속성- 표의 열(또는 행) 머리글 기준으로 데이터가 어떤 순서로 정렬되었는지 알립니다.
ascendingdescendingnoneother
라이브 리전
aria-atomic속성- 라이브 리전이 바뀔 때 바뀐 부분만 읽을지, 영역 전체를 다시 읽을지 정합니다.
falsetrue aria-busy상태- 요소가 지금 업데이트되는 중이므로, 보조기술이 변경이 끝날 때까지 기다렸다가 한꺼번에 알리도록 합니다.
falsetrue aria-live속성- 영역의 내용이 바뀌면 포커스가 없어도 화면낭독기가 자동으로 읽어 주도록 하고, 그 긴급도를 정합니다.
offpoliteassertive aria-relevant속성- 라이브 리전에서 어떤 종류의 변경(추가, 삭제, 텍스트 변경)을 알릴지 정합니다.
additionsremovalstextalladditions text
사용 중단
aria-dropeffect속성- 끌어 온 객체를 이 대상에 놓으면 어떤 동작(복사, 이동, 링크 등)이 일어나는지 알리던 속성입니다. ARIA 1.1부터 사용 중단(deprecated)되었습니다.
copyexecutelinkmovenonepopup aria-grabbed상태- 요소가 드래그 앤 드롭을 위해 집혀 있는지를 알리던 상태입니다. ARIA 1.1부터 사용 중단(deprecated)되었습니다.
truefalseundefined
역할
랜드마크
banner<header>- 로고, 사이트 이름, 전체 메뉴처럼 사이트 공통의 머리 영역을 나타내는 랜드마크입니다.
complementary<aside>- 본문을 보충하지만 떼어 놓아도 의미가 통하는 곁가지 영역(사이드바, 관련 글 등)을 나타내는 랜드마크입니다.
contentinfo<footer>- 저작권, 연락처, 개인정보처리방침 링크처럼 사이트 공통의 꼬리 영역을 나타내는 랜드마크입니다.
form<form>- 여러 입력 요소를 묶어 제출하는 양식 영역을 나타내는 랜드마크입니다. 이름이 있어야 랜드마크로 노출됩니다.
main<main>- 페이지의 핵심 본문을 나타내는 랜드마크입니다. 문서마다 하나만 둡니다.
navigation<nav>- 사이트나 페이지 안을 이동하는 링크 묶음(주 메뉴, 목차, 이동 경로 등)을 나타내는 랜드마크입니다.
region<section>- 다른 랜드마크로 설명할 수 없지만 바로 이동할 만큼 중요한 구획을 나타냅니다. 반드시 이름이 있어야 합니다.
search<search>- 사이트나 문서를 검색하는 기능을 담은 영역을 나타내는 랜드마크입니다. HTML
<search>요소가 대응합니다.
문서 구조
application- 표준 위젯 역할로 표현할 수 없는 독자적인 키보드 조작 영역을 만들 때 씁니다. 화면낭독기의 읽기 모드 키 가로채기를 멈추게 합니다.
article<article>- 기사, 게시글, 댓글처럼 그것만 따로 떼어도 완결되는 콘텐츠 묶음을 나타냅니다.
blockquote<blockquote>- 다른 출처에서 가져온 인용 단락을 나타냅니다.
caption<caption>- 표(
table,grid,treegrid)나figure의 보이는 제목·설명을 나타냅니다. cell<td>- 정적인 표(
table)의 한 칸입니다. 반드시row안에 있어야 합니다. code<code>- 컴퓨터 코드 조각을 나타냅니다. HTML
<code>에 대응합니다. columnheader<th scope="col">- 표·그리드에서 한 열의 제목 칸입니다. 그 열의 각 칸을 읽을 때 함께 안내됩니다.
definition<dd>- 용어나 개념의 정의(뜻풀이)를 나타냅니다. 짝이 되는 용어는
term역할입니다. deletion<del>- 삭제되었거나 삭제 제안된 내용을 나타냅니다. HTML
<del>에 대응합니다. document- 화면낭독기가 읽기 모드로 탐색하기를 기대하는 콘텐츠 영역입니다. 주로 위젯·application 안의 읽을거리에 씁니다.
emphasis<em>- 말할 때 힘을 주는 강세(뉘앙스) 강조를 나타냅니다. HTML
<em>에 대응합니다. feed- 스크롤하면 글(
article)이 계속 추가되는 무한 스크롤 목록을 화면낭독기로 탐색할 수 있게 합니다. figure<figure>- 이미지, 도표, 코드 예시처럼 본문에서 참조하는 독립된 그림 단위를 나타냅니다.
generic<div>, <span>- 스스로는 아무 의미가 없는 이름 없는 컨테이너입니다.
<div>,<span>의 암묵적 역할이며 작성자가 직접 쓰지 않습니다. group<fieldset>- 관련된 요소를 하나로 묶는 컨테이너입니다. 랜드마크와 달리 페이지 요약(목차)에는 나오지 않습니다.
heading<h1>~<h6>- 구획의 제목입니다. 화면낭독기 사용자가 가장 많이 쓰는 탐색 수단이며,
<h1>~<h6>에 대응합니다. img<img>- 하나의 이미지로 인식해야 하는 요소입니다. SVG, 아이콘 글꼴, 이모지 묶음 등에 쓰며 이름이 필수입니다.
insertion<ins>- 추가되었거나 추가 제안된 내용을 나타냅니다. HTML
<ins>에 대응합니다. list<ul>, <ol>- 여러 항목(
listitem)을 담는 목록입니다. 화면낭독기가 항목 개수를 함께 알려 줍니다. listitem<li>list안의 항목 하나입니다. 반드시 목록 안에 있어야 합니다.math<math>- 수학 식을 나타냅니다. 가능하면 MathML의
<math>를 씁니다. meter<meter>- 정해진 범위 안의 측정값(디스크 사용량, 배터리 잔량 등)을 나타냅니다. 진행률에는 쓰지 않습니다.
noneimg alt=""- 요소가 가진 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다.
presentation과 같은 뜻입니다. note- 본문에 덧붙인 참고·보충 설명 구획을 나타냅니다.
paragraph<p>- 문단을 나타냅니다. HTML
<p>에 대응합니다. presentationimg alt=""- 요소의 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다.
none과 같은 뜻이며 지원 범위가 더 넓습니다. row<tr>- 표·그리드의 한 행입니다. 셀(
cell,gridcell)과 머리글을 담습니다. rowgroup<tbody>- 표·그리드 안에서 여러 행(row)을 묶는 구조입니다.
<thead>,<tbody>,<tfoot>에 대응합니다. rowheader<th scope="row">- 표·그리드에서 한 행의 제목 칸입니다. 그 행의 다른 칸을 읽을 때 함께 안내됩니다.
separator<hr>- 내용이나 메뉴 항목 묶음을 나누는 구분선입니다. 포커스를 받으면 크기를 조절하는 분할 막대(위젯)가 됩니다.
strong<strong>- 중요하거나 심각하거나 급한 내용을 나타냅니다. HTML
<strong>에 대응합니다. subscript<sub>- 기준선 아래에 작게 쓰는 아래 첨자입니다. HTML
<sub>에 대응합니다. superscript<sup>- 기준선 위에 작게 쓰는 위 첨자입니다. HTML
<sup>에 대응합니다. table<table>- 행과 열로 정리된 정적인 데이터 표입니다. 셀 사이를 이동하며 조작하는 위젯은
grid입니다. term<dfn>, <dt>- 정의가 따르는 용어를 나타냅니다. 짝이 되는 정의는
definition역할입니다. time<time>- 특정 시점(날짜·시각)을 나타냅니다. HTML
<time>에 대응합니다. toolbar- 자주 쓰는 버튼·컨트롤을 한 줄로 모은 도구 모음입니다. Tab으로 한 번에 들어가고 화살표 키로 항목을 옮깁니다.
tooltip- 요소에 마우스를 올리거나 포커스하면 나타나는 짧은 설명 팝업입니다. 대상 요소에서
aria-describedby로 연결합니다.
위젯
button<button>- 누르면 동작을 실행하는 버튼입니다.
aria-pressed를 더하면 켜고 끄는 토글 버튼이 됩니다. checkbox<input type="checkbox">- 선택됨(
true), 선택 안 됨(false), 일부 선택(mixed) 상태를 가지는 체크박스입니다. gridcell<td> (grid 안)- 그리드(
grid)나 트리그리드(treegrid)의 한 칸입니다. 일반 표의cell과 달리 포커스를 받고 조작할 수 있습니다. link<a href>- 누르면 다른 페이지나 같은 페이지의 다른 위치로 이동하는 참조입니다.
menuitem- 메뉴(
menu)나 메뉴 막대(menubar) 안에서 명령을 실행하거나 하위 메뉴를 여는 항목입니다. menuitemcheckbox- 메뉴 안에서 체크박스처럼 켜고 끌 수 있는 항목입니다. 상태는
aria-checked로 알립니다. menuitemradio- 메뉴 안에서 같은 그룹의 항목 중 하나만 선택되는 라디오형 항목입니다.
option<option>- 목록 상자(
listbox) 안의 선택할 수 있는 항목입니다. 선택 상태는aria-selected로 알립니다. progressbar<progress>- 오래 걸리는 작업의 진행 정도를 보여 주는 표시줄입니다. 진행률을 모르면 값을 생략해 “진행 중”만 알립니다.
radio<input type="radio">- 묶음(
radiogroup) 안에서 하나만 선택되는 라디오 버튼입니다. scrollbar- 어떤 영역의 내용이 얼마나 스크롤되었는지 보여 주고 조절하는 스크롤 막대입니다. 브라우저 기본 스크롤바로 충분하면 쓰지 않습니다.
searchbox<input type="search">- 검색어를 입력하는 한 줄짜리 텍스트 입력란입니다.
textbox의 하위 역할입니다. slider<input type="range">- 정해진 범위 안에서 손잡이를 움직여 값을 고르는 입력 요소입니다.
spinbutton<input type="number">- 위·아래 키나 증감 버튼으로 숫자 값을 한 단계씩 바꾸는 입력 요소입니다.
switch- 켜짐/꺼짐 두 상태를 가지는 스위치입니다. 상태는
aria-checked(true/false)로 알립니다. tab- 탭 목록(
tablist) 안의 탭입니다. 선택하면 연결된 탭 패널(tabpanel)을 표시합니다. tabpanel- 탭(
tab)을 선택했을 때 보이는 내용 영역입니다. textbox<input> / <textarea>- 자유롭게 글자를 입력하는 입력란입니다. 여러 줄이면
aria-multiline="true"를 씁니다. treeitem- 트리(
tree) 안의 항목입니다. 하위 항목이 있으면 펼치고 접을 수 있습니다.
복합 위젯
combobox<select>- 값을 입력하거나 고를 수 있는 입력 요소와, 그 값을 고르도록 돕는 팝업(목록 상자 등)을 묶은 위젯입니다.
grid- 행과 열로 이루어지고, 방향키로 셀 사이를 이동하며 선택·편집할 수 있는 상호작용 표입니다.
listbox<select size>- 여러 옵션(
option) 중 하나 또는 여러 개를 고르는 목록입니다. 콤보박스의 팝업으로도 쓰입니다. menu- 명령이나 설정을 고르는 메뉴 항목 목록입니다. 보통 메뉴 버튼이나 메뉴 막대에서 팝업으로 열립니다.
menubar- 보통 가로로 항상 보이는 메뉴입니다. 데스크톱 프로그램의 “파일 · 편집 · 보기” 메뉴 막대에 해당합니다.
radiogroup<fieldset> + radio- 라디오 버튼(
radio)을 하나로 묶어, 그중 하나만 선택되게 하는 그룹입니다. tablist- 탭(
tab)들을 담는 목록입니다. 탭 목록은 탭 순서에서 한 번만 멈추고, 안에서는 방향키로 이동합니다. tree- 하위 항목을 펼치고 접을 수 있는 계층형 목록입니다. 파일 탐색기의 폴더 목록이 대표적입니다.
treegrid- 행을 펼치고 접을 수 있는 그리드입니다. 트리처럼 계층이 있고, 그리드처럼 열이 있습니다.
라이브 리전
alert- 중요하고 대개 시간에 민감한 메시지를 즉시 알리는 라이브 리전입니다. 포커스를 옮기지 않고 화면낭독기가 바로 읽습니다.
log- 채팅·이벤트 기록처럼 새 항목이 순서대로 끝에 추가되는 라이브 리전입니다. 추가된 항목을 공손하게(polite) 읽어 줍니다.
marquee- 주식 시세, 흐르는 광고처럼 자주 바뀌지만 중요하지 않은 정보를 담는 라이브 리전입니다. 기본적으로 자동 낭독하지 않습니다.
status<output>- 작업 결과·진행 상황처럼 급하지 않은 안내 메시지를 담는 라이브 리전입니다. 하던 낭독이 끝난 뒤 공손하게(polite) 읽어 줍니다.
timer- 경과 시간이나 남은 시간을 나타내는 시간 카운터입니다. 기본적으로 매번 자동 낭독하지 않습니다.
창
alertdialog- 사용자의 응답이 필요한 경고 메시지를 담은 대화상자입니다. 삭제 확인, 저장하지 않고 나가기 경고 등에 씁니다.
dialog<dialog>- 본문 위에 따로 뜨는 대화상자(창)입니다. 레이어 팝업·모달 창이 여기에 해당하며, HTML
<dialog>에 대응합니다.