ARIA ページテンプレート

ページのフロントマター

title と slug

ARIA ロールのページは titleARIA: Name Of The Role と、 slugARIA/NameOfTheRole_role としてください。例えば、 button ロールtitleARIA: button ロール で、 slugWeb/Accessibility/ARIA/Roles/button_role となり、 aria-labelledby 属性の titlearia-labelledby となります。

先頭のマクロ

コンテンツ部の上部に多くのマクロ呼び出しが現れます。下記のアドバイスに従って更新または削除してください。

  • {{ariaref}} — ページに記載されているタ グに応じて、適切な ARIA サイドバーを生成します。

状態

訳注: 英語版では以下のマクロは自動的に更新されますが、翻訳記事では更新されませんので、翻訳時に手動で英語版のマクロに合わせてください。

(適切な)機能状態キーを含めるマクロです。 実験的非推奨標準外があります。 — 機能状態を追加または更新する方法の節を参照してください。

仕様書

spec_urls フロントマターのメタデータキーの値で、以下の仕様書で正しい節のフラグメント ID を指すように URL を更新してください。

その他のリソースには次のものがあります。

ページテンプレート

概要段落です。ロールや属性の名前で始め、それが何をするのかを説明します。できれば 1 つか 2 つの短い文章で説明してください。このコンテンツは、このページへのリンクのツールチップとして現れます。

html
<!-- よく使用する用途を示すコードブロックを挿入 -->

(オプション)先の例の簡単な説明を記載してください。

解説

属性またはロールの説明を完全に記述してください。

関連する ARIA ロール、状態、プロパティ

関連するロール名

要求される機能の説明、機能ページへのリンク。

関連する属性名

要件の説明、属性のページへのリンク、適切であれば値を変更するために要求される JS へのリンク。

キーボード操作

必要な JavaScript 機能

必要なイベントハンドラー

それぞれの説明

属性値の変更

それぞれの説明

メモ: このロールや属性を使用する意味づけについての注意事項を記載してください。 ARIA 使用の最初のルールは、要素を再利用し、それをアクセシビリティにするために ARIA ロール、状態、プロパティを追加する代わりに、要求される意味づけと動作がすでに組み込まれているネイティブ機能を使用することができるということです。そして、下記のベストプラクティスの節に詳細を紹介してください。

英語版では、ページ内に例が 1 つしかない場合でも、複数形の "Examples" を使用していることに留意してください。

説明的な見出し

それぞれの例には、その例を説明する H3 見出し (###) がなければなりません。見出しは例が何を行っているかを説明するものであるべきです。例えば、「単純な例」というのは例について何も説明していないので、良い見出しとは言えません。見出しは簡潔であるべきです。より詳しい説明をする場合は、見出しの後の段落を使用してください。

詳しくは、サンプルコードを追加する方法のガイドをご覧ください。

メモ: 他のページで紹介されている例にリンクしたい場合もあるでしょう。

シナリオ 1: このページにいくつかの例があり、別のページにさらにいくつかの例がある場合。

このページのそれぞれの例に H3 見出し (###) を記載し、最後に H3 見出し (###) に「その他の例」というテキストを入れ、その下に他のページの例へのリンクを貼ることができます。例えば次のようにします。

md
## 例

### Fetch API の使用

Fetch の例

### その他の例

他のページにある他の例へのリンク

シナリオ 2: このページには何も例がなく、他のページにだけある場合。

H3 の見出しは追加せず、 H2 の見出し「例」の下に直接リンクを追加してください。例えば次のようにします。

md
## 例

この API の例については、[fetch() のページ](https://example.org)を参照してください。

アクセシビリティの考慮

オプションとして、このプロパティを使用することで存在する可能性のあるアクセシビリティ上の懸念と、それを回避する作業方法を警告します。掲載すべきものがなければ、この節は削除してください。

ベストプラクティス

オプションとして、この役割に存在するベストプラクティスを列挙してください。存在しない場合はこの章を削除してください。

追加の利点

支援ロール

そのロールで要求される親、子、兄弟があるかどうか、そしてそのロールが何をするのか。

Google やモバイル音声認識のような、典型的なスクリーンリーダー以外のユーザーにとって、この機能が持つ追加的な利点があれば教えてください。

仕様書

{{Specifications}}

このマクロを使用するには、 Markdown ファイルの逆引用符とバックスラッシュを除去してください。

ブラウザーの互換性

{{Compat}}

このマクロを使用するには、 Markdown ファイルの逆引用符とバックスラッシュを除去してください。

関連情報

現在のロールや属性に関連するリファレンスページやガイドへのリンクを記述してください。その他のガイドラインについては、スタイル設定ガイドの「関連情報」の節を参照してください。

  • リンク1
  • リンク2