Nativefierは、Webページをネイティブ風デスクトップアプリケーションに変換するオープンソースツールです。本稿では、生成されたアプリケーションのユーザビリティを全ユーザー（特に視覚障害や運動機能障害を持つ利用者）に向けて向上させるため、ARIA（Accessible Rich Internet Applications）属性を効果的に導入する手法を解説します。

なぜNativefierアプリにアクセシビリティ対応が必要か

Webコンテンツと同様に、デスクトップアプリでもWCAG 2.1などのアクセシビリティ基準への準拠は重要です。ElectronベースのNativefierアプリは、内部でChromiumレンダラーを用いてHTML/CSS/JSを描画するため、ARIAロール・ステート・プロパティを適切に付与することで、スクリーンリーダー（VoiceOver、NVDA、Orcaなど）やキーボードナビゲーションによる操作性が飛躍的に改善されます。

既存のアクセシビリティサポートの確認

Nativefier v45以降では、macOS環境下でグローバルショートカットや画面キャプチャ機能を利用する際に、システムの「アクセシビリティ許可」ダイアログを自動表示する仕組みが組み込まれています。これは以下のようなコードで制御されています：

if (process.platform === 'darwin' && options.accessibilityPrompt) {
  app.whenReady().then(() => {
    const result = dialog.showMessageBoxSync({
      type: 'info',
      title: 'アクセシビリティ権限が必要です',
      message: 'このアプリは画面共有機能を使用するため、アクセシビリティ設定を有効化してください。'
    });
  });
}

また、プリロードスクリプト内では、UI要素に対してARIA属性が明示的に設定される例があります。例えば、モーダル閉じボタンには次のように`aria-label`が付与されています：

<button 
  class="modal-control__dismiss" 
  data-modal-id="screen-picker" 
  aria-label="画面選択ウィンドウを閉じる"
  aria-expanded="false"
>✕</button>

ARIA属性の追加手法

1. --injectオプションを活用した動的注入

Nativefierの`--inject`フラグを使えば、起動時に任意のJavaScriptファイルをレンダラープロセスに読み込ませることができます。以下は、画像・リンク・インタラクティブ要素のアクセシビリティを強化するサンプルスクリプトです：

// inject-accessibility.js
(function () {
  // altが未設定のimg要素に簡易代替テキストを付与（実際の運用ではCMS連携やAI推論を検討）
  document.querySelectorAll('img:not([alt]):not([role="presentation"])').forEach(el => {
    el.setAttribute('alt', `画像：${el.src.split('/').pop() || '無題'}`);
  });

  // クリック可能なdiv要素にボタンとしての意味付け
  document.querySelectorAll('[data-action], .js-trigger, [onclick]').forEach(el => {
    if (!el.hasAttribute('role')) {
      el.setAttribute('role', 'button');
      el.setAttribute('tabindex', '0');
      el.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          el.click();
        }
      });
    }
  });

  // フォーカス可能な要素にvisible focusスタイルを追加（CSS不要）
  const style = document.createElement('style');
  style.textContent = `
    :focus-visible { outline: 2px solid #007aff; outline-offset: 2px; }
  `;
  document.head.appendChild(style);
})();

コマンドラインでの使用例：

nativefier https://docs.example.com --inject ./inject-accessibility.js --name "DocsApp"

2. アクセシビリティ許可の明示的制御

macOSでの許可ダイアログ表示を必須または抑制するには、以下のオプションを利用します：

• --accessibility-prompt：デフォルト有効（true）。許可要求を表示。
• --no-accessibility-prompt：ダイアログを非表示にし、代わりにエラーログを出力。

この挙動は、`src/options/optionsMain.ts`内のオプション定義によって管理されています。

3. プリロードスクリプトによる高度な制御

Electronの`contextIsolation`が有効な環境では、`preload.ts`内でDOM操作とARIA更新を安全に行うことが推奨されます。たとえば、動的に生成されるリスト項目に`aria-live="polite"`を付与して、更新をスクリーンリーダーに通知する処理は以下のように実装できます：

// preload.ts（簡略化版）
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const list = node.querySelector('[data-dynamic-list]');
        if (list && !list.hasAttribute('aria-live')) {
          list.setAttribute('aria-live', 'polite');
          list.setAttribute('aria-atomic', 'false');
        }
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

アクセシビリティ検証の実施

ARIA属性の追加後は、以下の方法で検証を行いましょう：

• スクリーンリーダー実機テスト：macOSのVoiceOver（Cmd+F5）、WindowsのNVDA（無料ダウンロード可能）、LinuxのOrcaを用いてナビゲーションと読み上げ内容を確認。
• キーボードのみ操作テスト：Tab / Shift+Tab / Enter / Spaceキーだけで全機能が操作可能かを検証。
• 開発者ツール活用：Chrome DevToolsの「Accessibility」タブでARIAロールや名前（name）の計算結果を即時確認。
• 自動チェックツール：axe-coreやLighthouseのアクセシビリティスキャンを実行。