목차

1. 지원되는 상태 및 속성

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션을 보다 접근성 있게 만들기 위한 기술 명세입니다. 이 가이드는 WAI-ARIA 1.2의 최신 권고 사항을 기반으로, 웹 개발 시 사용하는 주요 속성 및 상태에 대해 분류하고 설명합니다.

1-1. 번역 가능한 상태와 속성

HTML 사양은 다른 사양들이 번역 가능한 속성을 정의할 수 있음을 명시합니다. 보조 기술 사용자들에게 이해될 수 있도록, 다음 상태와 속성의 값은 번역 가능한 속성이며 페이지가 현지화될 때 번역되어야 합니다:

• aria-label

• aria-placeholder

• aria-roledescription

• aria-valuetext

1-2. 전역 상태와 속성

일부 상태와 속성은 역할이 적용되었는지 여부와 상관없이 모든 호스트 언어 요소에 적용됩니다. 다음 전역 상태와 속성은 모든 역할과 모든 기본 마크업 요소에서 지원되며, 달리 금지되지 않는 한 사용할 수 있습니다. 역할이 어떤 전역 상태나 속성의 사용을 금지하는 경우, 그 상태나 속성은 역할을 정의하는 섹션에 포함된 특성 표에서 금지된 것으로 나열됩니다.

• aria-atomic

• aria-busy (state)

• aria-controls

• aria-current (state)

• aria-describedby

• aria-details

• aria-disabled (state) (Global use deprecated in ARIA 1.2)

• aria-dropeffect

• aria-errormessage (Global use deprecated in ARIA 1.2)

• aria-flowto

• aria-grabbed (state)

• aria-haspopup (Global use deprecated in ARIA 1.2)

• aria-hidden (state)

• aria-invalid (state) (Global use deprecated in ARIA 1.2)

• aria-keyshortcuts

• aria-label (Except where prohibited)

• aria-labelledby (Except where prohibited)

• aria-live

• aria-owns

• aria-relevant

• aria-roledescription

1-3. WAI-ARIA 상태 및 속성 분류

상태와 속성은 다음과 같이 분류됩니다.

• Widget Attributes (위젯 속성): 사용자 인터페이스 구성 요소의 상태, 속성 및 기능을 정의합니다.

• Live Region Attributes (라이브 영역 속성): 동적으로 변경되는 콘텐츠의 업데이트 방식을 보조 기술에 알립니다.

• Drag-and-Drop Attributes (드래그 앤 드롭 속성): 드래그 앤 드롭 인터랙션을 지원하는 요소의 속성을 정의합니다.

• Relationship Attributes (관계 속성): 문서 내 요소 간의 관계를 정의합니다.

1-3-1. Widget Attributes

이 섹션은 GUI 시스템이나 풍부한 인터넷 응용 프로그램에서 사용자 입력을 받고 사용자 동작을 처리하는 일반적인 사용자 인터페이스 요소에 특화된 속성들을 포함합니다. 이러한 속성들은 위젯 역할을 지원하기 위해 사용됩니다.

• aria-autocomplete

• aria-checked

• aria-disabled

• aria-errormessage

• aria-expanded

• aria-haspopup

• aria-hidden

• aria-invalid

• aria-label

• aria-level

• aria-modal

• aria-multiline

• aria-multiselectable

• aria-orientation

• aria-placeholder

• aria-pressed

• aria-readonly

• aria-required

• aria-selected

• aria-sort

• aria-valuemax

• aria-valuemin

• aria-valuenow

• aria-valuetext

위젯 속성은 사용자 에이전트에 의해 플랫폼 접근성 API 상태로 매핑될 수 있으며, 이는 보조 기술에 의해 접근될 수 있습니다. 또는, DOM에서 직접 접근될 수도 있습니다. 사용자 에이전트는 상태가 변경될 때 보조 기술이 알림을 받을 수 있는 방법을 제공해야 합니다(반드시 제공해야 합니다). 이는 DOM 속성 변경 이벤트나 플랫폼 접근성 API 이벤트를 통해 가능합니다.

1-3-2. Live Region Attributes

이 섹션은 풍부한 인터넷 응용 프로그램에서 실시간 영역에 특화된 속성들을 포함합니다. 이러한 속성은 어떤 요소에도 적용될 수 있습니다. 이 속성들의 목적은 요소가 포커스를 가지고 있지 않을 때도 내용 변경이 발생할 수 있음을 나타내고, 그러한 내용 업데이트를 처리하는 방법에 대한 정보를 보조 기술에 제공하는 것입니다. 일부 역할은 해당 역할에 특정한 aria-live 속성의 기본값을 지정합니다. 실시간 영역의 예로는 업데이트되는 주식 시세를 나열하는 티커 섹션이 있습니다.

