Block ARIA Landmark Roles
DrupalのブロックにARIAランドマークロールとラベルを追加し、アクセシビリティと支援技術のサポートを向上させます。
block_aria_landmark_roles
インストール
composer require 'drupal/block_aria_landmark_roles:^3.0'
composer require 'drupal/block_aria_landmark_roles:^2.0'
composer require 'drupal/block_aria_landmark_roles:8.x-1.4'
概要
Block ARIA Landmark Rolesは、Drupalのブロック設定フォームを拡張し、サイトビルダーが任意のブロックにWAI-ARIAランドマークロールとラベルを割り当てられるようにします。このモジュールはBlock Classモジュールにインスパイアされており、ウェブサイトのアクセシビリティを向上させるシンプルかつ強力な方法を提供します。
ARIA（Accessible Rich Internet Applications）ランドマークロールは、スクリーンリーダーなどの支援技術がウェブページコンテンツの一般的なセクションを識別し、ナビゲートするのを助けます。「navigation」、「main」、「banner」、「search」などのランドマークロールをブロックに追加することで、障害を持つユーザーがページの構造をより簡単に理解し、関連するセクションに素早くジャンプできるようになります。
このモジュールは各ブロックの設定フォームに折りたたみ可能な設定セクションを追加し、管理者が定義済みリストからランドマークロールを選択し、必要に応じて追加コンテキスト用のカスタムARIAラベルを追加できるようにします。
Features
- ブロック設定フォームに「Landmark role」ドロップダウンを追加し、8つのARIAランドマークロール（application、banner、complementary、contentinfo、form、main、navigation、search）から選択可能
- カスタムARIAラベル用の「Label」テキストフィールドをブロック設定フォームに追加（aria-label属性）
- レンダリング時に選択されたrole属性をブロックラッパー要素に自動的に追加
- ラベルが設定されている場合、aria-label属性を自動的に追加
- Drupalのサードパーティ設定システムを使用し、Block Entityとクリーンに統合
- 設定はブロックごとに保存され、異なるブロックインスタンスに異なるロールを設定可能
Use Cases
メインナビゲーションブロックのマーキング
サイトの主要なナビゲーションブロックに「navigation」ロールを割り当てます。これにより、スクリーンリーダーユーザーは支援技術のランドマークナビゲーション機能を使用して、ナビゲーションセクションに素早くジャンプできます。
メインコンテンツエリアの識別
メインページコンテンツを含むブロックに「main」ロールを適用します。WCAGガイドラインでは、ユーザーが主要コンテンツに直接スキップできるよう、ページごとに1つのmainランドマークを持つことを推奨しています。
複数のナビゲーションブロックの区別
ページに複数のナビゲーションブロック（メインメニュー、フッターメニュー、サイドバーメニュー）がある場合、それぞれに「navigation」ロールを割り当て、「メインナビゲーション」「フッターナビゲーション」「サイドバーナビゲーション」などの個別のARIAラベルを使用して、スクリーンリーダーユーザーがそれらを区別できるようにします。
検索機能のマーキング
検索フォームを含むブロックに「search」ロールを適用します。これにより、ユーザーはサイト上の検索機能を素早く見つけることができます。
ヘッダーとフッター領域の識別
ヘッダーブロック（通常、サイトロゴと主要ナビゲーションを含む）には「banner」ロールを、フッターブロック（通常、著作権、法的リンク、連絡先情報を含む）には「contentinfo」ロールを使用します。
サイドバーコンテンツのマーキング
メインコンテンツに関連する補足コンテンツを含むサイドバーブロックに「complementary」ロールを適用します。これは通常、関連記事、追加リソース、補足情報に使用されます。
フォームブロックの識別
お問い合わせフォーム、ニュースレター登録フォーム、ログインブロックなど、主にフォーム要素を含むブロックに「form」ロールを適用します。
Tips
- 「main」ロールはページごとに1回のみ使用してください - 主要コンテンツエリアを識別するためのものです
- すべてのページには理想的に「banner」（ヘッダー）と「contentinfo」（フッター）のランドマークが必要です
- 同じロールを持つ複数のブロックを使用する場合は、それらを区別するために必ず説明的なARIAラベルを追加してください
- 「application」ロールは控えめに使用してください - 特別なキーボード操作が必要なインタラクティブウィジェットにのみ使用します
- ブラウザのアクセシビリティ開発者ツールまたはスクリーンリーダーソフトウェアを使用してランドマーク構造をテストしてください
- 最大限のアクセシビリティコンプライアンスを確保するために、WCAG 2.1ガイドラインに従って適切にランドマークを使用してください
Technical Details
Admin Pages 1
/admin/structure/block/manage/{block_id}
任意のブロックを編集する際、「Block ARIA Landmark Roles settings」というタイトルの新しい折りたたみ可能なフィールドセットが表示されます。このセクションでは、管理者がアクセシビリティ向上のためにブロックのARIAランドマークロールとラベルを設定できます。
Hooks 2
hook_form_block_form_alter
ブロック設定フォームを変更し、サードパーティ設定を使用してARIAランドマークロールとラベルフィールドを追加します。
hook_preprocess_block
ブロック変数を前処理し、設定されたARIAロールとラベル属性をブロックラッパー要素に追加します。
Troubleshooting 3
「- None -」以外のロールを選択し、ブロック設定を保存したことを確認してください。また、テーマのブロックテンプレートが$attributes変数を出力しているか確認してください。カスタムテーマによっては、すべてのブロック属性が含まれていない場合があります。
同じランドマークロールを持つ複数のブロック（例：複数のナビゲーションブロック）がある場合、スクリーンリーダーユーザーがそれらを区別できるよう、必ず各ブロックに固有のARIAラベルを追加してください。
Block ARIA Landmark Rolesモジュールが有効になっていることを確認してください。最近有効にしてフィールドが表示されない場合は、DrupalのCacheをクリアしてください。