접근성

Wijmo OLAP 컨트롤은 PivotPanel, PivotGrid, PivotChart 및 Slicer에 대한 접근성 지원을 제공합니다.

각 컨트롤은 고유한 키보드 조작 방식과 접근 가능한 정보를 제공합니다. 지원되는 동작은 컨트롤 구성, 현재 레이아웃 및 표시되는 데이터에 따라 달라질 수 있습니다.

PivotPanel

PivotPanel은 사용 가능한 필드와 보고서 영역을 접근 가능한 필드 목록으로 제공합니다.

해당 필드 목록, 보고서 영역 또는 명령에 포커스가 있을 때 다음 키보드 명령을 사용할 수 있습니다.

PivotPanel이 활성화되어 있고 각 영역에 표시된 필드가 하나 이상 있으면 Filters, Columns, Rows, Values 영역에 접근할 수 있습니다. 비어 있거나 비활성화된 영역은 Tab 키를 이용한 포커스 이동 순서에서 제외됩니다. 다만, 비어 있는 영역에도 마우스로 필드를 끌어다 놓을 수 있습니다.

PivotPanel을 비활성화하면 필드 목록과 보고서 영역도 함께 비활성화되어 키보드로 포커스를 이동할 수 없습니다.

마우스를 사용하는 경우에는 보고서 영역 간에 필드를 끌어다 놓을 수 있습니다. 또한 필드의 컨텍스트 메뉴를 통해 지원되는 작업을 키보드로 실행할 수 있습니다.

PivotPanel은 필드 작업이나 Update 명령이 실행되었을 때 스크린 리더에 해당 내용을 알릴 수 있습니다. 단, Update 알림은 명령이 실행되었다는 의미이며, 비동기 데이터 새로 고침까지 완료되었다는 의미는 아닙니다.

PivotGrid

PivotGrid는 데이터 셀과 헤더에 대한 그리드 의미 체계 및 키보드 탐색을 제공합니다.

행 및 열 헤더가 페이지의 키보드 탐색 순서에 항상 포함되는 것은 아닙니다. 헤더에 포커스를 두고 키보드로 그룹화된 행이나 열을 조작하려면 headersFocusability에 필요한 헤더를 포함하도록 설정합니다.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjOlap from '@mescius/wijmo.olap';

const pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
    itemsSource: pivotEngine,
    headersFocusability: wjGrid.HeadersFocusability.All
});

해당 헤더에 포커스를 둘 수 있게 되면 다음 명령을 사용할 수 있습니다.

그룹의 확장 및 축소 상태는 보조 기술에 전달됩니다. 소계를 확장하거나 축소하는 기능이 필요하지 않다면 collapsibleSubtotals를 false로 설정할 수 있습니다.

기본 확장·축소 버튼의 크기는 WCAG 2.2에서 권장하는 대상 크기보다 작을 수 있습니다. 대상 크기 요건을 엄격하게 준수해야 하는 애플리케이션에서는 실제 렌더링된 버튼의 크기를 확인하고, 필요한 경우 CSS를 사용해 버튼의 실제 클릭 영역을 확대해야 합니다.

팝업 포커스 관리

키보드로 필드 설정(Field Settings) 또는 자세히 보기(Show Detail)를 열면 포커스가 해당 대화 상자 내부로 이동합니다.

대화 상자를 닫으면 포커스는 대화 상자를 열었던 필드나 그리드 위치로 돌아갑니다. 다만, 필드가 삭제되었거나 보기가 변경되어 기존 위치를 더 이상 사용할 수 없다면, 현재 접근 가능한 다른 필드나 셀로 포커스가 이동합니다.

대화 상자가 열릴 준비를 마칠 때까지 컨텍스트 메뉴를 유지합니다. 이를 통해 대화 상자로 포커스가 이동하기 전에 포커스가 원래 그리드로 돌아가는 것을 방지합니다.

PivotChart

PivotChart는 접근 가능한 차트 요소를 제공하며, 내부에서 사용하는 차트 컨트롤의 접근성 동작을 활용합니다.