• aria-atomic

• aria-busy

• aria-live

• aria-relevant

1-3-3. Drag-and-Drop Attributes

이 섹션은 드래그 앤 드롭 인터페이스 요소에 대한 정보를 나타내는 속성을 나열합니다. 여기에는 드래그 가능한 요소와 그들의 드롭 대상 등이 포함됩니다. 드롭 대상 정보는 저자에 의해 시각적으로 렌더링되고, 대체 모달리티를 통해 보조 기술에 제공될 것입니다.

• aria-dropeffect

• aria-grabbed

1-3-4. Relationship Attributes

이 섹션은 문서 구조에서 쉽게 파악할 수 없는 요소들 사이의 관계나 연관성을 나타내는 속성들을 나열합니다.

• aria-activedescendant

• aria-colcount

• aria-colindex

• aria-colspan

• aria-controls

• aria-describedby

• aria-details

• aria-errormessage

• aria-flowto

• aria-labelledby

• aria-owns

• aria-posinset

• aria-rowcount

• aria-rowindex

• aria-rowspan

• aria-setsize

1-4. 상태 및 속성 정의(모든 aria-* 속성) - 48개

스크린리더 지원여부 확인 사이트

1-4-1. aria-activedescendant (Property) - undefined (기본값)

• 용도: 컴포넌트 내에서 현재 활성화된 항목을 가리키는데 사용됩니다. 컨테이너 또는 복합 위젯 내에서 키보드 탐색에 사용됩니다.

• 적용 컴포넌트: 콤보박스(Combobox), 리스트박스(Listbox), 메뉴(Menu), 트리뷰(Treeview)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-2. aria-atomic (Property) - false (기본값) | true

• 용도: 라이브 영역에 대한 변경 사항이 전체적으로 또는 부분적으로 스크린 리더에 의해 발표되어야 하는지 여부를 나타냅니다.

• 적용 컴포넌트: 알림(Alert), 상태 표시줄(Status Bar)

• 스크린리더 지원여부: JAWS (partial), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (partial)

1-4-3. aria-autocomplete (Property) - none (기본값) | inline | list | both

• 용도: 사용자가 입력을 시작할 때 입력값을 자동 완성할 수 있는지 여부를 나타냅니다.

• 적용 컴포넌트: 입력 필드(Input Field), 콤보박스(Combobox)

• 스크린리더 지원여부: JAWS (none), NVDA (some partial support), VoiceOver (iOS) (none), TalkBack (none), Narrator (none)

1-4-4. aria-busy (State) - false (기본값) | true

• 용도: 요소가 현재 업데이트 중임을 나타내어 사용자 인터페이스의 나머지 부분이 현재 사용할 수 없거나 바쁘다는 것을 사용자에게 알립니다.

• 적용 컴포넌트: 페이지 또는 섹션 로딩 중(Loading Spinners), 데이터 그리드(Data Grids)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (none), TalkBack (none), Narrator (supported)

1-4-5. aria-checked (State) - false (기본값) | true | mixed | undefined

• 용도: 체크박스, 라디오 버튼, 또는 스위치의 체크 상태를 나타냅니다.

• 적용 컴포넌트: 체크박스(Checkbox), 라디오 버튼(Radio Button), 스위치(Switch)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-6. aria-colcount (Property) - undefined (기본값)

• 용도: 그리드나 테이블에 있는 열의 총 수를 나타냅니다.

• 적용 컴포넌트: 그리드(Grid), 테이블(Table)

• 스크린리더 지원여부: JAWS (partial), NVDA (unknown), VoiceOver (iOS) (none), TalkBack (unknown), Narrator (partial)

1-4-7. aria-colindex (Property) - undefined (기본값)

• 용도: 그리드나 테이블 내에서 셀의 열 위치를 나타냅니다.

• 적용 컴포넌트: 그리드 셀(Grid Cell), 테이블 셀(Table Cell)

• 스크린리더 지원여부: JAWS (unknown), NVDA (unknown), VoiceOver (iOS) (unknown), TalkBack (unknown), Narrator (unknown)

1-4-8. aria-colspan (Property) - undefined (기본값)

