グローバルなユーザーに対応するためにインターナショナル化（i18n）とアクセシビリティ（a11y）は欠かせない要素です。本章では、i18nライブラリの活用や型を用いた翻訳キー管理、アクセシビリティ基準の対応、そしてテストによる保証について解説します。

1. i18nライブラリの活用 (react-i18nextなど)

react-i18nextの導入

• 特徴:
  • React用のi18nライブラリで、翻訳の切り替えやプラグインの柔軟性が特徴。

導入手順

yarn add react-i18next i18next

基本的な実装例

import React from "react";
import { useTranslation } from "react-i18next";

const resources = {
  en: { translation: { welcome: "Welcome" } },
  ja: { translation: { welcome: "ようこそ" } },
};

import i18n from "i18next";
import { I18nextProvider } from "react-i18next";

i18n.init({
  resources,
  lng: "en",
  interpolation: { escapeValue: false },
});

const App = () => {
  const { t } = useTranslation();

  return <h1>{t("welcome")}</h1>;
};

export default () => (
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>
);

2. 型を用いた翻訳キーの管理

型安全な翻訳キー管理

• 型を用いることで、誤った翻訳キーを防ぐ。

TypeScriptを使った翻訳キーの型定義

const resources = {
  en: { welcome: "Welcome" },
  ja: { welcome: "ようこそ" },
} as const;

type TranslationKeys = keyof typeof resources["en"];

const t = (key: TranslationKeys) => resources.en[key];

console.log(t("welcome")); // "Welcome"

react-i18nextでの型安全性

• react-i18nextは型定義をカスタマイズ可能。

型定義の拡張例

import "react-i18next";

declare module "react-i18next" {
  interface CustomTypeOptions {
    resources: {
      translation: {
        welcome: string;
      };
    };
  }
}

3. アクセシビリティ基準への対応 (ARIA属性やスクリーンリーダー)

アクセシビリティの基本

• ARIA属性:
  • アクセシビリティを向上させるためのHTML属性。
• スクリーンリーダー対応:
  • ページ内容が視覚以外の手段でも理解できるようにする。

ARIA属性の使用例

const AccessibleButton = ({ label, onClick }: { label: string; onClick: () => void }) => (
  <button onClick={onClick} aria-label={label}>
    {label}
  </button>
);

ランドマークの活用

const AccessiblePage = () => (
  <main aria-labelledby="main-heading">
    <h1 id="main-heading">Page Title</h1>
    <section aria-labelledby="section-heading">
      <h2 id="section-heading">Section Title</h2>
    </section>
  </main>
);

4. テストによるアクセシビリティ保証

React Testing Libraryでのアクセシビリティテスト

• 特徴:
  • ユーザーインタラクションを模倣したテストが可能。

基本的なテスト例

import { render } from "@testing-library/react";
import App from "./App";

test("button has accessible role", () => {
  const { getByRole } = render(<button aria-label="Submit">Submit</button>);
  expect(getByRole("button")).toHaveAccessibleName("Submit");
});

Axeによるアクセシビリティ検証

• 特徴:
  • 自動化されたアクセシビリティテストツール。

使用例

import { render } from "@testing-library/react";
import { axe } from "jest-axe";
import App from "./App";

test("should have no accessibility violations", async () => {
  const { container } = render(<App />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

---

インターナショナル化とアクセシビリティの対応は、アプリケーションをより包括的で使いやすいものにします。本章で紹介した方法を活用し、全てのユーザーに優しいアプリケーションを構築しましょう。