[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

접근성 지원

SpreadJS는 Windows Narrator, NVDA(NonVisual Desktop Access), macOS VoiceOver와 같은 화면 읽기 프로그램(screen reader)을 사용하는 사용자를 위한 선택적 접근성 지원 기능을 제공합니다.

동작 방식은 사용하는 화면 읽기 프로그램 및 브라우저 조합에 따라 달라질 수 있습니다.

접근성 활성화 및 비활성화

접근성 기능은 기본적으로 비활성화되어 있습니다.

접근성이 활성화되지 않은 경우 화면 읽기 프로그램은 SpreadJS 콘텐츠를 읽어주지 않습니다.

접근성 지원을 활성화하려면 다음과 같이 설정합니다.

spread.options.enableAccessibility = true;

화면 읽기 프로그램 동작

다음 사례는 내부 테스트 중 확인된 내용으로, 다양한 사용자 동작 및 UI 영역이 화면 읽기 프로그램에서 어떻게 안내되는지를 보여줍니다.

이 예시는 참고용으로 제공됩니다.

실제 동작은 사용하는 화면 읽기 프로그램 및 브라우저 조합에 따라 달라질 수 있습니다.

사례

화면 읽기 프로그램에서 읽는 텍스트

Tab 키를 눌러 셀 (0, 1)이 활성 셀이 되고 값이 "name"인 경우

Cell(0, 1) has value "name"

마우스가 뷰포트 영역의 셀 (0, 1)에 진입하고 값이 "name"인 경우

Cell(0, 1) has value "name"

마우스가 열 머리글 영역의 셀 (0, 1)에 진입하고 값이 "name"인 경우

Column header Cell(0, 1) has value "name"

마우스가 행 머리글 영역의 셀 (1, 0)에 진입하고 값이 "name"인 경우

Row header Cell(1, 0) has value "name"

마우스가 탭 스트립의 크기 조정 막대 영역에 진입한 경우

Resize

마우스가 탭 스트립의 첫 번째 영역에 진입한 경우

First

마우스가 탭 스트립의 이전 화살표 영역에 진입한 경우

Previous arrow

마우스가 탭 스트립의 다음 화살표 영역에 진입한 경우

Next arrow

마우스가 탭 스트립의 마지막 영역에 진입한 경우

Last

마우스가 탭 스트립의 이전 버튼 영역에 진입한 경우

Previous button

마우스가 탭 스트립의 다음 버튼 영역에 진입한 경우

Next button

마우스가 탭 스트립의 시트 탭 영역에 진입하고 이름이 "Sheet1"인 경우

Sheet tab "Sheet1"

마우스가 탭 스트립의 새 시트 영역에 진입한 경우

New sheet

마우스가 탭 스트립의 빈 영역에 진입한 경우

Blank

마우스가 가로 스크롤 막대의 왼쪽 버튼 영역에 진입한 경우

Scrollbar left button

마우스가 세로 스크롤 막대의 위쪽 버튼 영역에 진입한 경우

Scrollbar top button

마우스가 스크롤 막대의 Thumb 버튼 영역에 진입한 경우

Scrollbar thumb button

마우스가 가로 스크롤 막대의 오른쪽 버튼 영역에 진입한 경우

Scrollbar right button

마우스가 세로 스크롤 막대의 아래쪽 버튼 영역에 진입한 경우

Scrollbar bottom button

SpreadJS가 포함된 페이지가 활성 브라우저 탭이며 활성 셀이 값 "name"을 가진 셀 (0, 1)인 경우

Cell(0, 1) has value "name"

접근성 출력 사용자 지정

SpreadJS는 다양한 수준에서 대체 텍스트(Alternative Text)를 지원합니다.

이 메커니즘들은 서로 독립적으로 동작합니다.

셀 대체 텍스트

셀 대체 텍스트는 화면 읽기 프로그램이 셀을 읽는 방식을 사용자 지정합니다.

정렬, 필터링, 수식 또는 검색에는 영향을 주지 않습니다.

다음 API를 사용하여 셀 대체 텍스트를 설정하거나 가져올 수 있습니다.

  • CellRange.altText()

  • Worksheet.setAltText()

  • Worksheet.getAltText()

예제:

activeSheet.getCell(0, 0).altText("Set alternative text for the cell");
console.log(activeSheet.getCell(0, 0).altText());

SpreadJS는 .ssjson 및 .sjs 형식에서 셀 대체 텍스트의 직렬화 및 역직렬화를 지원합니다.

StorageType.altText 열거형을 사용하여 대체 텍스트를 지울 수 있습니다.

activeSheet.clear(0, 0, 3, 3, 
    GC.Spread.Sheets.SheetArea.viewport, 
    GC.Spread.Sheets.StorageType.altText);

또한 CopyToOptions.altText를 사용하여 대체 텍스트를 복사할 수 있습니다.

제한 사항: 행, 열 및 워크시트 수준에서는 대체 텍스트를 지원하지 않습니다.

그림, 도형 및 차트의 대체 텍스트

그림, 차트, 도형, 연결선과 같은 그래픽 개체의 경우 alt() 메서드를 사용하여 대체 텍스트를 설정할 수 있습니다.

예제:

picture.alt("This is a mango image");
chart.alt("This is a column chart");
shape.alt("This is a cloud shape");

이 대체 텍스트는 접근성 지원에 사용됩니다.

디자이너 지원

SpreadJS 디자이너도 접근성을 지원합니다.

디자이너에서 접근성을 활성화하려면:

  1. Settings → General → Spread Settings로 이동합니다.

    image-20260407.573486.png

  2. Enable Accessibility를 선택합니다.

    image-20260407.8fdd23.png

접근성이 활성화된 경우 셀 컨텍스트 메뉴의 Alternative Text… 옵션을 통해 셀 대체 텍스트를 확인하거나 수정할 수 있습니다.

image-20260407.a99126.png

호환성 및 제한 사항(참고)

화면 읽기 프로그램 호환성 매트릭스

화면 읽기 프로그램

브라우저

Tab 키

마우스 오버

활성 탭

NVDA (Windows)

Chrome

지원

지원

지원

NVDA (Windows)

Firefox

지원

지원

미지원

NVDA (Windows)

Chromium Edge

지원

지원

미지원

NVDA (Windows)

Edge

미지원

미지원

미지원

NVDA (Windows)

IE

미지원

미지원

미지원

Windows Narrator

Chrome

지원

지원

미지원

Windows Narrator

Firefox

지원

지원

미지원

Windows Narrator

Chromium Edge

지원

지원

미지원

Windows Narrator

Edge

지원

미지원

미지원

Windows Narrator

IE

지원

미지원

미지원

VoiceOver (macOS)

Chrome

제한적으로 지원

제한적으로 지원

미지원

VoiceOver (macOS)

Safari

제한적으로 지원

제한적으로 지원

미지원

VoiceOver 제한 사항

  • VoiceOver는 div 요소에 콘텐츠가 포함되어 있는 경우 aria-label 속성을 무시합니다.

  • VoiceOver는 동적으로 업데이트되는 aria-label 속성을 인식하지 못합니다.

  • VoiceOver는 탭 스트립, 스크롤 막대 및 그림, 차트, 도형과 같은 그래픽 개체를 인식하지 못합니다.

추가 참고 사항

  • 동작 방식은 사용하는 화면 읽기 프로그램 및 브라우저에 따라 달라질 수 있습니다.

  • 드래그 채우기 또는 필터링과 같은 마우스/터치 기반 UI 작업은 화면 읽기 프로그램에서 사용하기 어려울 수 있습니다.

  • 접근성 지원은 기본 기능 수준으로 제공됩니다.