• 용도: 셀이 차지하는 열의 수를 나타냅니다. 테이블이나 그리드 구조에서 사용됩니다.

• 적용 컴포넌트: 그리드 셀(Grid Cell), 테이블 셀(Table Cell)

• 스크린리더 지원여부: JAWS (unknown), NVDA (unknown), VoiceOver (iOS) (unknown), TalkBack (unknown), Narrator (unknown)

1-4-9. aria-controls (Property) - undefined (기본값)

• 용도: 현재 요소가 제어하는 다른 요소의 ID를 참조합니다. 주로 탭, 드롭다운 메뉴, 커스텀 슬라이더 등에서 사용됩니다.

• 적용 컴포넌트: 탭(Tab), 드롭다운 메뉴(Dropdown Menu), 슬라이더(Slider)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (none), TalkBack (none), Narrator (supported)

1-4-10. aria-current (State) - false (기본값) | true | page | step | location | date | time

• 용도: 현재 요소가 페이지, 단계, 위치 등에 대한 현재 상태를 나타냅니다. 링크, 메뉴 항목, 또는 스텝 인디케이터에 사용됩니다.

• 적용 컴포넌트: 링크(Link), 메뉴 항목(Menu Item), 스텝 인디케이터(Step Indicator)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-11. aria-describedby (Property) - undefined (기본값)

• 용도: 현재 요소에 대한 추가 설명이나 설명을 제공하는 요소의 ID를 참조합니다. 복잡한 위젯, 이미지, 또는 인터랙션에 대한 설명 제공 시 사용됩니다.

• 적용 컴포넌트: 위젯(Widget), 이미지(Image), 버튼(Button)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-12. aria-details (Property) - undefined (기본값)

• 용도: 현재 요소의 복잡한 정보에 대한 상세 정보를 제공하는 요소의 ID를 참조합니다. 주로 문서, 이미지, 또는 다른 요소들에 대한 상세 설명을 제공하는 데 사용됩니다.

• 적용 컴포넌트: 문서(Document), 이미지(Image), 그래프(Graph)

• 스크린리더 지원여부: JAWS (partial), NVDA (partial), VoiceOver (iOS) (partial), TalkBack (unknown), Narrator (partial)

1-4-13. aria-disabled (State) - false (기본값) | true

• 용도: 요소가 비활성화되었음을 나타냅니다. 비활성화된 요소는 사용자 인터랙션을 받지 않습니다.

• 적용 컴포넌트: 버튼(Button), 링크(Link), 입력 필드(Input Field)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-14. aria-dropeffect (Property) - none (기본값) | copy | execute | link | move | popup

• 용도: 드래그 앤 드롭 작업 중 객체에 적용될 수 있는 효과를 나타냅니다.

• 적용 컴포넌트: 드래그 가능한 아이템(Draggable Item)

• 스크린리더 지원여부: 현재 대부분의 스크린리더와 브라우저에서는 이 속성을 지원하지 않습니다.

1-4-15. aria-errormessage (Property) - undefined (기본값)

• 용도: 요소의 에러 메시지를 제공하는 요소의 ID를 참조합니다. 주로 유효성 검사 실패 시 사용됩니다.

• 적용 컴포넌트: 입력 필드(Input Field), 폼(Form)

• 스크린리더 지원여부: JAWS (partial), NVDA (partial), VoiceOver (iOS) (partial), TalkBack (partial), Narrator (partial)

1-4-16. aria-expanded (State) - false (기본값) | true | undefined

• 용도: 요소가 확장되어 추가 정보를 표시하는지 여부를 나타냅니다. 주로 드롭다운 메뉴, 컬랩서블 섹션에서 사용됩니다.

• 적용 컴포넌트: 드롭다운 메뉴(Dropdown Menu), 컬랩서블 섹션(Collapsible Section), 트리 아이템(Tree Item)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS) (supported), TalkBack (supported), Narrator (supported)

1-4-17. aria-flowto (Property) - undefined (기본값)

• 용도: 사용자가 키보드 또는 다른 입력 메커니즘으로 요소 간을 탐색할 때, 특정 순서로 흐름을 제어합니다.

• 적용 컴포넌트: 모든 엘리먼트에 적용 가능하지만, 주로 문서 흐름을 구성할 때 사용됩니다.

• 스크린리더 지원여부: JAWS (partial), NVDA (partial), VoiceOver (iOS/macOS) (partial), TalkBack (partial), Narrator (partial)

1-4-18. aria-grabbed (Property) - undefined (기본값)

