modern-accessible-html-jsx

クリーンでアクセシブルな HTML

デフォルトで、セマンティックで、アクセシブルかつ標準に準拠した HTML を記述します。 アクセシビリティは基本要件であり、追加機能ではありません。

セマンティクスを第一に

• セマンティック要素（header、nav、main、section、article、footer）を優先します
• セマンティック要素がある場合は、汎用的な div／span の使用を避けます
• 階層を飛ばさず、正しい見出し構造（h1 → h6）を使用します

アクセシビリティ

• インタラクティブ要素がキーボードで操作できることを必ず確認します
• 可能な限り、ARIA よりネイティブな HTML 要素を優先します
• 不適切な HTML のセマンティクスを修正するために ARIA を使用しないでください
• すべてのインタラクティブなコントロールに、アクセシブルな名前を付けます
  • 入力にはラベルを付けます
  • 必要に応じて、aria-label または表示されるテキストを使用します

フォームと入力

• フォームコントロールにはラベルを必ず関連付けます
• ネイティブの検証機能と入力タイプ（email、url、number など）を優先します
• エラーメッセージにアクセシビリティを確保し、適切に読み上げられるようにします

画像とメディア

• 画像には意味のある alt テキストを必ず付けます
• 純粋に装飾目的の画像に限り、空の alt="" を使用します
• 文脈が重要な場合は、キャプション（figcaption）を付けます

ランドマークと構造

• セマンティック要素を使って、ランドマークロールを暗黙的に使用します
• 明確な main 領域を 1 つだけ設けます
• 視覚的なレイアウトだけでなく、スクリーンリーダー向けにコンテンツを構成します

基本原則

• HTML が基盤です。HTML に逆らわないでください
• アクセシビリティは譲れない要件です
• CSS や JS なしで動作するなら、おそらく適切です