사용할 수 있는 차트 영역과 키보드 작업은 생성된 차트 유형 및 콘텐츠에 따라 달라집니다. 차트 이름, 포커스 모드, 키보드 탐색, 툴팁, 렌더링 엔진 및 차트 유형별 제한 사항은 차트 접근성을 참조하시기 바랍니다.

Slicer

Slicer는 이름이 지정된 필터 그룹과 접근 가능한 필터 옵션 목록을 제공합니다.

다중 선택(Multi-Select) 버튼의 눌림 상태는 보조 기술에 전달되므로, 사용자는 다중 선택 기능이 활성화되어 있는지 확인할 수 있습니다.

여러 값을 선택하려면 Multi-Select를 활성화하고, 필터를 초기화하려면 필터 지우기(Clear Filter)를 선택합니다.

Slicer 헤더가 표시되어 있으면 해당 헤더가 Slicer 그룹과 필터 목록의 접근성 이름으로 사용됩니다. 헤더가 숨겨져 있으면 Slicer 자체 또는 연결된 필드를 기준으로 이름이 지정됩니다.

다중 선택 버튼, 필터 지우기 버튼, 필터 목록은 설정된 Tab 순서에 따라 키보드로 탐색할 수 있습니다. Slicer를 비활성화하면 필터 목록과 관련 컨트롤은 키보드 탐색 대상에서 제외됩니다.

Slicer는 현재 적용된 필터와 선택 상태, 다중 선택 여부를 보조 기술에 전달합니다. 필터 지우기를 선택하면 필터가 초기화되었다는 상태 알림이 제공됩니다. 스크린 리더가 같은 내용을 반복해서 읽지 않도록 개별 목록의 새로 고침은 별도로 알리지 않습니다. 키보드 포커스의 시각적 표시는 Slicer의 표시 모드에 따라 달라집니다.

상태 메시지

PivotPanel과 PivotGrid는 포커스를 이동하지 않은 상태에서 컨트롤의 상태를 변경하는 작업에 대해 상태 알림을 제공할 수 있습니다.

알림에는 필드 선택 및 선택 해제, 필드 이동 및 제거, 그룹 확장 및 축소, Update 명령 실행 등 수행한 작업이 안내됩니다. 단, Update 알림은 명령이 실행되었다는 의미이며, 비동기 데이터 새로 고침이 완료되었다는 의미는 아닙니다.

스크린 리더에서 실제로 전달되는 내용은 브라우저, 운영 체제, 스크린 리더, 컨트롤 설정 및 애플리케이션의 마크업에 따라 달라질 수 있습니다.

애플리케이션의 책임

OLAP 컨트롤을 사용하는 애플리케이션에서는 다음 항목을 확인해야 합니다.

• Tab 키를 이용한 포커스 이동 순서가 논리적인지 확인합니다.

• 각 컨트롤에 의미가 명확한 이름이 지정되어 있는지 확인합니다.

• 키보드 포커스가 시각적으로 잘 드러나는지 확인합니다.

• 애플리케이션에서 직접 구현한 비동기 작업에 대해 적절한 상태 알림을 제공하는지 확인합니다.

• 스타일을 변경한 후에도 명암 대비와 상호작용 요소의 크기가 적절한지 확인합니다.

• 확대 및 축소 시에도 접근성 문제가 없는지 확인합니다.

• 지원 대상 환경에서 스크린 리더가 정보를 올바르게 전달하는지 확인합니다.

Wijmo OLAP 컨트롤은 WCAG 2.0, 2.1 및 2.2 Level AA의 해당 요구 사항을 지원합니다. 다만, 이러한 지원이 모든 OLAP 레이아웃이나 전체 애플리케이션이 WCAG의 모든 성공 기준을 충족한다는 것을 보장하지는 않습니다.

자세한 요구 사항은 웹 콘텐츠 접근성 지침(WCAG)을 참조하시기 바랍니다. 스크린 리더 테스트에는 NVDA를 활용할 수 있습니다.