• 용도: 드래그 앤 드롭 인터페이스에서 사용자가 요소를 '잡았는지' 여부를 나타냅니다. ARIA 1.1부터는 더 이상 사용되지 않으며, 대신 HTML5 드래그 앤 드롭 API 사용이 권장됩니다.

• 적용 컴포넌트: 드래그 가능한 항목들

• 스크린리더 지원여부: 현재 대부분의 스크린리더에서는 이 속성을 직접적으로 지원하지 않습니다.

1-4-19. aria-haspopup (Property) - false (기본값) | true | menu | listbox | tree | grid | dialog

• 용도: 요소가 팝업 메뉴 또는 다른 타입의 팝업을 가지고 있는지 여부를 나타냅니다.

• 적용 컴포넌트: 버튼, 링크 또는 다른 인터랙션 요소

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-20. aria-hidden (State) - false (기본값) | true

• 용도: 요소가 스크린리더 사용자에게 숨겨져야 하는지 여부를 나타냅니다. 주로 시각적으로는 보이지만, 접근성 트리에서 제외해야 할 때 사용됩니다.

• 적용 컴포넌트: 모든 엘리먼트

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-21. aria-invalid (State) - false (기본값) | true | grammar | spelling

• 용도: 입력 필드에 입력된 데이터가 유효성 검사에 실패했음을 나타냅니다.

• 적용 컴포넌트: 입력 필드(Input Field), 텍스트 에어리어(Textarea)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-22. aria-keyshortcuts (Property) - undefined (기본값)

• 용도: 요소에 할당된 키보드 단축키를 나타냅니다.

• 적용 컴포넌트: 모든 인터랙티브 요소

• 스크린리더 지원여부: JAWS (unknown), NVDA (unknown), VoiceOver (iOS/macOS) (unknown), TalkBack (unknown), Narrator (unknown)

1-4-23. aria-label (Property) - undefined (기본값)

• 용도: 요소의 레이블을 정의합니다. 시각적 표현 없이 접근성 트리에만 레이블을 제공합니다.

• 적용 컴포넌트: 모든 엘리먼트, 특히 레이블이 시각적으로 표현되지 않는 인터랙티브 요소에 유용

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-24. aria-labelledby (Property) - undefined (기본값)

• 용도: 다른 요소가 제공하는 레이블로 요소를 식별합니다. 하나 이상의 ID를 참조할 수 있으며, 참조된 요소의 내용을 현재 요소의 레이블로 사용합니다.

• 적용 컴포넌트: 모든 엘리먼트, 특히 여러 정보 소스에서 레이블을 구성해야 하는 경우 유용

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-25. aria-level (Property) - undefined (기본값)

• 용도: 요소가 계층 구조 내에서의 레벨을 나타냅니다. 주로 헤딩이나 리스트 아이템에 사용됩니다.

• 적용 컴포넌트: 헤딩(Heading), 리스트 아이템(Listitem)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-26. aria-live (Property) - off (기본값) | assertive | polite

• 용도: 동적 콘텐츠 변경을 스크린 리더가 사용자에게 어떻게 알릴지 결정합니다. polite는 사용자가 바쁘지 않을 때, assertive는 즉시 알립니다.

• 적용 컴포넌트: 동적으로 업데이트 되는 콘텐츠(예: 라이브 티커, 알림, 폼 검증 메시지)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-27. aria-modal (Property) - false (기본값) | true

• 용도: 요소가 모달 창을 나타내는지 여부를 나타냅니다. 모달이 활성화되면 사용자는 모달을 닫기 전까지 다른 페이지 요소와 상호작용할 수 없습니다.

• 적용 컴포넌트: 대화 상자(Dialog), 경고 창(Alert)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-28. aria-multiline (Property) - false (기본값) | true

• 용도: 입력 필드가 여러 줄의 입력을 허용하는지 여부를 나타냅니다.

• 적용 컴포넌트: 텍스트 에어리어(Textarea)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-29. aria-multiselectable (Property) - false (기본값) | true

• 용도: 사용자가 여러 항목을 선택할 수 있는 컨테이너(예: 리스트박스)인지 여부를 나타냅니다.

• 적용 컴포넌트: 리스트박스(Listbox), 그리드(Grid), 트리(Tree)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-30. aria-orientation (Property) - undefined (기본값) | horizontal | vertical

• 용도: 요소의 방향(수평 또는 수직)을 나타냅니다. 슬라이더, 스크롤바, 툴바 등에서 주로 사용됩니다.

