diff options
Diffstat (limited to 'files/ja/web/accessibility/aria/roles/feed_role/index.html')
| -rw-r--r-- | files/ja/web/accessibility/aria/roles/feed_role/index.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/roles/feed_role/index.html b/files/ja/web/accessibility/aria/roles/feed_role/index.html new file mode 100644 index 0000000000..ca699a87dc --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/feed_role/index.html @@ -0,0 +1,124 @@ +--- +title: 'ARIA: feed ロール' +slug: Web/Accessibility/ARIA/Roles/Feed_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Feed_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary">フィード（<code>feed</code>）は動的にスクロール可能な記事（<code>article</code>）のリスト（<code>list</code>）で、ユーザーがスクロールすると記事がリストの両端から追加または削除されます。 <code>feed</code> を使用すると、スクリーンリーダーはブラウズモードの読み取りカーソルを使用して、ユーザーが読むにつれてより多くのコンテンツをロードすることで無限にスクロールし続けることができるリッチコンテンツのストリームを読み、スクロールすることができます。</span></p> + +<pre class="brush: html"><section role="feed" <code><a class="state-reference" href="https://w3c.github.io/aria/#aria-busy">aria-busy=</a>"false"</code>> + ... + <tweet role="article" aria-posinset="427" <code>aria-setsize="-1"</code>>...</tweet> + <tweet role="article" aria-posinset="428" <code>aria-setsize="-1"</code>>...</tweet> + <tweet role="article" aria-posinset="429" <code>aria-setsize="-1"</code>>...</tweet> + ... +</section></pre> + +<h2 id="Description" name="Description">Description</h2> + +<div class="role-description" id="desc-feed"> +<p>フィード（feed）は、スクロール可能な記事（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>）のリスト（<a href="/ja/docs/Web/Accessibility/ARIA/Roles/list_Role">list</a>）のためのページ構造であり、スクロールすることで、リストの先頭または末尾に記事が追加され、ウェブページと、スクロールインタラクションを制御する支援技術との間の相互運用契約が確立され、ユーザーが記事を読み、記事を前後にジャンプし、読み取りモードで新しい記事を確実にロードするようにします。 例としては、RSS フィード、ニュースフィード、Facebook（フェイスブック）、Instagram（インスタグラム）、Twitter（ツイッター）などのソーシャルメディアフィード、さらには電子商取引ページ上の関連商品のリストなどがあります。 これらのストリームは有限か無限であり、ユーザーがスクロールするにつれてより多くのコンテンツをロードします。 フィードパターンを実装することで、スクリーンリーダーは読み取りモードを維持しながら、確実に読み取り、フィードコンテンツのロードをトリガーすることができます。</p> + +<p> </p> + +<p><code>feed</code> は、コンテナ要素であり、その子は {{htmlelement("article")}} であるか、<code>article</code> ロールを持ちます。 フィード内の各記事は、<code>tabindex</code> が 0 または -1 でフォーカス可能であるべきです。 記事またはその子孫要素にフォーカスが移ったときに、記事をスクロールして表示するべきです。 記事の追加がメインのブラウザースレッドを占有している場合は、フィード自体に <code>aria-busy="true"</code> を設定し、処理が終了したりユーザーに更新が表示されない場合は <code>false</code> に設定し直してください。</p> + +<p>優れたユーザーエクスペリエンスを確保するため、フィードの途中で記事を挿入または削除しないようにし、ユーザーがフィードの終わりに達する前に新しい記事をロードし、記事間でフォーカスを移動するためのキーボードコマンドを提供して、キーボードユーザーがフィード内をナビゲートできるようにします。 下記のキーボードインタラクションを参照してください。<br> + 記事の数がわかっている場合は、記事自体に <code>aria-setsize</code> を設定してください。 ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、<code>aria-setsize="-1"</code> を設定してフィードのサイズがわからないことを示します。</p> + +<p>フィードパターンのもう1つの特徴は、斜め読みです。 フィード内の記事には、<code>aria-label</code> によるアクセス可能な名前と <code>aria-describeby</code> による説明の両方を含めることで、記事をナビゲートするときに、ラベルの後にどの要素を話すべきかをスクリーンリーダーに提案することができます。 タイトルと主要コンテンツを提供する記事内の要素を識別することによって、支援技術は、ユーザが記事から記事へとジャンプし、どの記事がより注目に値するかを効率的に見分けることを可能にする機能を提供できます。</p> + +<p>フィードパターンは、ウェブページと支援技術の間に次の相互運用性に関する合意を確立することによって、信頼できる支援技術の読み取りモードでのインタラクションを可能にします。</p> + +<ol> + <li>フィードのコンテキストでは、ウェブページのコードは次の責任を負います。 + <ul> + <li>どの記事に DOM フォーカスが含まれているかに基づいて、コンテンツを適切に視覚的にスクロールします。</li> + <li>どの記事に DOM フォーカスが含まれているかに基づいて、フィード記事をロードまたは削除する。</li> + </ul> + </li> + <li>フィードのコンテキストでは、読み取りモードを持つ支援技術は次の責任を負います。 + <ul> + <li>記事要素またはその子孫の1つに DOM フォーカスがあることを確認して、どの記事に読み取りカーソルがあるかを示します。</li> + <li>DOM フォーカスを次の記事および前の記事に移動するための読み取りモードキーを提供します。</li> + <li>読み取りカーソルと DOM フォーカスをフィードの終わりを超えてフィードの開始前に移動するための読み取りモードキーを提供します。</li> + </ul> + </li> +</ol> + +<section class="notoc" id="sect1"> +<h3 id="Keyboard_Interaction" name="Keyboard_Interaction">キーボードインタラクション</h3> + +<p>フォーカスがフィード内にある場合は、次のような、または同様のインターフェースをサポートすることをお勧めします。</p> + +<ul> + <li><kbd>Page Down</kbd>: 次の記事にフォーカスを移動します。</li> + <li><kbd>Page Up</kbd>: 前の記事にフォーカスを移動します。</li> + <li><kbd>Control + End</kbd>: フィードの後方で最初にフォーカス可能な要素にフォーカスを移動します。</li> + <li><kbd>Control + Home</kbd>: フィードの前方で最初にフォーカス可能な要素にフォーカスを移動します。</li> +</ul> + +<p>ブログ投稿のフィード内のコメントフィードなど、フィード内にネストしたフィードがある場合の慣例は、<kbd>Tab</kbd> キーでネストしたフィードにタブで移動し、「外側の」記事からその記事内にネストしたフィードの最初の項目に移動するための <kbd>Alt + Page Down</kbd> などの別のキーを提供することです。 メインフィードとネストしたフィードの間をナビゲートするには、<kbd>Control + End</kbd> で内側のフィードから外側のフィードの次の記事にフォーカスを移動します。</p> +</section> + +<section class="notoc" id="sect2"> +<h3 id="WAI-ARIA_Roles_States_and_Properties" name="WAI-ARIA_Roles_States_and_Properties">関連する <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>フィードに目に見えるタイトルがない場合、<code>feed</code> 要素には <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-label">aria-label</a></code> で指定されたラベルがあります。 もしそうなら、<code>aria-labelledby</code> を見てください。</dd> + <dt>aria-labelledby</dt> + <dd>フィードに目に見えるタイトルがある場合、<code>feed</code> 要素はタイトルを含む要素を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-labelledby">aria-labelledby</a></code> を持ちます。 そうでない場合は、<code>aria-label</code> を追加してください。</dd> + <dt>aria-busy</dt> + <dd>記事をフィードに追加または削除しているときなど、忙しい場合は、更新操作中に <code><a class="state-reference" href="https://w3c.github.io/aria/#aria-busy">aria-busy=</a>"true</code>" を設定します。 操作が完了するか、変更が見えなくなる可能性がある場合は、必ず <code>false</code> にリセットしてください。</dd> + <dt>article</dt> + <dd>フィード内のコンテンツの各セクションは、{{htmlelement("article")}} または <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールを持つ要素に含めるべきです。 各記事（<code>article</code>）は、その記事のタイトルまたは識別ラベルとして役立つその他の子を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-labelledby">aria-labelledby</a></code> を持つべきです。 各記事は、好ましくは、その記事の主要なコンテンツとして役立つ記事内の１つまたは複数の要素を参照する <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-describedby">aria-describedby</a></code> を持つべきです。 各記事要素は、フィード内の位置を表す値に設定された <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-posinset">aria-posinset</a></code> と、ロードされた記事の総数またはフィード内の総数を表す値のどちらかに設定された <code><a class="property-reference" href="https://w3c.github.io/aria/#aria-setsize">aria-setsize</a></code> を持ちます。 それは、どちらの値がユーザーにとってより役立つかによって異なります。 フィード内の総数がわからない場合は、<code>aria-setsize="-1"</code> を設定してください。</dd> +</dl> +</section> + +<p> </p> +</div> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>なし（任意の属性が必要とする場合を除く。 例えば、必要に応じて更新操作中に <code>aria-busy</code> を <code>true</code> に設定し、完了したら <code>false</code> に設定します。）</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="https://w3c.github.io/aria-practices/examples/feed/feed.html">フィードパターンの実装例</a>（英語）</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#feed","feed")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>Coming soon</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("article")}} 要素</li> + <li><a href="/ja/docs/Web/HTML/Element/ul">HTML のリスト</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">ARIA: article ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_Role">ARIA: list ロール</a></li> + <li><cite><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#feed"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices</a></cite> — フィードデザインパターンの実装に関する詳細。（英語）</li> +</ul> |