설계 패턴 예제 색인

이 페이지는 WAI-ARIA 작성 방법 1.2.에 포함 된 ARIA 설계 패턴의 예제 구현의 다음 색인을 포함합니다.

역할(role)별 예제
속성(property) 및 상태(state)별 예제

역할(role)별 예제

참고: 약어 HC는 예제가 고대비(High Contrast)를 지원함을 의미합니다.

역할	예제
`alert`	알림(alert) 예제 모달 대화상자 예제
`alertdialog`	모달 대화상자 예제
`article`	피드 예제
`banner`	Navigation Menubar (HC) Navigation Treeview (HC) Banner Landmark
`button`	버튼 예제 (IDL 버전) 버튼 예제
`cell`	Table
`checkbox`	체크상자 예제 (혼합 상태) (HC) 체크상자 예제 (이중 상태) (HC)
`columnheader`	Table
`combobox`	목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제
`complementary`	Complementary Landmark
`contentinfo`	Navigation Menubar (HC) Navigation Treeview (HC) Contentinfo Landmark
`dialog`	날짜 선택 콤보박스 예제 날짜 선택 대화상자 예제 모달 대화상자 예제
`feed`	피드 예제
`form`	Form Landmark
`grid`	날짜 선택 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 날짜 선택 대화상자 예제 Data Grid Layout Grid
`gridcell`	그리드 팝업이 있는 편집 가능한 콤보박스 예제 Layout Grid Treegrid Email Inbox
`group`	슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 체크상자 예제 (이중 상태) (HC) Listbox with Grouped Options Editor Menubar (HC) Color Viewer Slider (HC) Date Picker Spin Button Switch Using HTML Button (HC) File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview (HC)
`link`	Link
`listbox`	목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 선택 전용 콤보박스 예제 (Deprecated) Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox
`main`	Main Landmark
`menu`	Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Editor Menubar (HC) Navigation Menubar (HC) Toolbar
`menubar`	Editor Menubar (HC) Navigation Menubar (HC)
`menuitem`	Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Editor Menubar (HC) Navigation Menubar (HC)
`menuitemcheckbox`	Editor Menubar
`menuitemradio`	Editor Menubar (HC) Toolbar
`meter`	Meter
`navigation`	Navigation Menubar (HC) Navigation Treeview (HC) Navigation Landmark
`none`	Navigation Menu Button (HC) Navigation Menubar (HC) Rating Radio Group (HC) Horizontal Multi-Thumb Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Navigation Treeview (HC)
`option`	목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 선택 전용 콤보박스 예제 (Deprecated) Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox
`radio`	Radio Group Using aria-activedescendant (HC) Rating Radio Group (HC) Radio Group Using Roving tabindex (HC) Toolbar
`radiogroup`	Radio Group Using aria-activedescendant (HC) Rating Radio Group (HC) Radio Group Using Roving tabindex (HC) Toolbar
`region`	아코디언 예제 슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 Navigation Menubar (HC) Navigation Treeview (HC) Region Landmark
`row`	그리드 팝업이 있는 편집 가능한 콤보박스 예제 Layout Grid Table Treegrid Email Inbox
`rowgroup`	Table
`search`	Search Landmark
`separator`	Editor Menubar
`slider`	Color Viewer Slider (HC) Horizontal Multi-Thumb Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC)
`spinbutton`	Date Picker Spin Button Toolbar
`switch`	Switch Using HTML Button (HC) Switch Using HTML Checkbox Input (HC) Switch (HC)
`tab`	슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC)
`table`	Table
`tablist`	슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC)
`tabpanel`	슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC)
`toolbar`	Toolbar
`tree`	File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview (HC)
`treegrid`	Treegrid Email Inbox
`treeitem`	File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview (HC)

속성(property) 및 상태(state)별 예제

참고: 약어 HC는 예제가 고대비(High Contrast)를 지원함을 의미합니다.