• 적용 컴포넌트: 슬라이더(Slider), 스크롤바(Scrollbar), 툴바(Toolbar)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-31. aria-owns (Property) - undefined (기본값)

• 용도: 페이지의 다른 위치에 있는 DOM 요소를 현재 요소의 자식으로 프로그래밍 방식으로 재배치합니다. 이는 DOM 구조와는 독립적으로 접근성 트리에서의 관계를 정의합니다.

• 적용 컴포넌트: 재배치가 필요한 모든 요소, 드래그 앤 드롭 구성 요소

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-32. aria-placeholder (Property) - undefined (기본값)

• 용도: 사용자 입력 필드의 플레이스홀더 또는 예시 텍스트를 정의합니다. 입력 필드가 비어 있을 때 표시되는 짧은 힌트나 지침을 제공합니다.

• 적용 컴포넌트: 텍스트 입력 필드(Text Input), 텍스트 에어리어(Textarea)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-33. aria-posinset (Property) - undefined (기본값)

• 용도: 요소가 세트 내에서의 위치를 나타냅니다. 세트의 항목 수가 동적으로 변경되거나 모든 항목이 동시에 표시되지 않을 때 유용합니다.

• 적용 컴포넌트: 리스트 항목(Listitem), 트리 아이템(Treeitem)

• 스크린리더 지원여부: JAWS (partial), NVDA (partial), VoiceOver (iOS/macOS) (partial), TalkBack (partial), Narrator (partial)

1-4-34. aria-pressed (State) - false (기본값) | true | mixed | undefined

• 용도: 토글 버튼이 눌렸는지 여부를 나타냅니다. mixed는 토글 버튼이 부분적으로 활성화되었음을 나타낼 때 사용됩니다.

• 적용 컴포넌트: 버튼(Button)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-35. aria-readonly (Property) - false (기본값) | true

• 용도: 요소가 읽기 전용인지 여부를 나타냅니다. 사용자가 수정할 수 없는 입력 필드에 주로 사용됩니다.

• 적용 컴포넌트: 입력 필드(Input Field), 그리드 셀(Grid Cell)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-36. aria-relevant (Property) - additions (기본값) | additions text | all | removals | text

• 용도: 동적 콘텐츠 변경이 발생할 때 스크린 리더가 사용자에게 어떻게 알릴지 결정합니다. 변경의 유형(추가, 제거, 텍스트 변경 등)에 따라 다양한 값이 사용될 수 있습니다.

• 적용 컴포넌트: 동적으로 업데이트되는 콘텐츠 영역

• 스크린리더 지원여부: JAWS (partial), NVDA (partial), VoiceOver (iOS/macOS) (partial), TalkBack (partial), Narrator (partial)

1-4-37. aria-required (Property) - false (기본값) | true

• 용도: 사용자 입력이 필요한 필드임을 나타냅니다. 주로 폼 필드에서 필수 입력 값을 지정할 때 사용됩니다.

• 적용 컴포넌트: 입력 필드(Input Field), 체크박스(Checkbox), 라디오 버튼(Radio Button), 기타 필수 입력 요소

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-38. aria-roledescription (Property) - undefined (기본값)

• 용도: 요소의 역할을 설명하는 사용자 정의 문자열을 제공합니다. 기본적으로 요소의 역할을 재정의하거나 보다 구체적인 설명이 필요할 때 사용됩니다.

• 적용 컴포넌트: 모든 역할(Role)에 적용 가능

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (partial), TalkBack (partial), Narrator (partial)

1-4-39. aria-rowcount (Property) - undefined (기본값)

• 용도: 그리드나 테이블에 있는 행의 총 수를 나타냅니다. 동적 콘텐츠의 경우, 전체 행 수를 예측할 수 없을 때 1로 설정될 수 있습니다.

• 적용 컴포넌트: 그리드(Grid), 테이블(Table)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (partial), TalkBack (unknown), Narrator (unknown)

1-4-40. aria-rowindex (Property) - undefined (기본값)

• 용도: 요소가 속한 행의 인덱스(위치)를 나타냅니다. 테이블이나 그리드에서 특정 행의 위치를 지정할 때 사용됩니다.

• 적용 컴포넌트: 테이블 행(Row), 그리드 셀(Grid Cell)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (partial), TalkBack (unknown), Narrator (unknown)

1-4-41. aria-rowspan (Property) - undefined (기본값)

