frontend-accessibility

フロントエンドのアクセシビリティ

目次

• 概要
• 使用する場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

セマンティック HTML、ARIA 属性、キーボード操作、スクリーンリーダーのサポートを取り入れ、WCAG ガイドラインに準拠した、すべての人が利用できる Web アプリケーションを構築します。

使用する場面

• アクセシビリティ標準への準拠
• インクルーシブデザインの要件
• スクリーンリーダーのサポート
• キーボード操作
• 色のコントラストの問題

クイックスタート

最小限の動作例：

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <header>
      <h1>Article Title</h1>
      <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content...</p>
  </article>

  <aside aria-label="Related articles">
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/article1">Article 1</a></li>
      <li><a href="/article2">Article 2</a></li>
    </ul>
  </aside>
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリにある詳細な実装ガイド：

ガイド	内容
セマンティック HTML と ARIA	セマンティック HTML と ARIA
キーボード操作	キーボード操作
色のコントラストと視覚的なアクセシビリティ	色のコントラストと視覚的なアクセシビリティ
スクリーンリーダーへの通知	スクリーンリーダーへの通知
アクセシビリティのテスト	アクセシビリティのテスト

ベストプラクティス

✅ 推奨事項

• 確立されたパターンと規約に従います
• クリーンで保守しやすいコードを書きます
• 適切なドキュメントを追加します
• デプロイ前に十分にテストします

❌ 禁止事項

• テストや検証を省略しないでください
• エラー処理を無視しないでください
• 設定値をハードコードしないでください