EPUBのアクセシビリティチェックツール、Aceの日本語化に関するメモです。
以前試した記事のは2019年でしたが、最新でもさほど大きな違いはありませんでした。
※内部で利用されているaxeは日本語化済みなので扱いません。
Ace (Core) の日本語化
- 公式ドキュメント Ace Localization
- 以下の3つのnpm packageそれぞれに対しi18nの言語設定ファイルを準備し、設定する。
- ace-core
- ace-report-axe
- ace-report
設定ファイルはJSONなので POEditor などをよしなに使うと楽。
各々、以下のpackagesが本体になる。
ace-core
Aceの本体のメッセージ等エラーなどメッセージ類はここにある。
- https://github.com/daisy/ace/tree/master/packages/ace-core/src/l10n/locales
- https://github.com/daisy/ace/blob/master/packages/ace-core/src/l10n/localize.js
ace-report-axe
レポートのAxe固有のメッセージ類。
- https://github.com/daisy/ace/tree/master/packages/ace-report-axe/src/l10n/locales
- https://github.com/daisy/ace/blob/master/packages/ace-report-axe/src/l10n/localize.js
ace-report
レポートのUI用のメッセージ類。
- https://github.com/daisy/ace/tree/master/packages/ace-report/src/l10n/locales
- https://github.com/daisy/ace/blob/master/packages/ace-report/src/l10n/localize.js
Ace-GUIの日本語化
Ace公式サイトにあるGUIのアプリへの適用は以下を参考に。
本来は、ace本体に対して多言語化のプルリクを送って取り込んでもらうのが常道だけど、以下、手元で試すためのメモ。
- 公式ドキュメント Ace (GUI) Localization
- ビルドはyarnを前提にしているのでAce-guiのリポジトリをcloneしたら
yarn installする。-
src/shared/l10n/が多言語設定になるので、上記同様に翻訳したメッセージのファイルと設定を追記する。 - GUIの日本語化はこれだけで完了。レポートを日本語化するには以下を実行する。
-
- axe-coreのpackeagesが
node_modulesの以下の位置にあるので、手元で手軽に試すのであれば上記の翻訳ファイルを配置し、言語設定を編集してアプリをビルドする。node_modules/@daisy/ace-core/lib/l10nnode_modules/@daisy/ace-report/lib/l10nnode_modules/@daisy/ace-report-axe/lib/l10n
ビルド環境の整備でちょっと詰まるかもしれませんが、うまくいくとこんな感じ。設定画面で言語を日本語に切り替えれば、レポートも自動的に日本語で出力されます。
機械翻訳なのでところどころおかしいけど調整すればほぼ使えそう。
チェック項目のカスタマイズ
axeにAce独自のチェック項目を追加しているのは以下の部分。
カスタマイズするのであれば、このあたりにロジックを追加していく必要がありそう。
- https://github.com/daisy/ace/blob/master/packages/ace-core/src/checker/checker.js
- https://github.com/daisy/ace/blob/master/packages/ace-core/src/checker/checker-epub.js
- https://github.com/daisy/ace/blob/master/packages/ace-core/src/checker/checker-chromium.js
メタデータの設定はこのあたりを調整か。
以上