• 용도: 테이블 셀이 차지하는 행의 수를 나타냅니다. 테이블 레이아웃에서 셀이 여러 행에 걸쳐 있는 경우 사용됩니다.

• 적용 컴포넌트: 테이블 셀(Table Cell)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (partial), TalkBack (unknown), Narrator (unknown)

1-4-42. aria-selected (State) - false (기본값) | true | undefined

• 용도: 항목(예: 목록상자의 항목, 탭 패널의 탭 등)이 선택되었는지 여부를 나타냅니다.

• 적용 컴포넌트: 탭(Tab), 트리 아이템(Treeitem), 옵션(Option)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-43. aria-setsize (Property) - undefined (기본값)

• 용도: 세트(예: 리스트박스의 옵션, 트리의 트리 아이템 등) 내의 항목 총 수를 나타냅니다.

• 적용 컴포넌트: 리스트 아이템(Listitem), 트리 아이템(Treeitem), 옵션(Option)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-44. aria-sort (Property) - none (기본값) | ascending | descending | other

• 용도: 테이블 헤더 셀이나 그리드 셀에 적용하여 해당 열의 정렬 방식을 나타냅니다.

• 적용 컴포넌트: 테이블 헤더(Table Header), 그리드 셀(Grid Cell)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (unknown), Narrator (unknown)

1-4-45. aria-valuemax (Property) - undefined (기본값)

• 용도: 슬라이더, 스크롤바 또는 프로그레스바와 같은 범위 위젯의 최대 값입니다.

• 적용 컴포넌트: 슬라이더(Slider), 프로그레스바(Progressbar), 스크롤바(Scrollbar)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-46. aria-valuemin (Property) - undefined (기본값)

• 용도: 범위 위젯의 최소 값입니다. 슬라이더나 프로그레스바의 시작 값을 나타냅니다.

• 적용 컴포넌트: 슬라이더(Slider), 프로그레스바(Progressbar), 스크롤바(Scrollbar)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-47. aria-valuenow (Property) - undefined (기본값)

• 용도: 범위 위젯의 현재 값입니다. 사용자가 조정할 수 있는 위젯의 실시간 값을 나타냅니다.

• 적용 컴포넌트: 슬라이더(Slider), 프로그레스바(Progressbar), 스크롤바(Scrollbar)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-4-48. aria-valuetext (Property) - undefined (기본값)

• 용도: 범위 위젯의 현재 값이 숫자가 아니거나 숫자만으로는 충분한 정보를 제공하지 못할 때 사용하는 문자열 값입니다. 예를 들어, 볼륨 조절 슬라이더가 "높음", "중간", "낮음"과 같은 값을 가질 수 있습니다.

• 적용 컴포넌트: 슬라이더(Slider), 프로그레스바(Progressbar), 스크롤바(Scrollbar)

• 스크린리더 지원여부: JAWS (supported), NVDA (supported), VoiceOver (iOS/macOS) (supported), TalkBack (supported), Narrator (supported)

1-5. 용어 설명 - IDREF

IDREF는 HTML에서 사용되는 용어로, "ID Reference"의 약자입니다. 이는 특정 HTML 요소의 id 속성 값에 대한 참조를 의미합니다. 즉, 어떤 속성의 값으로 IDREF를 사용한다는 것은, 해당 속성이 다른 요소의 id 값을 참조하여 그 요소를 식별하게 됨을 의미합니다.

예를 들어, aria-activedescendant 속성의 경우, 이 속성이 설정된 요소는 키보드 네비게이션을 통해 현재 활성화 또는 선택된 상태를 가지는 자식 요소의 id 값을 참조합니다. 이를 통해 사용자가 키보드로 네비게이션할 때, 활성화된 요소를 보조 기술을 통해 식별하고 상호작용할 수 있게 됩니다.

<div role="listbox" aria-activedescendant="listitem3">
  <div id="listitem1" role="option">Item 1</div>
  <div id="listitem2" role="option">Item 2</div>
  <div id="listitem3" role="option">Item 3</div>
  <div id="listitem4" role="option">Item 4</div>
</div>

위 예제에서, div 요소는 role="listbox"를 가지며, aria-activedescendant 속성을 사용하여 현재 활성화된 항목을 id="listitem3"으로 지정합니다. 따라서 "Item 3"이 현재 선택되어 있는 상태임을 나타냅니다. IDREF를 사용함으로써, 해당 listbox는 "Item 3"이 활성 항목임을 보조 기술에 명확하게 알릴 수 있습니다.