웹접근성 (Web Accessibility) 제한 사항
RealGridJS에서 사용되던 shadowDom(screen reader만 접근가능한 숨겨진 table)을 제거하고 화면에 보이는 그리드를 이용하도록 변경되었습니다.
대부분의 기능은 웹접근성에 관계없이 사용가능하지만 마우스를 이용한 기능(정렬/Filtering등)은 보조기기를 이용해서 동일한 동작을 할수 없기 때문에 api를 이용하거나 사용을 자제해야 합니다.
제한사항
- 행그룹핑 모드, 여러 단계로 이루어진 컬럼 그룹은 지원하지 않습니다.
- fixedColumn은 지원하지 않습니다.
- footer 또는 headerSummary에 접근할수 없습니다.
- customRenderer또는 templateRenderer를 이용한 <button>,<a> tag를 사용하는 경우 click이벤트를 사용할수 없습니다.
- 접근성을
true로 설정하면 셀에서 키를 입력했을때 편집모드로 바로 변경되지 않고F2키 또는 더블클릭을 해서 편집상태로 변경후 사용해야 합니다. - 셀에 Reader가 읽을수 없는 내용이 포함된 경우 renderer.ariaLabelCallback을 이용해서 Reader가 읽을수 있도록 해야 합니다.
- 지체장애인 또는 시각장애인의 경우 마우스를 사용할수 없기 때문에 마우스 관련 이벤트의 사용을 자제해야합니다.
Header를 클릭해서 정렬하거나 filter를 사용할수 없습니다.
가상커서
- 시각장애인이 그리드를 이용하기 위해서는 가상커서를 해제후 사용해야 합니다.
- 일부 Screen Reader는 그리드에 focus가 위치하게 되면 자동으로 가상커서를 해제합니다.
- 가상커서가 설정된 상태에서는 그리드가 아닌 그리드의 기반이 되는
table을 읽게 됩니다.
키보드 접근성
- 그리드에서 다른 element로 이동하기 위해서 editOption.exitGridWhenTab 속성을
grid또는row로 변경합니다.
또는 editOptions.useTabKey를false로 설정하면tab키를 입력하면 다음 element로 이동합니다. - List를 가지는 editor에서 편집상태로 변경후 alt+Down키를 입력하면 List가 표시됩니다.
List가 표시된 상태에서 down/up 키를 이용해서 원하는 data로 이동후 enter키를 이용해서 입력합니다. - checkBar에 있는 check를 선택하거나 해제하는 경우 ctrl+shift+space(windows), command+shift+space(mac) 키를 입력합니다.
- linkRenderer, buttonRenderer와 같이 기본동작이 있는 renderer는
spaceKey를 입력하면 기본동작을 실행합니다. 추가로enterKey를 이용해서 실행하려면 renderer.enterKey를true로 설정합니다. - checkRenderer의 경우
spaceKey만 가능합니다.
※ 접근성 관련 옵션
그리드 생성할때 아래와 같이 3번째 옵션을 추가해야 합니다.
gridView = new RealGrid.GridView("realgrid", true, waiOptions);
waiOptions 의 기본값은 아래와 같습니다.
waiOptions = {
title: "리얼그리드 테이블 (테이블에서 엔터키로 버튼 링크등의 기능이 실행됩니다)",
description: "${columns} 열로 이루어진 데이터 테이블입니다.",
};- 아무것도 지정하지 않으면 기본값으로 지정됩니다.
- 각 화면에 맞게 title과 description을 설정해주세요.