컴포넌트의 Accessibility Key Action은 각 컴포넌트 도움말에 포함된 내용입니다. 이번 장에서는 컴포넌트 별 동작을 쉽게 확인할 수 있게 같은 내용을 정리하고 있습니다.
센스리더 가상커서 활성화 시에는 키 이벤트를 센스리더에서 처리합니다.
Accessibility Key Action과 일부 동작이 달라질 수 있습니다.
이번 장에 설명하고 있는 내용은 최신 버전 도움말을 반영하고 있습니다.
혹 내용이 다른 경우 도움말 내용을 참조해 주세요.
컴포넌트 도움말을 보면 Basic Key Action이라는 항목이 있습니다. 프로젝트 생성 후 접근성 설정을 하지 않은 상태에서 컴포넌트에서 지원하는 키보드 동작을 설명합니다. 위의 그림은 Radio 컴포넌트에 대한 설명인데 탭 키를 입력해 Radio 컴포넌트로 포커스를 이동한 상태에서 좌우방향키를 입력해 아이템 항목을 선택할 수 있습니다.
프로젝트에서 접근성을 활성화한 경우에는 조금 동작이 달라집니다.
Basic Key Action에서는 아이템 이동 시 눈으로 항목이 보이기 때문에 항목 이동 시 바로 선택이 되는데 접근성을 활성화하고 스크린 리더를 사용하는 경우에는 아이템 이동 시 아이템 정보를 읽어주고 사용자가 해당 아이템을 선택할지 여부를 결정하게 됩니다. 또한 선택상자 이동과 아이템 이동이 같은 키(↑ ↓)를 사용할 수 있게 설정되어 있어서 사용자가 조건에 따라 키를 바꾸지 않고 하나의 키 입력 방식으로 여러 동작을 처리할 수 있게 지원합니다.
표에서 Key 칼럼은 Basic Key Action, A11y Key 칼럼은 Accessibility Key Action을 의미합니다.
선택상자 이동
접근성 활성화 시 컴포넌트 기본 동작입니다. Static 컴포넌트처럼 포커스를 가지지 않는 컴포넌트도 선택상자 이동을 통해 접근할 수 있습니다.
Action | Key | A11y Key | Description |
|---|---|---|---|
선택상자 이동 | - | ↑ ↓ | Tab Order가 이전/다음인 컴포넌트로 선택상자가 이동합니다. |
접근성 기능 활성화 시 Key Action 같은 컴포넌트
Button
Action | Key | A11y Key | Description |
|---|---|---|---|
Click | Enter | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
Click | Space | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
CheckBox
Action | Key | A11y Key | Description |
|---|---|---|---|
체크값 변경 | Space | 체크가 설정되어 있으면 체크를 해제하고, 체크가 해제되어 있으면 체크를 설정합니다. | |
Edit
Action | Key | A11y Key | Description |
|---|---|---|---|
캐럿 이동 | ← → | 캐럿이 표시되고 있을 때 캐럿이 좌/우 방향으로 이동됩니다. | |
텍스트 선택 | Shift + ← → | 캐럿이 표시되고 있을 때 입력된 텍스트가 좌/우 방향으로 선택됩니다. | |
FileDownload
Action | Key | A11y Key | Description |
|---|---|---|---|
Click | Enter | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
Click | Space | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
ImageViewer
Action | Key | A11y Key | Description |
|---|---|---|---|
Click | Enter | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
Click | Space | 클릭 처리되어 onclick 이벤트가 발생합니다. | |
MaskEdit
Action | Key | A11y Key | Description |
|---|---|---|---|
캐럿 이동 | ← → | 캐럿이 표시되고 있을 때 캐럿이 좌/우 방향으로 이동됩니다. | |
텍스트 선택 | Shift + ← → | 캐럿이 표시되고 있을 때 입력된 텍스트가 좌/우 방향으로 선택됩니다. | |
Div
Action | Key | A11y Key | Description |
|---|---|---|---|
스크롤 이동 | Ctrl + ↑ ↓ ← → | Div 또는 자식 컴포넌트에 포커스가 있고, Div 에 스크롤이 있을 때 입력된 방향키 방향으로 스크롤이 이동합니다. | |
PopupDiv
Action | Key | A11y Key | Description |
|---|---|---|---|
스크롤 이동 | Ctrl + ↑ ↓ ← → | PopupDiv 또는 자식 컴포넌트에 포커스가 있고, PopupDiv 에 스크롤이 있을 때 입력된 방향키 방향으로 스크롤이 이동합니다. | |
Tab
Action | Key | A11y Key | Description |
|---|---|---|---|
TabPage 이동 | Ctrl + Tab | 화면에 표시된 TabPage 를 변경합니다. | |
TabPage 이동 | ← → | focusacceptable 속성값이 "true" 이고, TabButton 에 포커스가 있을 때 화면에 표시된 TabPage 를 변경합니다. | |
TabButton 클릭 | Ctrl + Backspace | 화면에 표시된 TabPage 의 TabButton 이 클릭 처리되어 onextrabuttonclick 이벤트가 발생합니다. | |
TabpageControl
Action | Key | A11y Key | Description |
|---|---|---|---|
스크롤 이동 | Ctrl + ↑ ↓ ← → | TabPage 또는 자식 컴포넌트에 포커스가 있고, TabPage 에 스크롤이 있을 때 입력된 방향키 방향으로 스크롤이 이동합니다 | |
View
Action | Key | A11y Key | Description |
|---|---|---|---|
스크롤 이동 | Ctrl + ↑ ↓ ← → | View 또는 자식 컴포넌트에 포커스가 있고, View 에 스크롤이 있을 때 입력된 방향키 방향으로 스크롤이 이동합니다. | |
접근성 기능 활성화 시 Key Action 다른 컴포넌트
Calendar
Action | Key | A11y Key | Description |
|---|---|---|---|
DatePicker 열기 | Alt + ↓ 또는 Option + ↓ | type 속성값이 "normal" 일 때 팝업달력(DatePicker)이 표시됩니다. | |
DatePicker 닫기 | Esc | type 속성값이 "normal" 일 때 열려있는 팝업달력(DatePicker)을 닫습니다. | |
날짜 변경 | ↑ ↓ | Ctrl + ↑ ↓ | type 속성값이 "spin" 일 때 캐럿위치의 년/월/일 값을 변경합니다. 년/월/일 이 가질 수 있는 최저/최고값에 도달하면 반대값(최저면 최고값, 최고면 최저값)으로 변경됩니다. |
날짜 결정 | Enter | type 속성값이 "normal" 또는 "monthonly" 일 때 팝업달력(DatePIcker)에 선택된 날짜를 value 속성에 반영합니다. | |
DatePicker 날짜이동 | ↑ ↓ ← → | ← → | DatePicker 에서 날짜가 이동됩니다. 선택된 날짜를 결정하려면 Enter 를 입력하여야 합니다. 첫 날짜에서 상/좌 방향키 또는 마지막 날짜에서 하/우 방향키 입력 시 월이 전환됩니다. |
DatePicker 날짜이동 | Ctrl + ← → | DatePicker 의 월이 이동됩니다. | |
DatePicker 날짜이동 | Ctrl + ↑ ↓ | DatePicker 의 연도가 이동됩니다. | |
CheckBoxSet
Action | Key | A11y Key | Description |
|---|---|---|---|
선택상자 이동 | - | 상하방향키 | 아이템 항목을 이동합니다. 이동된 위치의 아이템은 자동으로 선택되지 않습니다. 이동된 위치의 아이템을 선택하려면 Space 를 입력하여야 합니다. 첫번째 또는 마지막 아이템에서 위/아래 방향키 입력 시 Tab Order 가 이전/다음인 컴포넌트로 선택상자가 이동합니다. |
아이템 이동 | 방향키 | 좌우방향키 | 아이템 항목을 순서대로 이동합니다. 이동된 위치의 아이템은 자동으로 선택되지 않습니다. 이동된 위치의 아이템을 선택하려면 Space 를 입력하여야 합니다. |
아이템 결정/결정취소 | Space | 이동된 위치의 아이템을 선택 결정하여 value 속성에 반영합니다. | |
다중아이템 결정 | Shift + 방향키 | - | Shift+방향키가 시작된 아이템을 기준으로 아이템이 연속적으로 선택됩니다. |
Combo
Action | Key | A11y Key | Description |
|---|---|---|---|
ComboList 열기 | Alt + ↓ 또는 Option + ↓ | ComboList 가 표시됩니다. | |
ComboList 닫기 | Esc | 열려있는 ComboList를 닫습니다. | |
아이템 이동 | ↑ ↓ | Ctrl + ↑ ↓ | 아이템 항목을 이동합니다. 이동된 위치의 아이템을 결정하려면 Enter 키를 입력하여야 합니다. |
아이템 결정 | Enter | 이동된 위치의 아이템을 선택 결정하여 value 속성에 반영합니다. | |
스크롤 이동(페이지) | PageUp PageDown | ComboList에 vscrollbar가 활성화됐을 때 페이지 단위(화면에 표시되는 아이템 개수)로 스크롤합니다. 이동된 위치의 아이템을 결정하려면 Enter 키를 입력해야 합니다. | |
스크롤 이동(최상단/최하단) | Home End | ComboList에 vscrollbar가 활성화됐을 때 최상단 또는 최하단으로 스크롤합니다. 이동된 위치의 아이템을 결정하려면 Enter 키를 입력해야 합니다. type 속성값이 "dropdown"일때만 스크롤 동작에 반영되며 그 외의 경우에는 comboedit 캐럿 위치에 반영됩니다. | |
FileUpload
Action | Key | A11y Key | Description |
|---|---|---|---|
ItemButton 이동 | Tab | 아이템 순서대로 FileUploadItemButton 에 포커스가 이동합니다. | |
선택상자 이동 | - | ↓ | 선택상자가 FileUploadItemEdit 에 있다면 FileUploadItemButton 으로 선택상자가 이동합니다. 선택상자가 FileUploadItemButton 에 있다면 다음 아이템의 FileUploadItemEdit 로 선택상자가 이동합니다. 선택상자가 마지막 아이템의 FileUploadItemButton 에 있다면 Tab Order 가 다음인 컴포넌트로 선택상자가 이동합니다. |
선택상자 이동 | - | ↑ | 선택상자가 FileUploadItemButton 에 있다면 FileUploadItemEdit 로 선택상자가 이동합니다. 선택상자가 FileUploadItemEdit 에 있다면 이전 아이템의 FileUploadItemButton 으로 선택상자가 이동합니다. 선택상자가 첫번째 아이템의 FileUploadItemEdit 에 있다면 Tab Order 가 이전인 컴포넌트로 선택상자가 이동합니다. |
ItemButton Click | Enter | 선택되어 있는 아이템이 클릭 처리되어 onfindclick 이벤트가 발생합니다. | |
ItemButton Click | Space | 선택되어 있는 아이템이 클릭 처리되어 onfindclick 이벤트가 발생합니다. | |
스크롤 이동(페이지) | PageUp PageDown | vscrollbar가 활성화됐을 때 페이지 단위(화면에 표시되는 아이템 개수)로 스크롤합니다. | |
Grid
Action | Key | A11y Key | Description |
|---|---|---|---|
Cell 선택이동 | Tab | Body 밴드 영역에서 Tab 이동 순서에 따라 값을 수정할 수 있는 다음 Cell로 선택이 이동합니다. | |
Cell 선택이동 | ↑ ↓ ← → | Body 밴드 영역에서 입력된 키 방향으로 선택이 이동합니다. selecttype 속성값에 따라 선택되는 영역이 결정됩니다. 모든 밴드 영역에서 입력된 키 방향으로 선택상자가 이동합니다. Body 밴드일 경우 selecttype 속성값에 따라 선택되는 영역이 결정됩니다. | |
Cell 선택이동 | Shift + ↑ ↓ ← → | Body 밴드 영역에서 현재 Cell 을 포함하여 입력된 키 방향으로 선택이 확장됩니다. selecttype 속성값이 "multirow", "area", "multiarea" 이 아니면 Shift 없는 방향키 입력과 동일하게 동작합니다. selecttype 속성값에 따라 선택되는 영역이 결정됩니다. | |
Cell 활성화 | Enter | 선택된 Cell 이 에디트가 가능하면 입력창이 활성화 됩니다. 입력창이 활성화 되어 있는 Cell 이면 입력창이 비활성화 됩니다. | |
Cell 활성화 | 키 입력 | autoenter 속성값이 "key" 일 때 선택된 Cell 이 에디트가 가능하면 입력창이 활성화 됩니다. | |
Cell 클릭 | Space | Cell 이 Button 형태일 때 클릭 처리되어 oncellclick 이벤트가 발생합니다. | |
체크값 변경 | Space | Cell 이 CheckBox 형태일 때 체크값을 토글합니다. | |
아이템 결정 | Space | Cell 이 radioitem 형태일 때 아이템을 선택상태로 변경하고 text 속성에 반영합니다. | |
DatePicker 열기 | Alt + ↓ 또는 Option + ↓ | Cell 이 Calendar 형태일 때 팝업달력(DatePicker)이 표시됩니다. | |
DatePicker 닫기 | Esc | Cell 이 Calendar 형태일 때 열려있는 팝업달력(DatePicker)을 닫습니다. | |
ComboList 열기 | Alt + ↓ 또는 Option + ↓ | Cell 이 Combo 형태일 때 ComboList 가 표시됩니다. | |
ComboList 닫기 | Esc | Cell 이 Combo 형태일 때 열려있는 ComboList를 닫습니다. | |
트리 확장/축소 | ← → | treeuseexpandkey 속성값이 "true" 일 때 Tree Cell 이 확장/축소 됩니다. | |
트리 확장/축소 | Alt + ← → 또는 Option + ← → | treeuseexpandkey 속성값이 "false" 일 때 Tree Cell 이 확장/축소 됩니다. | |
스크롤 이동 | Ctrl + ↑ ↓ ← → | Grid 에 스크롤이 있을 때 입력된 방향키 방향으로 스크롤이 이동합니다 | |
스크롤 이동 | PageUp PageDown | Grid 에 스크롤이 있을 때 페이지 단위로 수직스크롤이 이동합니다 | |
ListBox
Action | Key | A11y Key | Description |
|---|---|---|---|
아이템 이동 | ↑ ↓ | 아이템 항목을 이동합니다. 이동된 위치의 아이템이 자동으로 선택됩니다. 첫번째 또는 마지막 아이템에서 ↑ ↓ 방향키 입력 시 마지막 또는 첫번째 아이템으로 이동합니다. 아이템 항목을 이동합니다. 이동된 위치의 아이템은 자동으로 선택되지 않습니다. 이동된 위치의 아이템을 선택하려면 Space 또는 Enter 키를 입력해야 합니다. 첫번째 또는 마지막 아이템에서 ↑ ↓ 방향키 입력 시 Tab Order 가 이전/다음인 컴포넌트로 선택상자가 이동합니다. | |
아이템 결정 | Space | 이동된 위치의 아이템을 선택 결정하여 value 속성에 반영합니다. | |
스크롤 이동 | Ctrl + ↑ ↓ ← → | vscrollbar가 활성화됐을 때 입력된 방향키 방향으로 스크롤합니다. | |
스크롤 이동(페이지) | PageUp PageDown | vscrollbar가 활성화됐을 때 페이지 단위(화면에 표시되는 아이템 개수)로 스크롤합니다. 이동된 위치의 아이템이 자동으로 선택됩니다. 이동된 위치의 아이템은 자동으로 선택되지 않습니다. 이동된 위치의 아이템을 선택하려면 Space 또는 Enter 키를 입력해야 합니다. | |
다중아이템 결정 | Shift + ↑ ↓ | - | multiselect 속성값이 true 일 때 다중아이템을 선택합니다. Shift + ↑ ↓ 방향키가 시작된 아이템을 기준으로 위 또는 아래 아이템이 연속적으로 선택됩니다. |
Menu
Action | Key | A11y Key | Description |
|---|---|---|---|
메뉴 이동 | ↑ ↓ | ← → | 메뉴 또는 서브메뉴 항목을 이동합니다. 이동된 위치의 메뉴 항목을 실행하려면 Enter 를 입력하여야 합니다. |
메뉴 실행 | Enter | 이동된 위치의 메뉴를 실행하여 onmenuclick 이벤트가 발생합니다. 이동된 위치의 메뉴에 서브메뉴가 있을 경우 서브메뉴가 확장됩니다. | |
서브메뉴 확장 | ← → | - | 서브메뉴를 확장합니다. |
서브메뉴 닫기 | Esc | 서브메뉴로 표시된 메뉴를 닫습니다. | |
MultiCombo
Action | Key | A11y Key | Description |
|---|---|---|---|
MultiComboList 열기 | Alt + ↓ 또는 Option + ↓ | MultiComboList 가 표시됩니다. | |
아이템 이동 | ↑ ↓ | Ctrl + ↑ ↓ | 아이템 항목을 이동합니다. 이동된 위치의 아이템을 결정하려면 Ctrl + Space 를 입력하여야 합니다. 이동된 위치의 아이템을 결정하려면 Enter 를 입력하여야 합니다. |
아이템 이동취소 | Esc | 아이템 항목을 이동했을 때 원래 위치로 이동을 취소합니다. Enter 키 입력으로 이동된 위치의 아이템이 결정된 상태에서는 위치이동을 취소할 수 없습니다. | |
아이템 결정 | Enter | 이동된 위치의 아이템을 선택 결정하여 value 속성에 반영합니다. | |
아이템 선택/선택취소 | Ctrl + Space | 하나의 아이템을 선택하거나 선택 취소합니다. | |
전체 선택/선택취소 | Alt + A | 전체 아이템을 선택하거나 선택 취소합니다. | |
영역 선택/선택취소 | Shift + ↑ ↓ | 연속된 영역의 아이템을 선택하거나 선택 취소합니다. | |
스크롤 이동(페이지) | PageUp PageDown | MultiComboList에 vscrollbar가 활성화됐을 때 페이지 단위(화면에 표시되는 아이템 개수)로 스크롤합니다. 이동된 위치의 아이템을 결정하려면 Ctrl + Space 키를 입력해야 합니다. 이동된 위치의 아이템을 결정하려면 Enter 키를 입력해야 합니다. | |
스크롤 이동(최상단/최하단) | Home End | MultiComboList에 vscrollbar가 활성화됐을 때 최상단 또는 최하단으로 스크롤합니다. 이동된 위치의 아이템을 결정하려면 Enter 키를 입력해야 합니다. type 속성값이 "dropdown"일때만 스크롤 동작에 반영되며 그 외의 경우에는 multicomboedit 캐럿 위치에 반영됩니다. | |
PopupMenu
Action | Key | A11y Key | Description |
|---|---|---|---|
메뉴 이동 | ↑ ↓ | ← → | 팝업메뉴 또는 서브메뉴 항목을 이동합니다. 이동된 위치의 메뉴 항목을 실행하려면 Enter 를 입력하여야 합니다. |
메뉴 실행 | Enter | 이동된 위치의 메뉴를 실행하여 onmenuclick 이벤트가 발생합니다. 이동된 위치의 메뉴에 서브메뉴가 있을 경우 서브메뉴가 확장됩니다. | |
서브메뉴 확장 | ← → | - | 서브메뉴를 확장합니다. |
서브메뉴 닫기 | Esc | 서브메뉴로 표시된 메뉴를 닫습니다. PopupMenu 는 닫히지 않습니다. | |
Radio
Action | Key | A11y Key | Description |
|---|---|---|---|
아이템 선택이동 | ← → | 아이템 항목을 순서대로 이동합니다. 이동된 아이템이 선택된 상태로 변경되고 변경된 값을 value 속성에 반영합니다. | |
선택상자 이동 | - | ↑ ↓ | 아이템 항목을 이동합니다. 이동된 위치의 아이템은 자동으로 선택되지 않습니다. 이동된 위치의 아이템을 선택하려면 Space 키를 입력하여야 합니다. 첫번째 또는 마지막 아이템에서 ↑ ↓ 방향키 입력 시 Tab Order 가 이전/다음인 컴포넌트로 선택상자가 이동합니다. |
아이템 결정 | - | Space | 이동된 위치의 아이템을 선택 결정하여 value 속성에 반영합니다. |
Spin
Action | Key | A11y Key | Description |
|---|---|---|---|
값 변경 | ↑ ↓ | Ctrl + ↑ ↓ | Spin 의 value 값을 increment 속성값만큼 증가 또는 감소 시킵니다. |