JavaScript 스프레드시트의 고급 접근성 옵션

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-04-15 11:23 조회 990회 댓글 0건

본문

관련링크

접근성 지원은 많은 기업의 성패를 좌우하는 기능일 수 있습니다.

장애인이 응용 프로그램을 최대한 이용할 수 있어야 하는 공공 기관에 속하는 기업이나 공공 기관을 위해 개발하고 있는 기업의 경우 특히 그렇습니다(예: Section 508 Compliance). 이 요구 사항에는 데이터 상호 작용을 개선하기 위한 바로 가기 키 지원도 포함됩니다.

여러 가지 키 조합을 통해 마우스를 사용하지 않고도 다양한 작업을 통해 SpreadJS와 상호 작용할 수 있습니다. 이 블로그에서는 이러한 바로 가기 키 몇 가지와 수행 가능한 작업에 대해 설명하겠습니다.

일반 접근성

SpreadJS는 enableAccessibility를 true로 설정하여 사용할 수 있는 몇 가지 일반 접근성 옵션을 지원합니다.

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));  
spread.options.enableAccessibility = true;

그러면 화면 판독기(Windows의 경우 NVDA, Mac의 경우 VoiceOver)를 활성화되고, SpreadJS 컴포넌트에 포커스가 있는 경우 현재 활성 셀을 판독하게 됩니다. 또한 시트에 포함된 사진, 차트, 도형의 대체 텍스트를 설정할 수 있으며, 이 텍스트를 화면 판독기에서 읽게 됩니다.

var p1 = sheet.pictures.add("p1", "./apple.jpg", 50, 50, 200, 200);  
p1.alt("this is a apple image");

var c1 = sheet.charts.add("c1", GC.Spread.Sheets.Charts.ChartType.columnCluster, 50, 300, 400, 400, "C1:D5");  
c1.alt("this is a column chart");

var sp1 = sheet.shapes.add("sp1", GC.Spread.Sheets.Shapes.AutoShapeType.sun, 300, 50, 200, 200);  
sp1.alt("this is a sun shape");

기본 제공 바로 가기

SpreadJS에 기본 제공되는 몇 가지 바로 가기 키가 있습니다. 여기에는 다음이 포함됩니다.

Ctrl+Z 및 Ctrl+Y(실행 취소/다시 실행)
Ctrl+Down/왼쪽/위쪽/오른쪽 화살표(시트 탐색)
Shift+Down/왼쪽/위쪽/오른쪽 화살표(선택 변경)
기타 등등

지원되는 바로 가기 키의 전체 목록을 보려면 이 문서 페이지를 확인하세요.

이는 모든 바로 가기를 위해 SpreadJS가 어떤 플랫폼에서 실행되고 있는지에 전적으로 달려 있습니다. 예를 들어 Ctrl+PageUp 또는 PageDown은 시트 탭 사이를 전환하지만, SpreadJS가 표준 브라우저(예: Google Chrome)에서 사용되는 경우에는 대신 이 바로 가기가 브라우저 탭을 전환합니다.

바로 가기 등록

SpreadJS에서 특정 바로 가기 키를 바인딩하려면 어떤 명령을 사용할 수 있는지 여기에서 확인할 수 있습니다.

명령을 선택한 후 명령 관리자를 사용하여 키 입력에 등록할 수 있습니다. 예를 들어 “W”를 눌러 워크시트에서 셀을 탐색할 수 있습니다.

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));  
var commandManager = spread.commandManager();  
commandManager.register('customNavigationUp', GC.Spread.Sheets.Commands.navigationUp, 'W'.charCodeAt(0), false, fals*, false, false);

이것이 원하는 바로 가기 키일 수 있지만, 순차적 바로 가기 키(예: Alt+S+E)는 지원되지 않습니다.

보다 일반적인 바로 가기는 Alt+PageUp/PageDown에 바인딩할 수 있는 시트 간 전환을 위한 바로 가기입니다.