속성 및 상태	예제
`aria-activedescendant`	목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 (Deprecated) Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Actions Menu Button Using aria-activedescendant (HC) Radio Group Using aria-activedescendant (HC)
`aria-atomic`	알림(alert) 예제
`aria-autocomplete`	목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제
`aria-busy`	피드 예제
`aria-checked`	체크상자 예제 (혼합 상태) (HC) 체크상자 예제 (이중 상태) (HC) Editor Menubar (HC) Radio Group Using aria-activedescendant (HC) Rating Radio Group (HC) Radio Group Using Roving tabindex (HC) Switch Using HTML Button (HC) Switch (HC) Toolbar
`aria-colcount`	Data Grid
`aria-colindex`	Data Grid
`aria-controls`	아코디언 예제 슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 체크상자 예제 (혼합 상태) (HC) 목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 자주 묻는 질문 답변을 위한 디스클로저 (노출/숨김) 예제 이미지 설명에 대한 디스클로저 (노출/숨김) 예제 최상위 링크가 있는 디스클로저 내비게이션 메뉴 예제 디스클로저 내비게이션 메뉴 예제 Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC) Toolbar
`aria-current`	최상위 링크가 있는 디스클로저 내비게이션 메뉴 예제 디스클로저 내비게이션 메뉴 예제 Navigation Menubar (HC) Navigation Treeview (HC)
`aria-describedby`	날짜 선택 콤보박스 예제 모달 대화상자 예제 날짜 선택 대화상자 예제 모달 대화상자 예제 피드 예제 Table
`aria-disabled`	모달 대화상자 예제 Editor Menubar (HC) Toolbar
`aria-expanded`	아코디언 예제 목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 자주 묻는 질문 답변을 위한 디스클로저 (노출/숨김) 예제 이미지 설명에 대한 디스클로저 (노출/숨김) 예제 최상위 링크가 있는 디스클로저 내비게이션 메뉴 예제 디스클로저 내비게이션 메뉴 예제 (Deprecated) Collapsible Dropdown Listbox Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Editor Menubar (HC) Navigation Menubar (HC) Toolbar Treegrid Email Inbox File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview (HC)
`aria-haspopup`	날짜 선택 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 (Deprecated) Collapsible Dropdown Listbox Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Editor Menubar (HC) Navigation Menubar (HC) Toolbar
`aria-hidden`	버튼 예제 (IDL 버전) 버튼 예제 Editor Menubar (HC) Color Viewer Slider (HC) Horizontal Multi-Thumb Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Switch Using HTML Button (HC) Switch Using HTML Checkbox Input (HC) Switch (HC) Sortable Table (HC) Toolbar
`aria-label`	슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 날짜 선택 대화상자 예제 Link Editor Menubar (HC) Navigation Menubar (HC) Rating Radio Group (HC) Horizontal Multi-Thumb Slider (HC) Date Picker Spin Button Table Toolbar Treegrid Email Inbox Navigation Treeview (HC)
`aria-labelledby`	아코디언 예제 체크상자 예제 (이중 상태) (HC) 날짜 선택 콤보박스 예제 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 모달 대화상자 예제 날짜 선택 대화상자 예제 모달 대화상자 예제 피드 예제 Data Grid Layout Grid (Deprecated) Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Actions Menu Button Using aria-activedescendant (HC) Actions Menu Button Using element.focus() (HC) Navigation Menu Button (HC) Navigation Menubar (HC) Meter Radio Group Using aria-activedescendant (HC) Rating Radio Group (HC) Radio Group Using Roving tabindex (HC) Color Viewer Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Switch Using HTML Button (HC) Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC) File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties Navigation Treeview (HC) Complementary Landmark Form Landmark Main Landmark Navigation Landmark Region Landmark Search Landmark
`aria-level`	Treegrid Email Inbox File Directory Treeview Using Declared Properties
`aria-live`	알림(alert) 예제 슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 날짜 선택 콤보박스 예제 날짜 선택 대화상자 예제
`aria-modal`	날짜 선택 콤보박스 예제 모달 대화상자 예제 날짜 선택 대화상자 예제 모달 대화상자 예제
`aria-multiselectable`	Listboxes with Rearrangeable Options
`aria-orientation`	Vertical Temperature Slider
`aria-owns`	Navigation Treeview
`aria-posinset`	피드 예제 Treegrid Email Inbox File Directory Treeview Using Declared Properties
`aria-pressed`	버튼 예제 (IDL 버전) 버튼 예제 Toolbar
`aria-roledescription`	슬라이드 컨트롤 버튼을 가진 자동 순환 이미지 캐러셀 예제 슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제
`aria-rowcount`	Data Grid Layout Grid
`aria-rowindex`	Data Grid Layout Grid
`aria-selected`	슬라이드 컨트롤 탭을 가진 자동 순환 이미지 캐러셀 예제 목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제 목록 자동완성이 있는 편집 가능한 콤보박스 예제 자동완성이 없는 편집 가능한 콤보박스 날짜 선택 콤보박스 예제 선택 전용 콤보박스 예제 그리드 팝업이 있는 편집 가능한 콤보박스 예제 날짜 선택 대화상자 예제 (Deprecated) Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Scrollable Listbox Tabs with Automatic Activation (HC) Tabs with Manual Activation (HC) File Directory Treeview Using Computed Properties File Directory Treeview Using Declared Properties
`aria-setsize`	피드 예제 Treegrid Email Inbox File Directory Treeview Using Declared Properties
`aria-sort`	Data Grid Sortable Table (HC)
`aria-valuemax`	Meter Color Viewer Slider (HC) Horizontal Multi-Thumb Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Toolbar
`aria-valuemin`	Meter Color Viewer Slider (HC) Horizontal Multi-Thumb Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Toolbar
`aria-valuenow`	Meter Color Viewer Slider (HC) Horizontal Multi-Thumb Slider (HC) Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Toolbar
`aria-valuetext`	Rating Slider (HC) Media Seek Slider (HC) Vertical Temperature Slider (HC) Date Picker Spin Button Toolbar