접근성
Wijmo 컨트롤에는 키보드, 스크린 리더 및 기타 보조 기술을 사용하는 사람들을 위한 애플리케이션을 개발할 수 있도록 지원하는 기본 제공 접근성 기능이 포함되어 있습니다.
FlexGrid 및 Input 컨트롤을 포함한 Wijmo의 주요 컨트롤은 WCAG 2.2 레벨 AA의 해당 요구사항을 지원합니다. Chart 및 OLAP 컨트롤도 WCAG 2.0, 2.1 및 2.2 레벨 AA의 해당 요구사항을 지원합니다.
Wijmo의 접근성 지원은 컨트롤 수준에서 제공됩니다. 애플리케이션 전체의 접근성은 콘텐츠, 레이블, 컨트롤 구성, 사용자 지정 템플릿, CSS 및 애플리케이션에서 정의한 상호작용에도 영향을 받습니다. 컨트롤이 특정 요구사항을 지원한다고 해서 애플리케이션 전체가 모든 WCAG 요구사항을 준수하는 것은 아닙니다.
Wijmo는 적절한 경우 표준 WAI-ARIA 시맨틱을 사용합니다. Axe DevTools와 같은 도구 및 NVDA와 같은 스크린 리더를 사용해 애플리케이션의 전체 워크플로를 테스트하세요.
키보드 탐색, 포커스 순서, 사용자 지정 스타일, 동적 콘텐츠, 프로젝트에서 지원하는 보조 기술을 포함해 애플리케이션 전체를 테스트하세요.
기본 제공 접근성 지원
Wijmo 컨트롤은 다음과 같은 접근성 기능을 제공할 수 있습니다.
WAI-ARIA 역할, 접근 가능한 이름, 설명 및 상태
선택됨, 체크됨, 확장됨, 축소됨, 눌림 및 비활성화됨 등의 상태 정보
지원되는 컨트롤 작업에 대한 키보드 접근
키보드 사용자를 위한 명확한 포커스 표시
포커스를 이동하지 않고 콘텐츠를 변경하는 지원 작업에 대한 상태 피드백
고대비 및 강제 색상(forced-colors) 환경을 지원하도록 설계된 스타일
지원되는 컨트롤에서는 기본적인 접근성 시맨틱이 자동으로 제공됩니다. 일부 워크플로에는 접근 가능한 이름이나 컨트롤별 구성이 필요합니다. 예를 들어 PivotGrid 헤더에 포커스를 두고 키보드로 그룹화된 데이터를 조작하려면 해당 헤더를 headersFocusability에 포함해야 합니다.
컨트롤별 접근성
접근성 동작은 컨트롤에 따라 다릅니다. 다음 섹션에서는 주요 컨트롤 계열을 요약하고, 관련 세부 문서가 있는 경우 해당 문서로 연결합니다.
FlexGrid
FlexGrid는 셀 탐색, 선택 및 편집을 위한 그리드 시맨틱과 키보드 지원을 제공합니다. 또한 그룹화, 정렬, 필터링, 크기 조정 및 기타 그리드 작업이 활성화된 경우 해당 작업에 대한 키보드 상호작용을 지원합니다.
접근성 확장 기능(Accessibility Extender) 문서에서는 FlexGrid의 키보드 동작을 설명하고, 정렬 또는 필터링 완료와 같이 애플리케이션별 작업을 사용자에게 알리는 방법을 보여줍니다.
Input 컨트롤
Input 컨트롤은 접근 가능한 이름, 값 및 상태를 노출하고 각 컨트롤에 적합한 키보드 동작을 제공합니다.
가능하면 입력 컨트롤에 표시되는 레이블을 제공하세요. 표시 레이블을 사용할 수 없다면 적절한 HTML 또는 ARIA 레이블 지정 방법을 사용해 컨트롤에 의미 있는 접근 가능한 이름을 부여하세요.
컨트롤별 키보드 동작은 다음 문서를 참조하세요.
탐색 컨트롤
탐색 컨트롤은 WAI-ARIA 시맨틱과 키보드 상호작용을 통해 구조, 현재 상태 및 사용 가능한 작업을 노출합니다.
예를 들어 TabPanel은 WAI-ARIA 탭 패턴을 구현합니다. autoSwitch 속성은 탭 사이에서 포커스를 이동할 때 포커스된 탭도 선택할지를 결정합니다. 자세한 내용은 TabPanel 접근성을 참조하세요.
Chart 컨트롤
Wijmo Chart 컨트롤은 차트 이름, 키보드 포커스, 스크린 리더 시맨틱 및 지원되는 차트 상호작용에 대한 접근성 지원을 제공합니다.
사용 가능한 접근성 동작은 차트 유형과 구성에 따라 다릅니다. 중요한 정보가 차트에만 표시되는 경우, 애플리케이션은 의미 있는 차트 이름과 이에 상응하는 텍스트 또는 데이터 표현을 제공해야 합니다.
차트별 구성, 키보드 동작, 지원되는 영역 및 제한 사항은 차트 접근성을 참조하세요.
OLAP 컨트롤
Wijmo OLAP 컨트롤은 PivotPanel, PivotGrid, PivotChart 및 Slicer에 대한 접근성 지원을 제공합니다.
이러한 컨트롤은 필드 영역, 그리드 및 차트 콘텐츠, 필터 옵션, 키보드 작업 및 관련 상태 정보를 보조 기술에 노출합니다. 일부 워크플로에는 컨트롤별 구성이 필요합니다. 예를 들어 PivotGrid에서 키보드로 그룹화된 행이나 열을 조작하려면 먼저 헤더에 포커스를 둘 수 있도록 설정해야 합니다.
OLAP의 자세한 구성, 키보드 워크플로 및 제한 사항은 OLAP 접근성을 참조하세요.
애플리케이션별 접근성
일부 접근성 요구사항은 애플리케이션에 따라 달라지므로 컨트롤만으로 제공하거나 추론할 수 없습니다.
접근 가능한 이름 제공
컨트롤에 의미 있는 표시 레이블이 없는 경우, 해당 컨트롤의 목적을 설명하는 접근 가능한 이름을 제공하세요.
예를 들어 차트에 접근 가능한 이름을 지정할 수 있습니다.
const chart = new wijmo.chart.FlexChart('#chart', {
ariaLabel: '지역별 분기 매출'
});컨트롤의 목적이나 콘텐츠를 식별하는 이름을 사용하세요. Chart, Control, Input과 같이 일반적인 이름은 피하세요.
autocomplete 속성 추가
HTML autocomplete 속성은 입력값이 어떤 용도로 사용되는지 지정하며, 브라우저나 기타 사용자 에이전트가 적절한 지원 기능을 제공할 수 있도록 합니다.
예를 들어 ComboBox에서 사용하는 입력 요소에 autocomplete="email"을 추가할 수 있습니다.
// ComboBox에서 입력 요소를 가져옵니다.
const input = combobox.inputElement;
// 예상되는 입력 목적을 지정합니다.
input.setAttribute('autocomplete', 'email');자세한 내용은 ComboBox 클래스 API 문서를 참조하세요.
동적 상태 메시지 알리기
상태 메시지는 콘텐츠의 중요한 변경 사항을 사용자에게 알립니다. 스크린 리더는 이러한 메시지가 라이브 영역(live region)으로 제공될 때 이를 읽어 줄 수 있습니다.
콘텐츠와 알림 시점은 애플리케이션 워크플로에 따라 달라지므로, 다음 예제에서는 가능한 구현 방법 중 하나를 보여줍니다. 이 예제에서는 ComboBox 텍스트가 변경될 때 스크린 리더가 현재 값: {value}를 읽습니다.
상태 요소를 생성합니다.
<div
id="valueAnnouncer"
role="status"
aria-live="polite"
aria-atomic="true">
</div>접근성 트리에서는 제거하지 않고 화면에만 보이지 않도록 요소를 숨깁니다.
#valueAnnouncer {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}ComboBox 값이 변경될 때 상태를 업데이트합니다.
const announcer = document.getElementById('valueAnnouncer');
combobox.textChanged.addHandler((sender) => {
announcer.textContent = `현재 값: ${sender.text}`;
});라이브 영역은 중요한 업데이트에만 사용하세요. 일상적인 변경 사항을 매번 알리면 스크린 리더 사용이 어려워질 수 있습니다.
애플리케이션의 책임
접근성을 고려한 애플리케이션에서 Wijmo 컨트롤을 사용할 때는 다음 사항을 확인하세요.
의미 있는 표시 레이블과 접근 가능한 이름을 제공합니다.
논리적인 포커스 순서와 읽기 순서를 유지합니다.
사용자 지정 스타일을 적용할 때 명확한 포커스 표시를 유지합니다.
유효성 검사, 필터링, 탐색, 대화 상자 및 비동기 업데이트 후 포커스를 관리합니다.
지침과 유효성 검사 메시지를 관련 컨트롤과 연결합니다.
정보를 전달할 때 색상만을 유일한 수단으로 사용하지 않습니다.
중요한 시각 정보를 위한 텍스트 또는 데이터 대안을 제공합니다.
컨트롤 템플릿을 사용자 지정할 때 접근성 시맨틱을 유지합니다.
애플리케이션에서 정의한 포인터 및 드래그 작업에 키보드 대안을 제공합니다.
테마, 팔레트, 템플릿 또는 차트 색상을 사용자 지정한 후 명암 대비를 확인합니다.
사용자 지정 CSS, 동적으로 생성되는 콘텐츠 및 애플리케이션 오버레이를 테스트합니다.
애플리케이션에서 요구하는 확대 수준에서 테스트합니다.
스타일을 사용자 지정한 후 고대비 및 강제 색상 모드를 테스트합니다.
고정 콘텐츠나 오버레이 콘텐츠가 포커스된 콘텐츠를 가리지 않는지 확인합니다.
해당하는 경우 대화형 요소의 대상 크기를 확인합니다.
Wijmo 컨트롤의 지원만으로 애플리케이션 전체가 모든 WCAG 요구사항을 준수한다고 보장할 수는 없습니다.
스크린 리더 및 브라우저 동작
Wijmo는 브라우저 접근성 트리를 통해 컨트롤의 역할, 이름, 값, 관계 및 상태를 노출합니다. 스크린 리더의 출력은 브라우저, 운영 체제, 스크린 리더, 컨트롤 구성 및 애플리케이션 마크업에 따라 달라질 수 있습니다.
프로젝트에서 지원하는 브라우저, 운영 체제 및 보조 기술을 사용해 전체 워크플로를 테스트하세요. Axe DevTools와 같은 자동화 도구는 일부 접근성 문제를 찾아낼 수 있지만, 키보드 또는 스크린 리더 테스트를 대체하지는 않습니다