# 접근성 지원

## Content

SpreadJS는 Windows Narrator, NVDA(NonVisual Desktop Access), macOS VoiceOver와 같은 화면 읽기 프로그램(screen reader)을 사용하는 사용자를 위한 선택적 접근성 지원 기능을 제공합니다.
동작 방식은 사용하는 화면 읽기 프로그램 및 브라우저 조합에 따라 달라질 수 있습니다.

## 접근성 활성화 및 비활성화

접근성 기능은 기본적으로 비활성화되어 있습니다.
접근성이 활성화되지 않은 경우 화면 읽기 프로그램은 SpreadJS 콘텐츠를 읽어주지 않습니다.
접근성 지원을 활성화하려면 다음과 같이 설정합니다.

```auto
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()`

예제:

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

SpreadJS는 `.ssjson` 및 `.sjs` 형식에서 셀 대체 텍스트의 직렬화 및 역직렬화를 지원합니다.
[`StorageType.altText`](https://developer.mescius.com/spreadjs/api/enums/GC.Spread.Sheets.StorageType#alttext) 열거형을 사용하여 대체 텍스트를 지울 수 있습니다.

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

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

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

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

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

```auto
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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260407.573486-20260528.764800.png?width=600)
2. **Enable Accessibility**를 선택합니다.
    ![image-20260407.8fdd23.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260407.8fdd23-20260528.218b29.png?width=600)

접근성이 활성화된 경우 셀 컨텍스트 메뉴의 **Alternative Text…** 옵션을 통해 셀 대체 텍스트를 확인하거나 수정할 수 있습니다.
![image-20260407.a99126.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260407.a99126-20260528.b7b426.png?width=200)

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

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

| 화면 읽기 프로그램 | 브라우저 | 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 작업은 화면 읽기 프로그램에서 사용하기 어려울 수 있습니다.
* 접근성 지원은 기본 기능 수준으로 제공됩니다.