commandManager.setShortcutKey("navigationPreviousSheet", GC.Spread.Commands.Key.pup, true, false, true, false); // Ctrl + Alt + PageUp  
commandManager.setShortcutKey("navigationNextSheet", GC.Spread.Commands.Key.pdn, true, false, true, false); // Ctrl + Alt + PageDown

또 다른 유용한 바로 가기는 한 페이지에 여러 컨트롤이 있는 경우 SpreadJS 인스턴스 전후에 다른 컨트롤로 이동하기 위한 바로 가기일 것입니다.

// Maps Tab key to the moveToNextCellThenControl command  
commandManager.setShortcutKey('moveToNextCellThenControl', GC.Spread.Commands.Key.tab, false, false, false, false); // Tab key  
// Maps Shift + Tab key to the moveToPreviousCellThenControl command  
commandManager.setShortcutKey('moveToPreviousCellThenControl', GC.Spread.Commands.Key.tab, false, true, false, false); // Shift key and Tab key

포커스 가능한 컨트롤을 다음과 같이 정의할 수 있습니다.

<input type="text" value="This is header." />  
<div id="sampleDiv"></div>  
<input type="text" value="This is footer" />

그런 다음에는 SpreadJS를 위한 이전 및 다음 컨트롤로 정의할 수 있습니다.

spread.nextControl(document.getElementById("input1"));  
spread.previousControl(document.getElementById("input2"));

각 예시에서 register 또는 setShortcutKey 메서드가 사용되었습니다.

register 메서드는 사용자 정의 명령을 명령 관리자에 등록하는 데 사용되며, 바로 가기 키 조합을 동일한 메서드 호출에서 추가할 수 있습니다.
setShortcutKey 메서드는 바로 가기 키 조합을 명령 관리자에 이미 존재하는 명령으로 설정하는 데 사용됩니다. 이것은 바로 가기 키를 변경하기 위한 기본 제공 명령에 더 많이 사용됩니다.

사용자 정의 명령

특정 키 조합에 바인딩하기 위한 사용자 정의 명령을 직접 정의할 수도 있습니다. 실행 취소/다시 실행 기능을 허용하려면 startTransaction 및 endTransaction 메서드를 포함해야 합니다.

예를 들어 선택한 셀의 배경색을 변경하는 사용자 정의 명령을 만들려는 경우에는 다음과 같이 명령을 만들 수 있습니다.

var sheet = spread.getActiveSheet();  
var command = {  
  canUndo: true,  
  execute: function(spread, options, isUndo) {  
      var Commands = GC.Spread.Sheets.Commands;  
      if (isUndo) {  
          Commands.undoTransaction(spread, options);  
          return true;  
      } else {  
          Commands.startTransaction(spread, options);  
          spread.suspendPaint();  
          var selections = options.selections;  
          var value = options.backColor;  
          selections.forEach(function(sel) {  
              sheet.getRange(sel.row, sel.col, sel.rowCount, sel.colCount).backColor(value);  
          });  
          spread.resumePaint();  
          Commands.endTransaction(spread, options);  
          return true;  
      }  
  }  
};

이는 commandManager가 명령을 실행 취소 또는 다시 실행할 수 있도록 명령을 시작 및 종료하는 시점을 지정합니다. 그런 다음 앞 섹션에서 사용한 commandManager의 register 메서드를 사용하여 이 명령을 키에 등록할 수 있습니다.

다른 예시는 사용자 정의 함수를 바로 가기로 사용하는 것입니다. 이 경우 F2 키(키코드 “113”)가 셀 편집을 시작하도록 하려면 다음과 같이 하세요.

spread.commandManager().register('f2_cmd', function (context) {  
  var sheet = context.getActiveSheet();  
  if (!sheet.isEditing()) {  
      return sheet.startEdit();  
  }  
}, 113, false, false, false, false);