레퍼런스
속성 (State · Property)
aria-로 시작하는 53개 속성을 쓰임새별로 정리했습니다. 값이 자주 바뀌면 상태(State), 거의 고정이면 속성(Property)입니다.
속성 53개
이름·설명 7
요소를 무엇이라 부르고 어떻게 설명할지 정합니다.
-
aria-describedby다른 요소의 텍스트를 ID로 참조해 이름 뒤에 읽히는 접근 가능한 설명으로 씁니다.
-
aria-label화면에 보이는 텍스트가 없거나 부족한 요소에 문자열로 직접 접근 가능한 이름을 붙입니다.
-
aria-labelledby페이지에 있는 다른 요소의 텍스트를 ID로 참조해 접근 가능한 이름으로 씁니다.
-
aria-description참조할 요소 없이 문자열로 직접 접근 가능한 설명을 붙입니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.
-
aria-roledescription보조기술이 읽는 역할 이름을 사람이 읽기 쉬운 표현으로 바꿉니다. 역할 자체는 바뀌지 않습니다.
-
aria-braillelabel점자 디스플레이에 표시할 점자용 이름을 따로 정합니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.
-
aria-brailleroledescriptionaria-roledescription으로 바꾼 역할 이름의 점자용 짧은 표현을 정합니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.
위젯 상태 18
조작 요소의 현재 상태와 성질을 알립니다.
-
aria-checked체크 상자·라디오 버튼·스위치가 체크되었는지, 해제되었는지, 일부만 체크되었는지 알립니다.
-
aria-current여러 항목 중 현재 페이지·현재 단계·현재 위치에 해당하는 항목을 표시합니다.
-
aria-disabled요소가 보이고 포커스도 받지만 지금은 조작할 수 없음을 알립니다.
-
aria-expanded버튼 등이 제어하는 영역이 펼쳐졌는지 접혔는지 알립니다.
-
aria-hidden화면에는 보이지만 보조기술에서는 숨길 요소를 표시합니다. 하위 요소 전체가 접근성 트리에서 빠집니다.
-
aria-invalid입력한 값이 요구 형식에 맞지 않음을 알립니다. 오류 메시지와 함께 씁니다.
-
aria-pressed버튼을 토글 버튼으로 만들고, 지금 눌린(켜진) 상태인지 알립니다.
-
aria-required양식을 제출하기 전에 반드시 입력하거나 선택해야 하는 항목임을 알립니다.
-
aria-selected탭·목록 상자 옵션·그리드 셀처럼 고를 수 있는 항목이 현재 선택되었는지 알립니다.
-
aria-haspopup요소를 조작하면 메뉴·목록·트리·그리드·대화상자 같은 팝업이 열린다는 것과 그 종류를 알립니다.
-
aria-modal대화상자가 모달이라서, 열려 있는 동안 바깥 콘텐츠를 사용할 수 없다는 것을 알립니다.
-
aria-autocomplete입력하는 동안 입력값을 예측해 제안하는 방식(목록, 입력란 안 자동 채움, 둘 다)을 알립니다.
-
aria-keyshortcuts요소를 실행하거나 포커스하는 키보드 단축키가 있다는 것을 알립니다. 단축키 동작은 따로 구현해야 합니다.
-
aria-multiline텍스트 상자가 여러 줄 입력을 받는지(Enter가 줄바꿈인지) 한 줄 입력인지 알립니다.
-
aria-multiselectable목록 상자·그리드·트리·탭 목록에서 여러 항목을 동시에 선택할 수 있는지 알립니다.
-
aria-orientation위젯이 가로 방향인지 세로 방향인지 알려, 어떤 방향키로 조작하는지 짐작할 수 있게 합니다.
-
aria-placeholder텍스트 상자가 비어 있을 때 보여 주는 입력 힌트(예시 값·형식)를 알립니다.
-
aria-readonly값을 읽고 탐색할 수는 있지만 바꿀 수는 없음을 알립니다.
값·범위 4
슬라이더처럼 범위 안의 값을 가진 요소에 씁니다.
-
aria-valuemax범위 위젯이 가질 수 있는 가장 큰 값을 숫자로 알립니다.
-
aria-valuemin범위 위젯이 가질 수 있는 가장 작은 값을 숫자로 알립니다.
-
aria-valuenow범위 위젯의 현재 값을 숫자로 알립니다. 사용자가 조작할 때마다 함께 바꿔야 합니다.
-
aria-valuetext현재 값을 숫자 대신 사람이 이해하기 쉬운 문장으로 알립니다. (예: "보통", "오후 3시", "70,000원")
관계 8
요소와 요소 사이의 연결을 표현합니다.
-
aria-controls이 요소가 내용이나 표시 여부를 제어하는 다른 요소를 ID로 연결합니다.
-
aria-activedescendantDOM 포커스는 컨테이너에 둔 채, 그 안에서 현재 활성화된 항목이 무엇인지 ID로 알립니다. ("가상 포커스")
-
aria-errormessage입력값이 잘못되었을 때 보여 주는 오류 메시지 요소를 ID로 연결합니다. 반드시
aria-invalid와 함께 씁니다. -
aria-posinset목록·트리·메뉴 같은 집합에서 이 항목이 몇 번째인지 알립니다. 일부 항목만 DOM에 있을 때 필요합니다.
-
aria-setsize목록·트리·메뉴 같은 집합의 전체 항목 수를 알립니다. 모르면
-1을 씁니다. -
aria-details요소에 대한 구조를 가진 자세한 설명(표, 목록, 링크 등)이 있는 다른 요소를 ID로 연결합니다.
-
aria-flowto문서 순서와 다른 대체 읽기 순서에서 다음에 올 요소를 ID로 알립니다. 보조기술 지원이 매우 제한적입니다.
-
aria-ownsDOM 구조로는 표현할 수 없는 부모-자식 관계를 만들어, 다른 곳에 있는 요소를 이 요소의 자식으로 접근성 트리에 넣습니다.
표·목록 구조 10
표·그리드·트리·목록의 위치와 크기를 알립니다.
-
aria-level제목·트리 항목·중첩 목록 등이 계층 구조에서 몇 번째 수준인지 알립니다.
-
aria-sort표의 열(또는 행) 머리글 기준으로 데이터가 어떤 순서로 정렬되었는지 알립니다.
-
aria-colcount표·그리드에 전체 열이 몇 개인지 알립니다. 일부 열만 DOM에 있을 때 씁니다.
-
aria-colindex셀이 전체 표에서 몇 번째 열에 있는지 알립니다. 일부 열만 DOM에 있을 때 씁니다.
-
aria-colindextext열 번호를 숫자 대신 사람이 읽는 텍스트(예: "B열", "e")로 알립니다. ARIA 1.3 초안 속성입니다.
-
aria-colspan셀이 가로로 몇 개의 열을 차지하는지(열 병합) 알립니다. 네이티브 표에서는
colspan을 씁니다. -
aria-rowcount표·그리드에 전체 행이 몇 개인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.
-
aria-rowindex행(또는 셀)이 전체 표에서 몇 번째 행인지 알립니다. 일부 행만 DOM에 있을 때 씁니다.
-
aria-rowindextext행 번호를 숫자 대신 사람이 읽는 텍스트(예: "A행")로 알립니다. ARIA 1.3 초안 속성입니다.
-
aria-rowspan셀이 세로로 몇 개의 행을 차지하는지(행 병합) 알립니다. 네이티브 표에서는
rowspan을 씁니다.
라이브 리전 4
화면이 바뀔 때 보조기술이 알려줄 방식을 정합니다.
-
aria-live영역의 내용이 바뀌면 포커스가 없어도 화면낭독기가 자동으로 읽어 주도록 하고, 그 긴급도를 정합니다.
-
aria-atomic라이브 리전이 바뀔 때 바뀐 부분만 읽을지, 영역 전체를 다시 읽을지 정합니다.
-
aria-busy요소가 지금 업데이트되는 중이므로, 보조기술이 변경이 끝날 때까지 기다렸다가 한꺼번에 알리도록 합니다.
-
aria-relevant라이브 리전에서 어떤 종류의 변경(추가, 삭제, 텍스트 변경)을 알릴지 정합니다.
사용 중단 2
명세에서 더 이상 권장하지 않는 속성입니다.
-
aria-dropeffect끌어 온 객체를 이 대상에 놓으면 어떤 동작(복사, 이동, 링크 등)이 일어나는지 알리던 속성입니다. ARIA 1.1부터 사용 중단(deprecated)되었습니다.
-
aria-grabbed요소가 드래그 앤 드롭을 위해 집혀 있는지를 알리던 상태입니다. ARIA 1.1부터 사용 중단(deprecated)되었습니다.
조건에 맞는 속성이 없습니다. 검색어나 분류를 바꿔 보세요.