{{draft}}\{{ariaref}}
- -main ランドマークロールは、文書の主要なコンテンツを示すために使用されます。 メインコンテンツ領域は、文書の中心的な話題と直接に関連したり発展させるコンテンツや、アプリケーションの中心的な機能のコンテンツで構成されます。
メイン (main) ランドマークロールは、文書の主要なコンテンツを示すために使用します。 メインコンテンツ領域は、文書の中心的な話題やアプリケーションの中心的な機能と直接関連したり、それらを拡張するコンテンツで構成されます。
<div id="main" role="main"> <h1>アボカド</h1> @@ -17,82 +15,82 @@ translation_of: Web/Accessibility/ARIA/Roles/Main_role </div>-
これは、アボカドについて議論する文書のメインセクションです。 この文書のサブセクションでは、その歴史、品種の違い、栽培地域などを議論することができます。
+これは、アボカドについて説明する文書のメインセクションです。 この文書のサブセクションでは、その歴史、さまざまな品種、栽培地域などについて説明します。
main ロールは、文書のメイン（main）コンテンツを識別するナビゲーションに関するランドマークロールです。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、main ロールは「メインコンテンツへスキップする」リンクの代わりです。 文書ごとに1つの main ランドマークロールがあるべきです。
メイン (main) ロールは、文書のメインコンテンツを識別する、ナビゲーションに関するランドマークロールです。 ランドマークは、支援技術によって、文書の大きなセクションをすばやく識別してナビゲートするために使用できます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝えられる構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションへのキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、メインロールは「メインコンテンツへスキップする (Skip to main content) 」リンクの代わりになります。 メイン (main) ランドマークロールは、文書ごとに1つだけあるべきです。
{{htmlelement("main")}} 要素は main ロールを持ちます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。
<main> 要素は、メイン (main) ロールを持ちます。 開発者は、ARIA を使用するよりも、正しい意味論の HTML 要素を使用することを常に好むべきです。
文書とアプリケーションは DOM にネストすることができます。 これにより、DOM の子孫として複数のメイン要素が存在する可能性があります。 このような場合は、aria-owns を組み込んで、文書やアプリケーションの祖先に対するメインの関係を識別します。
文書 (document) とアプリケーション (application) は DOM 内でネストすることができます。 これにより、DOM の子孫として複数のメイン要素を持つことになる可能性があります。 このような場合には、メインとその祖先である文書やアプリケーションとの関係を識別するために aria-owns を含めます (訳注: aria-owns は、DOM 階層で親子関係に無い要素において、親に指定することで子でない要素を子として組み込むためのものであり、文書やアプリケーションとメインが DOM 階層で親子関係にあれば必要ありません) 。
<body> - <!-- 主要なナビゲーション --> +<body> + <!-- 主要なナビゲーション --> <div role="main"> - <h1>第一次インドシナ戦争</h1> + <h1>第一次インドシナ戦争</h1> <!-- 記事のコンテンツ --> - </div> + </div> <!-- サイドバーとフッター --> -</body> +</body>
main ロールのみを使用するmain ロールを1つのみ使用するmain ランドマークロールは、文書ごとに1回のみ使用するべきです。
メイン (main) ランドマークロールは、文書ごとに1回のみ使用するべきです。
文書に2つの main ロールが含まれている場合、JavaScript でトリガされたときにページコンテンツを更新するなどで、hidden 属性を切り替えるなどのテクニックによって、非アクティブな main ロールの存在を支援技術から取り除くべきです。
JavaScript によってトリガーされたときにページコンテンツを更新するなどで、文書に2つのメイン (main) ロールが含まれている場合、hidden 属性をトグルするなどの手法によって、アクティブでないメイン (main) ロールの存在を支援技術から取り除くべきです。
<main> - <h1>アクティブな <code>main</code> 要素</h1> - <!-- コンテンツ --> -</main +<main> + <h1>アクティブな <code>main</code> 要素</h1> + <!-- コンテンツ --> +</main> -<main hidden> - <h1>隠された <code>main</code> 要素</h1> - <!-- コンテンツ --> -</main> +<main hidden> + <h1>隠された <code>main</code> 要素</h1> + <!-- コンテンツ --> +</main>ベストプラクティス
好ましい HTML
-{{htmlelement("main")}} 要素を使用すると自動的にセクションが
+mainロールを持つことを伝えます。 可能であれば、<main>を代わりに使用することをお勧めします。
<main>要素を使用すると自動的にセクションがメイン (main) ロールを持つことを伝えます。 可能な限り、<main>要素を代わりに使用することをお勧めします。スキップナビゲーション
-スキップナビゲーション（"skipnav" とも呼ばれる）は、支援技術のユーザーが繰返したコンテンツ（メインナビゲーション、情報バナーなど）の大きなセクションをすばやくバイパスすることを可能にするテクニックです。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。
+スキップナビゲーション (スキップナビ (skipnav) とも呼ばれる) は、支援技術のユーザーが繰り返されるコンテンツの大きなセクション (メインナビゲーション、情報バナーなど) をすばやくバイパスできるようにする手法です。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。 (訳注: このページでも、ページが表示されたらすぐ Tab キーを押すことで、ページ上部にリンクが表示されるようになっています。)
-+
role="main"という宣言を持つ要素にid属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。-
role="main"という宣言を持つ要素にid属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。<body> - <a href="#main-content">メインコンテンツへスキップする</a> +<body> + <a href="#main-content">メインコンテンツへスキップする</a> - <!--ナビゲーションとヘッダーのコンテンツ --> + <!-- ナビゲーションとヘッダーのコンテンツ --> <div id="main-content" role="main"> - <!-- メインページのコンテンツ --> + <!-- メインページのコンテンツ --> </div> -</body> +</body>
ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。
+ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、スクリーンリーダーを使用していないユーザーでも文書の大きなセクションを素早く識別してナビゲートできます。