アクセシビリティサポート
SpreadJS は、Windowsナレーター、NVDA（NonVisual Desktop Access）、macOS の VoiceOver などのスクリーンリーダーアプリケーションに依存するユーザー向けに、オプションのアクセシビリティサポートを提供します。動作は、使用するスクリーンリーダーとブラウザの組み合わせによって異なる場合があります。
アクセシビリティの有効化／無効化
アクセシビリティは既定で無効です。アクセシビリティが有効になっていない場合、スクリーンリーダーは SpreadJS のコンテンツを読み上げません。アクセシビリティサポートを有効にするには、次を設定します。
spread.options.enableAccessibility = true;スクリーンリーダーの動作
以下のケースは内部テスト中に観測されたもので、異なるユーザー操作や UI 領域がスクリーンリーダーによってどのように読み上げられるかを示します。これらの例は参考情報として提供されています。実際の動作は、スクリーンリーダーとブラウザの組み合わせによって異なる場合があります。
ケース | スクリーンリーダーで読み上げられるテキスト |
|---|---|
セル（0、1）は、Tabキーを押すとアクティブセルになり、その値は「名前」です。 | セル（0、1）の値は「名前」です。 |
マウスがビューポート領域のセル（0、1）に入り、その値は「名前」です。 | セル（0、1）の値は「名前」です。 |
マウスが列ヘッダ領域のセル（0、1）に入り、その値は「名前」です。 | 列ヘッダのセル（0、1）の値は「名前」です。 |
マウスが行ヘッダ領域にセル（1、0）を入力し、その値は「名前」です。 | 行ヘッダのセル（1、0）の値は「名前」です。 |
マウスがタブストリップのサイズ変更バーに入ります。 | タブストリップのリサイズ |
マウスがタブストリップの最初の領域に入ります。 | タブストリップの先頭 |
マウスがタブストリップの前の矢印領域に入ります。 | 前への矢印ボタン |
マウスがタブストリップの次の矢印領域に入ります。 | 次への矢印ボタン |
マウスがタブストリップの最後の領域に入ります。 | タブストリップの最後 |
マウスがタブストリップの前のボタン領域に入ります。 | 前へのボタン |
マウスがタブストリップの次のボタン領域に入ります。 | 次へのボタン |
マウスがタブストリップのシートタブ領域に入り、その名前は「Sheet1」です。 | シートタブ「Sheet1」 |
マウスがタブストリップの新しいシート領域に入ります。 | 新しいシート |
マウスがタブストリップの空白の領域に入ります。 | タブストリップのブランク領域 |
マウスが水平スクロールバーの左ボタン領域に入ります。 | スクロールバーの左ボタン |
マウスが垂直スクロールバーの上部のボタン領域に入ります。 | スクロールバーの上ボタン |
マウスがスクロールバーのサムボタン領域に入ります。 | スクロールバーのサム |
マウスが水平スクロールバーの右ボタン領域に入ります。 | スクロールバーの右ボタン |
マウスは、垂直スクロールバーの下部のボタン領域に入ります。 | スクロールバーの下ボタン |
サンプルページがアクティブタブにあり、アクティブセルはCell（0、1）で、その値は「名前」です。 | セル（0、1）の値は「名前」です。 |
読み上げ内容のカスタマイズ
SpreadJS は複数レベルで代替テキストをサポートします。これらの仕組みは互いに独立しています。
セルの代替テキスト
セルの代替テキストは、スクリーンリーダーによるセルの読み上げ方をカスタマイズします。並べ替え、フィルタリング、数式、検索には影響しません。セルの代替テキストは次を使用して設定または取得できます。
例:
activeSheet.getCell(0, 0).altText("セルに代替テキストを設定します");
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("これはマンゴーの画像です");
chart.alt("これは縦棒チャートです");
shape.alt("これは雲の図形です");この代替テキストはアクセシビリティサポートに使用されます。
デザイナーでのアクセシビリティ
SpreadJS デザイナーもアクセシビリティをサポートします。デザイナーでアクセシビリティを有効にするには次の手順を実行します。
設定 → 全般 → Spread 設定に移動します。
アクセシビリティを許可するを選択します。
セルの代替テキストは、（アクセシビリティが有効な場合に）セルのコンテキストメニューの 代替テキスト… オプションから表示または変更できます。
互換性と制限（参考）
スクリーンリーダー互換性マトリクス
スクリーンリーダー | ブラウザ | 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 の制限事項
div要素にコンテンツが含まれている場合、VoiceOver はaria-label属性を無視します。VoiceOver は動的に更新される
aria-label属性を認識しません。VoiceOver は、タブストリップ、スクロールバー、または画像・チャート・図形などのグラフィックオブジェクトを認識しません。
追加メモ
動作は、スクリーンリーダーとブラウザにより異なる場合があります。
マウスまたはタッチベースの UI 操作（ドラッグフィルやフィルタリングなど）は、スクリーンリーダーでは使用が難しい場合があります。
アクセシビリティサポートは基本的な機能のみを提供します。