diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/accessibility/aria | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/accessibility/aria')
65 files changed, 7880 insertions, 0 deletions
diff --git a/files/ja/web/accessibility/aria/aria_guides/index.html b/files/ja/web/accessibility/aria/aria_guides/index.html new file mode 100644 index 0000000000..3bebf397dd --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_guides/index.html @@ -0,0 +1,26 @@ +--- +title: ARIA ガイド +slug: Web/Accessibility/ARIA/ARIA_Guides +tags: + - ARIA +translation_of: Web/Accessibility/ARIA/ARIA_Guides +--- +<p>Accessible Rich Internet Applications (<strong>ARIA</strong>) は障がいのある人にとってウェブをもっとアクセシブルにする方法です。それに従ういくつかのガイドラインは、ウィジェットの配置のためのドラッグアンドドロップのように、よりよいアクセシビリティを保証します。</p> + +<ul> + <li>フォームのエラー処理</li> + <li>ウィジェットへのラベルづけ</li> + <li>複合ウィジェットや領域のラベルづけ</li> + <li>複合ウィジェットのフォーカス管理 (aria-activedescendant vs roving tabindex)</li> + <li>ランドマークロールを使う</li> + <li>動的更新とライブ領域を扱う</li> + <li>AT製品の仮想と非仮想モード</li> + <li>ドラッグアンドドロップを使う</li> + <li>非ARIA なスクリーンリーダーのユーザーへの通知</li> + <li>プレゼンテーションロールの構造を固定する</li> + <li>レイアウト表を隠す</li> + <li>モーダルと非モーダルなダイアログを管理する</li> + <li>HTML5 で ARIA を使う</li> + <li>ARIA をテストする方法</li> + <li>モバイル端末での ARIA</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_live_regions/index.html b/files/ja/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..15bffb8945 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,227 @@ +--- +title: ARIA ライブリージョン +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +tags: + - ARIA + - Accessibility + - ariaLive +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<p>JavaScript を使うと、検索結果のリストを瞬時に更新する、もしくはユーザーの操作を必要としないような控えめなアラートや通知を表示するなど、ページ全体をリロードせずにページの一部を動的に変更することができます。 これらの変更は通常ページを見ることのできるユーザーにとっては視覚的に明らかですが、支援技術ユーザーにとっては明確ではないかもしれません。ARIA ライブリージョンはこのギャップを埋め、動的なコンテンツの変更を支援技術により通知できるやり方で、プログラムによって表出させる方法を提供します。</p> + +<div class="note"> +<p><strong>注記</strong>: 支援技術はライブリージョンへのコンテンツの動的な変更を通知します。ライブリージョンはブラウザーと支援技術が認識できるように最初から（かつ空で）存在しなければなりません。続いて後に起こる変更は通知されます。</p> + +<p>単に読み込まれた最初のマークアップに <code>aria-live</code> 属性もしくは 特化したライブリージョン <code>role</code> （例えば <code>role="alert"</code> など）を含めても何も効果はありません。</p> + +<p><code>aria-live</code> 属性もしくは特化した <code>role</code> をドキュメントへ動的に追加しても支援技術による通知は発生しません (その時点で支援技術はまだライブリージョンを認識していないので、変更を監視することができません)。</p> + +<p>常にライブリージョンが最初からドキュメントに存在することを確認して動的なコンテンツの追加／変更をしてください。</p> +</div> + +<h2 id="Simple_Live_Regions" name="Simple_Live_Regions"><span class="mw-headline" id="Live_Region_State">単純なライブリージョン</span></h2> + +<p>ページのリロードなしに更新される動的なコンテンツは、ほとんどの場合領域もしくはウィジェットのどちらかです。 対話的でないシンプルなコンテンツの変更は、ライブリージョンとして記されるべきです。以下は、関連する ARIA ライブリージョンプロパティと説明の一覧です。</p> + +<ol> + <li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code> はスクリーンリーダーがライブリージョンの更新処理の優先度を設定するために使われます。設定は <code>off</code>、<code>polite</code>、<code> assertive</code> で、デフォルトは <code>off</code> です。この属性は間違いなく最も重要な属性です。</li> + <li> + <p class="comment"><code><strong>aria-controls</strong></code>: <code>aria-controls=[IDLIST]</code> は領域とそれをコントロールするものを関連付けるために使用されます。領域は <code>div</code> の <code>id</code> のように識別され、スペースを用いて複数の領域を aria-controls に関連付けることができます。例えば <code>aria-controls="myRegionID1 myRegionsID2"</code>。</p> + + <div class="warning">ライブリージョンの aria-controls の側面が現在の AT に実装されているか、どの AT で実装されているかはわかりません。調査が必要です。</div> + </li> +</ol> + +<p>通常、<code>aria-live="polite"</code> のみが使われます。ユーザーにとって重要な更新を受け取るが、うるさくなるほど速くすべきでない領域にはこの属性を設定すべきです。スクリーンリーダーはユーザーがアイドル状態になったときに読み上げを行います。</p> + +<p>重要ではない、もしくは迅速な更新や他の理由からうるさくなるような領域は、<code>aria-live="off"</code> で黙らせます。</p> + +<h3 id="Dropdown_box_updates_useful_onscreen_information" name="Dropdown_box_updates_useful_onscreen_information">有益な画面上の情報を更新するドロップダウンボックス</h3> + +<p>ある惑星についての情報を提供することに特化したウェブサイトはドロップダウンボックスを提供します。ドロップダウンから惑星が選ばれたとき、選択された惑星の情報でページ上のリージョンは更新されます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><fieldset> + <legend>Planet information</legend> + <label for="planetsSelect">Planet:</label> + <select id="planetsSelect" aria-controls="planetInfo"> + <option value="">Select a planet&hellip;</option> + <option value="mercury">Mercury</option> + <option value="venus">Venus</option> + <option value="earth">Earth</option> + <option value="mars">Mars</option> + </select> + <button id="renderPlanetInfoButton">Go</button> +</fieldset> + +<div role="region" id="planetInfo" aria-live="polite"> + <h2 id="planetTitle">No planet selected</h2> + <p id="planetDescription">Select a planet to view its description</p> +</div> + +<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const PLANETS_INFO = { + mercury: { + title: 'Mercury', + description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.' + }, + + venus: { + title: "Venus", + description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.' + }, + + earth: { + title: "Earth", + description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' + }, + + mars: { + title: "Mars", + description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' + } +}; + +function renderPlanetInfo(planet) { + const planetTitle = document.querySelector('#planetTitle'); + const planetDescription = document.querySelector('#planetDescription'); + + if (planet in PLANETS_INFO) { + planetTitle.textContent = PLANETS_INFO[planet].title; + planetDescription.textContent = PLANETS_INFO[planet].description; + } else { + planetTitle.textContent = 'No planet selected'; + planetDescription.textContent = 'Select a planet to view its description'; + } +} + +const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); + +renderPlanetInfoButton.addEventListener('click', event => { + const planetsSelect = document.querySelector('#planetsSelect'); + const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; + + renderPlanetInfo(selectedPlanet); +}); +</pre> + +<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p> + +<p>ユーザーが新しい惑星を選択したとき、ライブリージョンの情報が通知されます。ライブリージョンは <code>aria-live="polite"</code> を持っているため、更新の通知が行われる前にユーザーが一時停止するまでスクリーンリーダーは待ちます。例えばリストを下りながら他の惑星を選択してもライブリージョンの更新は通知されないでしょう。最終的に選ばれた惑星のみライブリージョンの更新は通知されます。</p> + +<p>ここにはライブリージョンへ (字幕を通して) 更新を通知している、Mac に内蔵している VoiceOver のスクリーンショットがあります:</p> + +<p><img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p> + +<h2 id="Preferring_Specialized_Live_Region_Roles" name="Preferring_Specialized_Live_Region_Roles">優先する専門のライブリージョンロール</h2> + +<p>次のよく知られている事前に定義されているケースでは、専門的に用意された "ライブリージョンロール" を使ったほうが良いでしょう:</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">ロール</th> + <th scope="col">説明</th> + <th scope="col">互換性に関する注意事項</th> + </tr> + </thead> + <tbody> + <tr> + <td>log</td> + <td>チャット、エラー、ゲームもしくは別種のログ</td> + <td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加します。</td> + </tr> + <tr> + <td>status</td> + <td>ある種の更新された状態を表すステータスバーもしくはスクリーン領域。スクリーンリーダーのユーザーは現在のステータスを読みとるための特別なコマンドを持っています。</td> + <td>互換性を最大限にするために、このロールを使う際には冗長な <code>aria-live="polite"</code> を追加します。</td> + </tr> + <tr> + <td>alert</td> + <td>スクリーン上で点滅するエラーもしくはアラートメッセージ。アラートは特に、クライアントサイドでユーザーへのバリデーションの通知で重要です。(TBD: ARIAフォームのチュートリアルへのリンク)</td> + <td>互換性を最大限にするために、このロールを使う際に <code>aria-live="assertive"</code> を追加するよう勧める人もいます。しかし、<code>aria-live</code> と <code>role=alert</code> の両方を追加することは iOS の VoiceOver で二重に読み上げられてしまうという問題を引き起こします。</td> + </tr> + <tr> + <td>progressbar</td> + <td>ウィジェットとライブリージョンのハイブリッド。aria-valuemin や aria-valuenow、aria-valuemax と共に使います。</td> + <td></td> + </tr> + <tr> + <td>marquee</td> + <td>株式相場表示機のようなスクロールするテキストのためのものです。</td> + <td></td> + </tr> + <tr> + <td>timer</td> + <td>カウントダウンタイマーやストップウォッチなどの、ある種のタイマーや時計。</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Advanced_Live_Regions" name="Advanced_Live_Regions">高度なライブリージョン</h2> + +<p>(TBD: OS/Browser/AT の組み合わせによる個々の属性についてのサポートに関するより詳しい情報)。</p> + +<p>一般的なライブリージョンへのサポートはバージョン 10.0 の JAWS へ追加されました。Windows Eyes ではバージョン 8.0 以降から「Microsoft Internet Explorer と Mozilla Firefox でブラウザーモード外での使用で」ライブリージョンをサポートしています。 NVDA は 2008年 に Mozilla Firefox に対するいくつかの基本的なライブリージョンのサポートを追加し、2010 年から 2014 年までに改善されました。2015 年には Internet Explorer (MSHTML) 向けにも基本的なライブリージョンのサポートが追加されました。</p> + +<p>The Paciello Group は、<a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">ライブリージョンのサポート状況についての情報</a> (2014) をいくつかもっています。Paul Jadam は特に <a href="http://pauljadam.com/demos/aria-atomic-relevant.html">aira-atomic と aria-relevant のサポート</a>についてのリサーチをしました。</p> + +<ol> + <li><code><strong>aria-atomic</strong></code>: <code>aria-atomic=BOOLEAN</code> は領域の一部だけが変更された場合でも、スクリーンリーダーが常にライブリージョン全体を読み上げるかどうかを設定します。可能な設定は <code>false</code> または <code>true</code> で、デフォルトは <code>false</code> です。</li> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code>: <code>aria-relevant=[LIST_OF_CHANGES]</code> はどういったタイプの変更がライブリージョンに関連するかを設定します。可能な設定は <code>additions</code>、<code>removals</code>、<code>text</code>、<code>all</code> で、 <code>additions text</code> がデフォルトです。</li> + <li><code><strong>aria-labelledby</strong></code>: <code>aria-labelledby=[IDLIST]</code> は領域とラベルを関連付けるために使われます。<code>aria-controls</code> と似ていますが、複数のラベルを領域へ関連付けられ、複数のラベル識別子は空白によって区切られます。</li> + <li><code><strong>aria-describedby</strong></code>: <code>aria-describedby=[IDLIST]</code> は領域と説明の関連付けを行います。<code>aria-controls</code> と似ていますが、複数の説明を領域を関連付けられ、説明の識別子は空白によって区切られます。</li> +</ol> + +<h3 id="Advanced_Use_Case_Clock" name="Advanced_Use_Case_Clock"><span class="mw-headline" id="Use_Case:_Clock">高度なユースケース: Clock</span></h3> + +<p><code>aria-atomic</code> についての説明のために、時間と分を表するシンプルな時計を表示するサイトを考えます。時計は単に現在のコンテンツを上書きする、新しい残り時間により毎分更新されます。</p> + +<pre class="notranslate"><div id="clock" role="timer" aria-live="polite"></div> +</pre> + +<pre class="brush: js notranslate">/* basic JavaScript to update the clock */ + +setInterval(function() { + var now = new Date(); + document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); +}, 60000); +</pre> + +<p>最初の関数が実行されると、追加された文字列のすべてが通知されます。 その後の呼び出しでは、過去のコンテンツと比較して変更されたコンテンツの一部が通知されます。例えば、時計が "17:33" から "17:34" へ変更されたとき、支援技術は "4" のみを通知します。これはユーザーにとってほとんど役に立たないでしょう。</p> + +<p>一つの回避策は最初にライブリージョンのコンテンツをクリアしてから、新しいコンテンツを挿入することです。しかしながら、この方法はこれら二更新の正確なタイミングに依存するため、しばしば信頼性にかけることがあります。</p> + +<p><code>aria-atomic="true"</code> はライブリージョンが更新されるたびに、コンテンツの更新がすべて (例 "Time: 17:34") 通知されることを保証します。</p> + +<pre class="notranslate"><div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> +</pre> + +<h3 id="Advanced_Use_Case_Roster" name="Advanced_Use_Case_Roster"><span class="mw-headline" id="Use_Case:_Roster">高度なユースケース: Roster</span></h3> + +<p>チャットサイトでは、現在ログインしているユーザーを表示したいと思うでしょう。ページをリロードすることなく、ユーザーのログインおよびログアウトステータスが動的に反映されるユーザーの一覧を表示します。</p> + +<pre class="notranslate"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- use JavaScript to add remove users here--> +</ul> +</pre> + +<p>ARIA ライブプロパティの内訳:</p> + +<ul> + <li><code>aria-live="polite"</code> はスクリーンリーダーが更新をユーザーへ通知する前に、ユーザーがアイドル状態になるまで待つべきであることを示しています。"assertive" でユーザーを中断すると、ユーザーのフローを妨げるかもしれないためこれが最も一般的に使用される値です。</li> + <li>追加または削除されたユーザーのみが読み上げられるべきで、全体の roster は都度読み上げられるべきではありません。そのため <code>aria-atomic</code> は設定されていません (デフォルトの <code>false</code> が入ります)。</li> + <li><code>aria-relevant="additions removals"</code> により追加もしくは削除されたユーザーが読み上げられることを確かにします。</li> +</ul> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html new file mode 100644 index 0000000000..2cd5772e94 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html @@ -0,0 +1,32 @@ +--- +title: ARIA Screen Reader Implementors Guide +slug: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +--- +<h2 id="Live_Regions">Live Regions</h2> + +<p>This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete.</p> + +<h3 id="Interpreting_WAI-ARIA_live_region_markup">Interpreting WAI-ARIA live region markup</h3> + +<ol> + <li>Live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no WAI-ARIA hints.</li> + <li>Optionally, create a second, additional queue if the user configures a second hardware channel: If there are two channels for presentation (e.g. text to speech and a Braille display), then two queues can be maintained to allow for parallel presentation. The channels could be user configured for presenting live regions based on role or politeness.</li> + <li>Busy regions: Any changes in a region marked with aria-busy="true" should not be added to the queue until that attribute is cleared.</li> + <li>Politeness (aria-live or from role) takes first precedence,: items should be added to the queue based on their politeness level from the aria-live property or inherited from the role (e.g. role="log" is polite by default). Assertive items are first then politeness level. Alternatively, implementations may choose to have a policy of clearing more polite items, e.g. assertive items clear any polite items from the queue.</li> + <li>Time takes second precedence: Prioritize items with the same politeness level according to when the event occurs (earlier events come first). Present items of the same politeness level in the order of what occurred first.</li> + <li>Atomic (aria-atomic="true") regions with multiple changes should not be presented twice with the same content. As a new event for an atomic region is added to the queue remove an earlier event for the same region. It is probably desirable to have at least a tiny timeout before presenting atomic region changes, in order to avoid presenting the region twice for two changes that occur quickly one after the other.</li> + <li>Include labels when presenting changes: if the change occurs in something with a semantic label of some kind, speak the label. This is particularly important for changes in data cells, where the column and row headers provide important contextual information.</li> +</ol> + +<h3 id="Ideas_for_Settings_and_Heuristics">Ideas for Settings and Heuristics</h3> + +<ol> + <li>Allow for a different voice (in text-to-speech) or other varying presentational characteristics to set live changes apart.</li> + <li>When no WAI-ARIA markup is present, automatically present some changes unless the user configures all live changes to off. For example, automatically speak changes that are caused by the user's own input, as part of the context of that input.</li> + <li>Allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics)</li> +</ol> + +<h3 id="Details_for_Processing_via_Platform_Accessibility_APIs">Details for Processing via Platform Accessibility APIs</h3> + +<p>We hope browser manufacturers will work to provide consistent implementations. The most complete implementation of live regions currently is in Firefox 3. Here is how <a href="/en/AJAX/WAI_ARIA_Live_Regions//API_Support" title="http://developer.mozilla.org/editor/fckeditor/core/editor/en/AJAX/WAI_ARIA_Live_Regions//API_Support">WAI-ARIA live regions are exposed in Firefox 3</a>.</p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/index.html b/files/ja/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..b9a4af2949 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,216 @@ +--- +title: 'ARIA を使用する: ロール、ステート、プロパティ' +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - Overview + - Reference + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<h2 id="Roles" name="Roles">ロール</h2> + + + +<h3 id="Widget_roles" name="Widget_roles">ウィジェットロール</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">Dialog</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_Gridcell_Role">Gridcell</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li> + <li>Menuitem</li> + <li>Menuitemcheckbox </li> + <li>Menuitemradio</li> + <li>Option</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> + <li>Scrollbar</li> + <li>Searchbox</li> + <li>Separator（フォーカス可能な場合）</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Switch_role">Switch</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role">Tab</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">Textbox</a></li> + <li>Treeitem</li> +</ul> +</div> + +<h3 id="Composite_roles" name="Composite_roles">複合ロール</h3> + +<p>以下のテクニックでは、それぞれの複合ロールとその必須および任意の子ロールについて説明します。</p> + +<div class="index"> +<ul> + <li>Combobox</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">Grid</a> （<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader ロールを含む）</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/listbox_role">Listbox </a> （option ロールを含む）</li> + <li>Menu</li> + <li>Menubar</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup （radio ロールを参照）</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">Tablist</a> （<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a> ロールを含む）</li> + <li>Tree</li> + <li>Treegrid</li> +</ul> +</div> + +<h3 id="Document_structure_roles" name="Document_structure_roles">文書構造ロール</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">Application</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">Article</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">Cell</a></li> + <li>Columnheader</li> + <li>Definition</li> + <li>Directory</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role">Document</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Figure_Role">Figure</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">Grid</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/heading_role">Heading</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Role_Img">Img</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">List</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">Listitem</a></li> + <li>Math</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">None（presentation ロールと同義）</a></li> + <li>Note</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">Row</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">Rowgroup</a></li> + <li>Rowheader</li> + <li>Separator</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">Table</a></li> + <li>Term</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">Textbox</a></li> + <li>Tooltip</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> +</ul> +</div> + +<h3 id="Landmark_roles" name="Landmark_roles">ランドマークロール</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">Banner</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">Complementary</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">Contentinfo</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">Form</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">Main</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">Navigation</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">Region</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Search_role">Search</a></li> +</ul> +</div> + +<h3 id="Live_Region_Roles" name="Live_Region_Roles">ライブリージョンロール</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role">Alert</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li> + <li>Marquee</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role">Status</a></li> + <li>Timer</li> +</ul> +</div> + +<h3 id="Window_Roles" name="Window_Roles">ウィンドウロール</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Alertdialog</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">Dialog</a></li> +</ul> +</div> + +<h2 id="States_and_properties" name="States_and_properties">ステートとプロパティ</h2> + +<h3 id="Widget_attributes" name="Widget_attributes">ウィジェット属性</h3> + +<div class="index"> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-errormessage</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute">aria-invalid</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-modal</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-placeholder</li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> +</div> + +<h3 id="Live_region_attributes" name="Live_region_attributes">ライブリージョン属性</h3> + +<div class="index"> +<ul> + <li>aria-live</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +</div> + +<h3 id="Drag_drop_attributes" name="Drag_drop_attributes">ドラッグ＆ドロップ属性</h3> + +<div class="index"> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +</div> + +<h3 id="Relationship_attributes" name="Relationship_attributes">関係属性</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute">aria-activedescendant</a></li> + <li>aria-colcount</li> + <li>aria-colindex</li> + <li>aria-colspan</li> + <li>aria-controls</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></li> + <li>aria-details</li> + <li>aria-errormessage</li> + <li>aria-flowto</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-rowcount</li> + <li>aria-rowindex</li> + <li>aria-rowspan</li> + <li>aria-setsize</li> +</ul> +</div> + +<h3 id="MicrosoftEdge-specific_properties" name="MicrosoftEdge-specific_properties">MicrosoftEdge 固有のプロパティ</h3> + +<div class="index"> +<ul> + <li><a href="/ja/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> +</ul> +</div> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..4e3afbf773 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,145 @@ +--- +title: alert ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +tags: + - ARIA + - Accessibility + - Advanced + - CSS + - Example + - HTML + - NeedsContent + - alert + - alert role + - alertrole + - alerts + - assitive technology + - role configuration + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +<h3 id="説明">説明</h3> + +<div class="summary"> +<p><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a> ロールの使用方法についての技術デモとブラウザおよび支援技術に及ぼす影響の説明。</p> +</div> + +<p>alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザの注意を即座に必要とする場合において最も便利です、例えば:</p> + +<ul> + <li>不正な値がフォームフィールドに入れられたとき</li> + <li>ユーザーのログインセッションが切れようとしているとき</li> + <li>サーバーとの接続が切れ、ローカルの変更が保存されないとき</li> +</ul> + +<p>その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。</p> + +<h3 id="ユーザーエージェントと支援技術への影響">ユーザーエージェントと支援技術への影響</h3> + +<p>アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります:</p> + +<ul> + <li>オペレーティングシステムのアクセシビリティAPIにアラートロールを持った要素を公開します。</li> + <li>もしサポートしていればオペレーティングシステムのアクセシビリティAPIを使ったアクセシブルなアラートイベントを発火する。</li> +</ul> + +<p>支援技術製品はそのようなイベントを監視し、それに応じてユーザへ通知すべきです:</p> + +<ul> + <li>スクリーンリーダーは現在のアウトプット（音声または点字関係なく）を妨害し、直ちにアラートメッセージをアナウンスもしくは表示すことがあります。</li> + <li>画面拡大鏡はアラートが起こったこと、およびアラートテキストが何であるかを視覚的に示すことがあります。 </li> +</ul> + +<div class="note"><strong>注釈:</strong> 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。</div> + +<h3 id="例">例</h3> + +<h4 id="例1_HTMLコードへのロールの追加">例1: HTMLコードへのロールの追加</h4> + +<p>下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。</p> + +<pre class="brush: html"><h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2></pre> + +<h4 id="例2_動的にアラートロールをもつ要素を追加">例2: 動的にアラートロールをもつ要素を追加</h4> + +<p>このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。</p> + +<pre class="brush: js">var myAlert = document.createElement("p"); +myAlert.setAttribute("role", "alert"); +var myAlertText = document.createTextNode("You must agree with our terms of service to create an account."); +myAlert.appendChild(myAlertText); +document.body.appendChild(myAlert); +</pre> + +<p><strong>注:</strong> jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます:</p> + +<pre class="brush: js">$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body); +</pre> + +<h4 id="例3_存在する要素へのアラートロールの追加">例3: 存在する要素へのアラートロールの追加</h4> + +<p>時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために <code>role="alert</code> を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています:</p> + +<pre class="brush: html"><p id="formInstruction">You must select at least 3 options</p> +</pre> + +<pre class="brush: js">// When the user tries to submit the form with less than 3 checkboxes selected: +document.getElementById("formInstruction").setAttribute("role", "alert");</pre> + +<h4 id="例4_アラートロールをもつ要素を表示する">例4: アラートロールをもつ要素を表示する</h4> + +<p>要素が既に <code>role="alert"</code> を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。</p> + +<p><strong>注: </strong>ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザへ問題があると間違って信じこませてしまうかもしれません。</p> + +<pre class="brush: css">.hidden { + display:none; +} +</pre> + +<pre class="brush: html"><p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p> +</pre> + +<pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: +document.getElementById("expirationWarning").className = ""; </pre> + +<h4 id="実施例">実施例:</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Alert role example using an ARIA alert box</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alert example using a modal ARIA dialog box</a></li> +</ul> + +<h3 id="注記">注記 </h3> + +<ul> + <li>要素でのアラートロールの使用は要素が <code>aria-live="assertive"</code> を持っていることを意味します。</li> + <li>アラートロールは静的な文章のためにのみ使用されるべきです。アラートロールが使用された要素はフォーカスを受け取ることができず、スクリーンリーダーはキーボードフォーカスが現在位置している場所にかかわらずに自動的にアラートをアナウンスするかもしれません。</li> + <li>もしアラートが双方向のコントロール (ユーザが問題を修正できるフォームコントロールや、アラートを破棄する "OK" ボタンなど) を提供する場合、<a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alert role">アラートダイアログ</a>ロールを代わりに使用するべきです。 </li> +</ul> + +<h3 id="使用される_ARIA_属性">使用される ARIA 属性</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a></li> +</ul> + +<h3 id="関連_ARIA_技術">関連 ARIA 技術</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="en/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Using the alertdialog role</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property" title="Using the aria-invalid property">Using the aria-invalid property</a></li> +</ul> + +<h3 id="互換性">互換性</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="その他のリソース">その他のリソース</h3> + +<ul> + <li>ARIA Best Practices - Alert Role: <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert</a></li> +</ul> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..97ecd72b2b --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,86 @@ +--- +title: alertdialog ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +<h3 id="Description" name="Description">説明</h3> + +<div class="summary"> +<p>このテクニックは、<code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">alertdialog</a></code> ロールの使用方法を示しています。</p> +</div> + +<p><code>alertdialog</code> ロールは、ユーザーの即時の注意を要する緊急情報をユーザーに通知するために使用されます。 その名前が示すように、<code>alertdialog</code> は一種のダイアログです。 これは、「<a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">ARIA: <code>dialog</code> ロール</a>」で提供されているほとんどの指示が <code>alertdialog</code> ロールにも適用できることを意味します。</p> + +<ul> + <li>アラートダイアログには常に（<code>aria-labelledby</code> または <code>aria-label</code> を通じて）アクセス可能な名前を付ける必要があります。 ほとんどの場合、アラートテキストはアラートダイアログのアクセス可能な説明としてマークアップする必要があります（<code>aria-describeby</code> を使用）。</li> + <li>通常のアラートとは異なり、アラートダイアログには少なくとも1つのフォーカス可能なコントロールがあり、アラートダイアログが表示されたらフォーカスをそのコントロールに移動する必要があります。 一般にアラートダイアログには、フォーカスを移動するために使用できる[確認]、[閉じる]、または[キャンセル]ボタンが少なくともあります。 さらに、アラートダイアログには、テキストフィールド、タブ、チェックボックスなどの他のインタラクティブなコントロールを含めることができます。 どの特定のコントロールにフォーカスに移動するべきかは、ダイアログの目的によって異なります。</li> + <li>アラートダイアログ内のタブ順序は折り返す必要があります。</li> +</ul> + +<p>通常のダイアログとの違いは、<code>alertdialog</code> ロールはアラート、エラー、またはワーニングが発生した場合にのみ使用するべきであることです。 言い換えれば、ダイアログの情報とコントロールがユーザの即時の注意を必要とするとき、<code>dialog</code> の代わりに <code>alertdialog</code> が使用されるべきです。 この区別をするのは開発者次第です。</p> + +<p>その緊急性のために、アラートダイアログは常にモーダルでなければなりません。</p> + +<div class="note"><strong>注</strong>: このロールは、インタラクティブなコントロールに関連付けられているアラートメッセージにのみ使用するべきです。 アラートダイアログに静的コンテンツしか含まれておらず、インタラクティブなコントロールがまったくない場合は、<code>alertdialog</code> がここで使用する適切なロールではない可能性があります。 その場合は、代わりに <code>alert</code> ロールを使用するべきです（<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role">ARIA: <code>alert</code> ロール</a>の説明を参照）。</div> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>alertdialog</code> ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。</p> + +<ul> + <li>オペレーティングシステムのアクセシビリティ API のダイアログとして要素を公開します。</li> + <li>オペレーティングシステムのアクセシビリティ API がサポートしている場合は、それを使用してアクセス可能なアラートイベントを発生させます。</li> +</ul> + +<p>アラートダイアログが表示されたら、スクリーンリーダーはアラートをアナウンスするべきです。</p> + +<p>アラートダイアログが正しくラベル付けされ、ダイアログ内のコントロールにフォーカスが移動したら、スクリーンリーダーは、フォーカスが当たっている要素をアナウンスする前に、ダイアログのアクセス可能なロール、名前、およびオプションの説明をアナウンスするべきです。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの技術をどのように処理するかについては、意見が異なる場合があります。 上記の情報はそれらの意見の一つであり、したがって規範的なものではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_A_basic_alert_dialog" name="Example_1_A_basic_alert_dialog">例 1: 基本的なアラートダイアログ</h4> + +<p>以下のコードスニペットは、メッセージと[OK]ボタンだけを提供するアラートダイアログをマークアップする方法を示しています。</p> + +<pre class="brush: html"><div role="alertdialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <div role="document" tabindex="0"> + <h2 id="dialog1Title">あなたのログインセッションは期限切れになりそうです</h2> + <p id="dialog1Desc">セッションを延長するには、[OK]ボタンをクリックしてください。</p> + <button>OK</button> + </div> +</div></pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<p>TBD</p> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#alertdialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li> <a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">ARIA: <code>dialog</code> ロール</a></li> + <li> <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alert_Role">ARIA: <code>alert</code> ロール</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-activedescendant_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-activedescendant_attribute/index.html new file mode 100644 index 0000000000..dc7aa54366 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-activedescendant_attribute/index.html @@ -0,0 +1,46 @@ +--- +title: aria-activedescendant 属性の使用 +slug: >- + Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute +tags: + - ARIA + - Accessibility +translation_of: >- + Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute +--- +<p>この記事では、<code><a href="https://www.w3.org/TR/wai-aria/#aria-activedescendant">aria-activedescendant</a></code> プロパティについて説明します。</p> + +<h3 id="Description" name="Description">説明</h3> + +<p><code>aria-activedescendant</code> 属性には、ドキュメントオブジェクトモデル内の複合ウィジェットの一部である、現在アクティブな子オブジェクトの ID が含まれます。 これは、1つ以上の子にフォーカスを持たせるというオーバーヘッドを伴います。 名前が指定するように、複合ウィジェットの現在アクティブな子を管理するのに役立ちます。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p>ユーザーエージェントは、検索、レンダリング、およびエンドユーザーとウェブコンテンツとのやりとりを容易にするソフトウェアで、<code>aria-activedescendant</code> プロパティを使用して、フォーカスを持っているアクティブな子について支援技術に通知します。 <code>aria-activedescendant</code> プロパティを使用するこのアクティブな子は、常に画面上に表示され、ドキュメントオブジェクトモデルのコンテナの子孫でなければなりません。</p> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 以下に示す情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1" name="Example_1">Example 1: </h4> + +<p> </p> + +<pre class="brush: html">Code </pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> +</ul> + +<h3 id="Notes" name="Notes">注 </h3> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術 </h3> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..95da78a286 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,89 @@ +--- +title: aria-describedby 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +tags: + - ARIA + - Accessibility + - Attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +<h3 id="Description" name="Description">説明</h3> + +<p><span class="seoSummary"><code><a href="https://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a></code> 属性は、オブジェクトを説明する要素の ID を示すために使用されます。 これは、ウィジェットまたはグループとそれらを記述するテキストの間の関係を確立するために使用されます。 これは、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> と非常によく似ています。 ラベルはオブジェクトの本質を表し、説明はユーザーが必要とする可能性のある詳細を提供します。</span></p> + +<p><code>aria-describedby</code> 属性はフォーム要素にのみ使用されるものではありません。 静的テキストをウィジェット、要素のグループ、ペイン、見出しを持つ領域、定義等々に関連付けるためにも使用されます。 以下の{{ anch("Examples","例") }}のセクションでは、これらの場合に属性を使用する方法の詳細について説明します。</p> + +<p>この属性は、一般的な HTML フォーム要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>スペースで区切られた要素の ID のリスト</p> + +<h3 id='Possible_effects_on_user_agents_and_assistive_technology""' name='Possible_effects_on_user_agents_and_assistive_technology""'>ユーザーエージェントと支援技術への影響</h3> + +<p> </p> + +<div class="note"><strong>注:</strong> 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Application_Landmark_Descriptions" name="Example_1_Application_Landmark_Descriptions">例 1: アプリケーションのランドマークの説明</h4> + +<p>以下の例では、導入の段落でカレンダーアプリケーションについて説明します。 <code>aria-describedby</code> は、段落をアプリケーションのコンテナに関連付けるために使用されます。</p> + +<pre class="brush: html"><div role="application" aria-labelledby="calendar" aria-describedby="info"> + <h1 id="calendar">カレンダー</h1> + <p id="info"> + このカレンダーには、ボストンレッドソックスのゲームの予定が表示されます。 + </p> + <div role="grid"> + ... + </div> +</div> +</pre> + +<h4 id="Example_2_A_Close_Button" name="Example_2_A_Close_Button">例 2: 閉じるボタン</h4> + +<p>以下の例では、ダイアログの [閉じる] ボタンとして機能するリンクが、ドキュメントの別の場所で説明されています。 <code>aria-describedby</code> 属性は、説明をリンクに関連付けるために使用されます。</p> + +<pre class="brush: html"><button aria-label="Close" aria-describedby="descriptionClose" + onclick="myDialog.close()">X</button> + +... + +<div id="descriptionClose">このウィンドウを閉じると、入力された情報は破棄され、 +メインページに戻ります</div> +</pre> + +<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> + +<ul> + <li><code>aria-describedby</code> を使用した<a href="http://www.oaa-accessibility.org/examplep/checkbox1/">チェックボックスの例</a></li> + <li><code>aria-describedby</code> を使用した<a href="http://www.oaa-accessibility.org/examplep/tooltip1/">ツールチップの例</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<ul> + <li><code>aria-describedby</code> 属性は、外部リソースの記述を参照するようには設計されていません。 ID であるため、同じ DOM ドキュメント内の要素を参照する必要があります。</li> +</ul> + +<h3 id="Used_by_ARIA_roles" name="Used_by_ARIA_roles">ARIA ロールによって使用される</h3> + +<p>ベースマークアップのすべての要素</p> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby 属性の使用</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby の WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html new file mode 100644 index 0000000000..60313d5874 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -0,0 +1,128 @@ +--- +title: aria-invalid 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +tags: + - ARIA + - Accessibility + - Attribute + - CodingScripting + - HTML + - JavaScript +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +--- +<h3 id="Description" name="Description">説明</h3> + +<div class="summary"> +<p>このテクニックは、<a class="external" href="http://www.w3.org/TR/wai-aria/#aria-invalid" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid"><code>aria-invalid</code></a> 属性を使用する方法を示しています。</p> +</div> + +<p><code>aria-invalid</code> 属性は、入力フィールドに入力された値がアプリケーションが予期している形式に準拠していないことを示すために使用されます。 これには、電子メールアドレスや電話番号などの形式が含まれます。 <code>aria-invalid</code> は、必須フィールドが入力されていないことを示すためにも使用できます。 属性は、検証処理の結果としてプログラムで設定する必要があります。</p> + +<p>この属性は、一般的な HTML フォーム要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</p> + +<h3 id="Values" name="Values">値</h3> + +<p>語彙:</p> + +<dl> + <dt><code>false</code></dt> + <dd>（デフォルト）エラーは検出されませんでした。</dd> + <dt><code>grammar</code></dt> + <dd>文法上の誤りが検出されました。</dd> + <dt><code>spelling</code></dt> + <dd>スペルミスが検出されました。</dd> + <dt><code>true</code></dt> + <dd>値は検証に失敗しました。</dd> +</dl> + +<p>この語彙に含まれていない値はすべて <code>true</code> として扱われるべきです。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p>ユーザーエージェントは、フィールドが無効であるときにユーザーに通知するべきです。 アプリケーション作成者は、可能であれば、問題を修正するための提案を提供するするべきです。 作成者は、フォームが送信されるのを防ぐことができます。</p> + +<div class="note">注: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Simple_form_validation" name="Example_1_Simple_form_validation">例 1: 簡単なフォーム検証</h4> + +<p>次のスニペットでは、2つのフォームフィールドの簡略化されたバージョンを示し、検証関数は blur イベントに関連付けられています。 <code>aria-required</code> のデフォルト値は <code>false</code> なので、<code>input</code> に属性を追加することは厳密には必要ではないことに注意してください。</p> + +<pre class="brush: html"> <input name="name" id="name" aria-required="true" aria-invalid="false" + onblur="checkValidity('name', ' ', '無効な名前が入力されました（名と姓が必要です）');"/> + <br /> + <input name="email" id="email" aria-required="true" aria-invalid="false" + onblur="checkValidity('email', '@', '無効な電子メールアドレスです');"/> +</pre> + +<p>blur ですぐにフィールドを検証する必要はありません。 アプリケーションはフォームが送信されるまで待つことができます（これは必ずしも推奨されません）。</p> + +<p>以下のスニペットは、特定の文字の存在をチェックする非常に簡単な検証関数を示しています（現実世界では、検証はより複雑になるでしょう）。</p> + +<pre class="brush: js">function checkValidity(aID, aSearchTerm, aMsg){ + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + updateAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + updateAlert(); + } +} +</pre> + +<p>以下のスニペットは、エラーメッセージを追加（または削除）するアラート関数を示しています。</p> + +<pre class="brush: js">function updateAlert(msg) { + var oldAlert = document.getElementById("alert"); + if (oldAlert) { + document.body.removeChild(oldAlert); + } + + if (msg) { + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var content = document.createTextNode(msg); + newAlert.appendChild(content); + document.body.appendChild(newAlert); + } +} +</pre> + +<p>アラートには、ARIAの <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role"><code>role</code> 属性が <code>"alert"</code> に設定</a>されていることに注意してください。</p> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/"><code>alert</code> ロールの例</a>（<code>aria-invalid</code> 属性を使用）</p> + +<h3 id="Notes" name="Notes">注</h3> + +<ul> + <li><code>aria-invalid</code> 属性を <code>aria-required</code> 属性と組み合わせて使用する場合、フォームが送信される前に <code>aria-invalid</code> を <code>true</code> に設定する<strong>べきではありません</strong> — 検証に応答する場合だけです。</li> + <li>将来の拡張では、この属性に使用される語彙に用語を追加することができます。 現行の語彙にない値はすべて <code>true</code> として扱われるべきです。</li> +</ul> + +<h3 id="Used_in_ARIA_roles" name="Used_in_ARIA_roles">ARIA ロールで使用</h3> + +<p>ベースマークアップのすべての要素</p> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required 属性の使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">alert ロールの使用</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">aria-invalid の WAI-ARIA 仕様</a>（英語）</li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#aria_lh_form" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">フォームの WAI-ARIA オーサリングプラクティス</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..241c58bf0c --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,61 @@ +--- +title: aria-label 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> 属性は、現在の要素にラベル付けする文字列を定義するために使用されます。 これはテキストラベルが画面に表示されない場合に使用します。 要素にラベル付けする目に見えるテキストがある場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> を使用します。</span></p> + +<p>この属性は、一般的な HTML 要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</p> + +<h3 class="editable" id="Value" name="Value">値</h3> + +<p>文字列</p> + +<h3 class="editable" id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<div id="section_5"> +<h4 id="Example_1_Multiple_Labels" name="Example_1_Multiple_Labels">例 1: 閉じるボタン</h4> + +<p>以下の例では、ボタンは典型的な [閉じる] ボタンのようにスタイルされており、中央に X があります。 ボタンの目的がダイアログを閉じることであることを示すものは何もないので、<code>aria-label</code> 属性は、支援技術によりラベル付けするために使用されます。</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"</span></span>閉じる<span class="tag"><span class="str">"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<p> </p> + +<h3 id="Notes" name="Notes">注</h3> + +<ul> + <li>ラベルの最も一般的なアクセシビリティ API のマッピングは、アクセス可能な名前プロパティです。</li> + <li><code>aria-label</code> 宣言を含む属性は、ほとんどの自動翻訳サービスでは無視されます。</li> +</ul> + +<h3 id="Used_by_ARIA_roles" name="Used_by_ARIA_roles">ARIA ロールによって使用される</h3> + +<p>ベースマークアップのすべての要素</p> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby 属性の使用</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="https://www.w3.org/TR/wai-aria/#aria-label">aria-label の WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..2751fbd56e --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,143 @@ +--- +title: aria-labelledby 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +<h3 id="Description" name="Description">説明</h3> + +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> 属性には、入力要素、ウィジェット、グループなどのオブジェクトのラベルの要素の ID が含まれます。 属性は、オブジェクトとそのラベルの間の関係を確立します。 スクリーンリーダーなどの支援技術では、この属性を使用してドキュメント内のオブジェクトをカタログ化し、ユーザーがドキュメント間を移動できるようにします。 要素の ID がなければ、支援技術はオブジェクトをカタログ化できません。</span></p> + +<p><code>aria-labelledby</code> は <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> と非常によく似ています。 ラベルはオブジェクトに関する重要な情報を提供し、説明はユーザーが必要とする幅広い情報を提供します。</p> + +<p>フォーム要素に加えて、<code>aria-labelledby</code> 属性を使用して、静的テキストをウィジェット、要素のグループ、枠、見出し、定義、およびその他のタイプのオブジェクトを持つ領域に関連付けることができます。 以下の{{ anch("Examples","例") }}のセクションでは、この方法で属性を使用する方法の詳細について説明します。</p> + +<p>ARIA をサポートしていないユーザーエージェントとの互換性を向上させるために、<code>aria-labelledby</code> を {{ HTMLElement("label") }} 要素とともに使用できます（<code>for</code> 属性を使用）。</p> + +<p>この属性は、一般的な HTML フォーム要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>スペースで区切られた要素の ID のリスト</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p>ユーザーエージェントが <code>aria-labelledby</code> 属性と <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 属性の両方を持つ要素のアクセス可能な名前プロパティを計算するとき、ユーザーエージェントは <code>aria-labelledby</code> を優先します。</p> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Multiple_Labels" name="Example_1_Multiple_Labels">例 1: 複数のラベル</h4> + +<p>以下の例では、各入力フィールドは、それぞれの個別のラベルとグループのラベルの両方でラベル付けされています。</p> + +<pre class="brush: html"><div id="billing">請求書</div> + +<div> + <div id="name">名前</div> + <input type="text" aria-labelledby="billing name"/> +</div> +<div> + <div id="address">住所</div> + <input type="text" aria-labelledby="billing address"/> +</div> +</pre> + +<h4 id="Example_2_Associating_Headings_With_Regions" name="Example_2_Associating_Headings_With_Regions">例 2: 見出しを領域に関連付ける</h4> + +<p>以下の例では、見出し要素は、見出しの内容に関連付けられています。 参照される領域は、見出しを含む領域であることに注意してください。</p> + +<pre class="brush: html"><div role="main" aria-labelledby="foo"> + <h1 id="foo">サンディエゴ・ヒルズに広がる野火</h1> + 強風が高温の炎を広げます... +</div> +</pre> + +<h4 id="Example_3_Radio_Groups" name="Example_3_Radio_Groups">例 3: ラジオグループ</h4> + +<p>以下の例では、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup</a> のコンテナは、<code>aria-labelledby</code> 属性を使用してそのラベルに関連付けられています。</p> + +<pre class="brush: html"><div id="radio_label">私のラジオラベル</div> +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">項目 #1</li> + <li role="radio">項目 #2</li> + <li role="radio">項目 #3</li> +</ul> +</pre> + +<h4 id="Example_4_Dialog_Label" name="Example_4_Dialog_Label">例 4: ダイアログラベル</h4> + +<p>以下の例では、ダイアログのラベルを付ける見出し要素は、<code>aria-labelledby</code> 属性によって参照されます。</p> + +<pre class="brush: html"><div role="dialog" aria-labelledby="dialogheader"> + <h2 id="dialogheader">ファイルを選択</h2> + ... ダイアログの内容 +</div> +</pre> + +<h4 id="Example_5_Inline_Definition" name="Example_5_Inline_Definition">例 5: インライン定義</h4> + +<p>以下の例では、ナレーションの自然な流れに記述されている用語の定義は、<code>aria-labelledby</code> 属性を使用してその用語自体に関連付けられています。</p> + +<pre class="brush: html"><p>医師は、それが<dfn id="placebo">プラセボ</dfn>であり、<span role="definition" aria-labelledby="placebo"> +疾病に対する実際の効果よりも、患者の精神的救済のためにより多く処方される不活性製剤</span>であると説明しました。 +</p> +</pre> + +<h4 id="Example_6_Definition_Lists" name="Example_6_Definition_Lists">例 6: 定義リスト</h4> + +<p>以下の例では、正式な定義リストの定義は、<code>aria-labelledby</code> 属性を使用して定義する用語に関連付けられています。</p> + +<pre class="brush: html"><dl> + <dt id="anathema">anathema</dt> + <dd role="definition" aria-labelledby="anathema">教会の権威によって厳粛に発音され、 + 破門を伴う禁止または呪い</dd> + <dd role="definition" aria-labelledby="anathema">激しい告発 : カーソル</dd> + + <dt id="homily">homily</dt> + <dd role="definition" aria-labelledby="homily">通常は短い説教</dd> + <dd role="definition" aria-labelledby="homily">道徳的テーマに関する講義や談話</dd> +</dl> +</pre> + +<h4 id="Example_7_Menus" name="Example_7_Menus">例 7: メニュー</h4> + +<p>次の例では、<code>aria-labelledby</code> 属性を使用してポップアップメニューをラベルに関連付けています。</p> + +<pre class="brush: html"><div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fileMenu">ファイル</div> + <div role="menu" aria-labelledby="fileMenu"> + <div role="menuitem">開く</div> + <div role="menuitem">保存</div> + <div role="menuitem">名前をつけて保存 ...</div> + ... + </div> + ... +</div> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">注 </h4> + +<p>ラベルの最も一般的なアクセシビリティ API のマッピングは、アクセス可能な名前プロパティです</p> + +<h3 id="Used_by_ARIA_roles" name="Used_by_ARIA_roles">ARIA ロールによって使用される</h3> + +<p>ベースマークアップのすべての要素</p> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術 </h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label 属性の使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby 属性の使用</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby の WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html new file mode 100644 index 0000000000..5e8a0c4277 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -0,0 +1,89 @@ +--- +title: aria-orientation 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +tags: + - ARIA + - Accessibility + - Attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +--- +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-orientation" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-orientation">aria-orientation</a> 属性は、要素が水平方向か垂直方向かを示すために使用されます。</span></p> + +<h3 id="Value" name="Value">値</h3> + +<p>語彙</p> + +<table style="width: 50%;"> + <tbody> + <tr> + <td>vertical</td> + <td>要素は垂直方向です。</td> + </tr> + <tr> + <td>horizontal</td> + <td>要素は水平方向です。</td> + </tr> + <tr> + <td>undefined（デフォルト）</td> + <td>要素の方向は不明または曖昧です。</td> + </tr> + </tbody> +</table> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p> </p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1" name="Example_1">例 1:</h4> + +<p>下のスニペットは、垂直方向に向けられた単純なスライダを示しています。</p> + +<pre class="brush: html"><a href="#" id="handle_zoomSlider" + role="slider" + aria-orientation="vertical" + aria-valuemin="0" + aria-valuemax="17" + aria-valuenow="14" > + <span>11</span> +</a> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> + +<ul> + <li>scrollbar</li> + <li>listbox</li> + <li>combobox</li> + <li>menu</li> + <li>tree</li> + <li>separator</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="Using the slider role">slider</a></li> + <li>tablist</li> + <li>toolbar</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-orientation" title="https://www.w3.org/TR/wai-aria/#aria-orientation">aria-orientation の WAI-ARIA 仕様</a>（英語）</li> +</ul> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html new file mode 100644 index 0000000000..f515cbb04b --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html @@ -0,0 +1,31 @@ +--- +title: aria-relevant 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +tags: + - ARIA + - Accessibility + - ariaLive +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +--- +<p><span class="seoSummary"><code><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a></code> 属性は、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> リージョンにどのような変更が生じたかを記述するために使用されるオプションの値で、関連性があり、アナウンスする必要があります。 関連性のない変更は、<code>aria-live</code> 属性が <code>off</code> に設定されている場合と同じように動作します。</span></p> + +<p><code>aria-relevant</code> は、ウェブページにページを表示中に更新される可能性のあるコンテンツが含まれている場合によく使用されます。</p> + +<h3 id="Values" name="Values">値</h3> + +<p>スペースで区切られた次の値の1つ以上のリスト。</p> + +<ul> + <li><strong>"</strong><code>additions</code>" は、ライブリージョンにノードを挿入することです。 関連性があるとみなされるべきです。</li> + <li>"<code>removals</code>" は、ノードの削除です。 関連性があるとみなされるべきです。</li> + <li><strong>"</strong><code>text</code>" は、既存のノードのテキストコンテンツに対する変更です。 関連性があるとみなされるべきです。</li> + <li>"<code>all</code>" は、"<code>additions removals text</code>" と同等です。</li> +</ul> + +<p><code>aria-relevant="additions text"</code> は、ライブリージョンのデフォルト値です。</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant の WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..d042420e74 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,79 @@ +--- +title: aria-required 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +<h3 id="Description" name="Description">Description</h3> + +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a> 属性は、フォームが送信される前に要素にユーザー入力が必要であることを示すために使用されます。 この属性は、一般的な HTML フォーム要素で使用できます。 ARIA の <code>role</code> が割り当てられている要素に限定されるものではありません。</span></p> + +<p>{{ HTMLVersionInline("5") }} には <code>required</code> 属性が追加されましたが、まだ HTML5 をサポートしていないユーザーエージェントには <code>aria-required</code> はまだ役立ちます。</p> + +<h3 id="Value" name="Value">値</h3> + +<p><code>true</code> または <code>false</code>（デフォルトは <code>false</code>）</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p>スクリーンリーダーはフィールドが必須であることをアナウンスするべきです。</p> + +<p>この属性は、フィールドの表現を自動的に変更しないことに注意してください。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_A_simple_form" name="Example_1_A_simple_form">例 1: 単純なフォーム</h4> + +<p> </p> + +<pre class="brush: html"> <form action="post"> + <label for="firstName">名:</label> + <input id="firstName" type="text" aria-required="true" /> + <br/> + <label for="lastName">姓:</label> + <input id="lastName" type="text" aria-required="true" /> + <br/> + <label for="streetAddress">住所:</label> + <input id="streetAddress" type="text" /> + </form> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">ツールチップの例</a>（<code>aria-required</code> 属性の使用を含む）</p> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="Used_in_ARIA_roles" name="Used_in_ARIA_roles">ARIA ロールで使用</h3> + +<ul> + <li>Combobox</li> + <li>Gridcell</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/listbox_role">Listbox</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup</a></li> + <li>Spinbutton</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">Textbox</a></li> + <li>Tree</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid property">aria-invalid 属性の使用</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">aria-required の WAI-ARIA 仕様</a>（英語）</li> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#aria_lh_form" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">フォームの WAI-ARIA オーサリングプラクティス</a>（英語）</li> + <li>{{ HTMLVersionInline("5") }} における<a href="/ja/docs/Web/HTML/HTML5/Constraint_validation" title="Constraint validation">制約の検証</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html new file mode 100644 index 0000000000..3bd75a909c --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -0,0 +1,73 @@ +--- +title: aria-valuemax 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +--- +<div> +<div> +<h3 id="Description" name="Description">説明</h3> + +<p id="The_aria-valuemax_attribute_is_used_to_define_the_maximum_value_allowed_for_a_range_widget_such_as_a_slider.2C_spinbutton_or_progressbar._If_the_aria-valuenow_has_a_known_maximum_and_minimum.2C_the_author_SHOULD_provide_properties_for_aria-valuemax_and_aria-valuemin._The_value_of_aria-valuemax_MUST_be_greater_than_or_equal_to_the_value_of_aria-valuemin."><span class="seoSummary"><code><a href="http://www.w3.org/TR/wai-aria/#aria-valuemax">aria-valuemax</a></code> 属性は、スライダー、スピンボタン、プログレスバーなどの範囲ウィジェットに許容される最大値を定義するために使用されます。 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></code> が既知の最大値と最小値を持つ場合、作成者は <code>aria-valuemax</code> と <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></code> のプロパティを提供する<strong>べき</strong>です（SHOULD）。 <code>aria-valuemax</code> の値は、<code>aria-valuemin</code> の値以上<strong>でなければならない</strong>（MUST）。</span></p> + +<p><code>aria-valuemax</code> は<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">スライダー</a>、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role">スクロールバー</a>、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role">スピンボタン</a>のロールの<strong>必須</strong>属性です。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>数値の文字列表現</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>aria-valuemax</code> が不定である場合、または <code>aria-valuemin</code> が <code>aria-valuemax</code> の値以下でない場合、これは支援技術によって処理されるエラー条件を生成します。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1" name="Example_1">例 1:</h4> + +<p>下のスニペットは、最大値が 10 の単純なスライダーを示しています。</p> + +<pre class="deki-transform"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> +</ul> + +<h3 id="Notes" name="Notes">注 </h3> + +<h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="Using_the_progressbar_role">progressbar</a></li> + <li>scrollbar</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="Using the slider role">slider</a></li> + <li>spinbutton</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術 </h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="Using the aria-valuenow attribute">aria-valuenow</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="Using the aria-valuetext attribute">aria-valuetext</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemax" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">aria-valuemax の WAI-ARIA 仕様</a>（英語）</li> +</ul> +</div> +</div> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html new file mode 100644 index 0000000000..566d21a2bf --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -0,0 +1,67 @@ +--- +title: aria-valuemin 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +--- +<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemin" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin">aria-valuemin</a></code> 属性は、スライダー、スピンボタン、プログレスバーなどの範囲ウィジェットに許容される最小値を定義するために使用されます。 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></code> が既知の最大値と最小値を持つ場合、作成者は <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></code> と <code>aria-valuemin</code> のプロパティを提供する<strong>べき</strong>です（SHOULD）。 <code>aria-valuemin</code> の値は <code>aria-valuemax</code> の値以下で<strong>なければならない</strong>（MUST）。</span></p> + +<p><code>aria-valuemin</code> は、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">スライダー</a>、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role">スクロールバー</a>、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role">スピンボタン</a>のロールの<strong>必須</strong>属性です。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>数値の文字列表現</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>aria-valuemin</code> が <code>aria-valuemax</code> の値以下でない場合、これは支援技術によって処理されるエラー条件を生成します。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1.3A" name="Example_1.3A">例 1:</h4> + +<p>下のスニペットは、最小値が 1 の単純なスライダーを示しています。</p> + +<pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> +</pre> + +<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="Using_the_progressbar_role">progressbar</a></li> + <li>scrollbar</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="Using the slider role">slider</a></li> + <li>spinbutton</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="Using the aria-valuenow attribute">aria-valuenow</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="Using the aria-valuetext attribute">aria-valuetext</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemin" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin">aria-valuemin の WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html new file mode 100644 index 0000000000..a074c74c7a --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -0,0 +1,73 @@ +--- +title: aria-valuenow 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +--- +<p><span class="seoSummary"><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuenow" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow</a> 属性は、スライダー、スピンボタン、プログレスバーなどの範囲ウィジェットの現在の値を定義するために使用されます。 現在の値がわからない場合は、<code>aria-valuenow</code> 属性を設定しないでください。 <code>aria-valuenow</code> に既知の最小値と最大値がある場合、作成者は <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></code> 属性と <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></code> 属性を設定するべきです。</span></p> + +<p>レンダリングされた値を数値として正確に表現できない場合、作成者は <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></code> 属性を <code>aria-valuenow</code> と組み合わせて使用して、範囲の現在の値の使いやすい表現を提供する<strong>べき</strong>です（SHOULD）。 たとえば、スライダーのレンダリング値が<code>小</code>、<code>中</code>、<code>大</code>の場合があります。 この場合、<code>aria-valuenow</code> の値は 1 〜 3 の範囲で値空間内の各値の位置を示しますが、<code>aria-valuetext</code> は、<code>小</code>、<code>中</code>、<code>大</code>のいずれかの文字列になります。</p> + +<p><code>aria-valuenow</code> は<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">スライダー</a>、<a href="https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role">スクロールバー</a>、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role">スピンボタン</a>のロールの<strong>必須</strong>属性です。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>数値の文字列表現</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">プログレスバー</a>と<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role">スクロールバー</a>のロールを持つ要素の場合、支援技術は、<span class="seoSummary"><code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></code></span> から <span class="seoSummary"><code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></code></span> までの範囲の位置として計算された実際の値をパーセンテージとしてレンダリングする<strong>べき</strong>です（SHOULD）。</p> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">スライダー</a>と<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role">スピンボタン</a>のロールを持つ要素の場合、支援技術は実際の値をユーザーにレンダリングする<strong>べき</strong>です（SHOULD）。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1.3A" name="Example_1.3A">例 1:</h4> + +<p>下のスニペットは、現在の値が 4 の単純なスライダーを示しています。</p> + +<pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> +</pre> + +<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> +</ul> + +<h3 id="Notes" name="Notes">注 </h3> + +<h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="Using_the_progressbar_role">progressbar</a></li> + <li>scrollbar</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="Using the slider role">slider</a></li> + <li>spinbutton</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術 </h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="Using the aria-valuetext attribute">aria-valuetext</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuenow" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow の WAI-ARIA 仕様</a>（英語）</li> +</ul> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html new file mode 100644 index 0000000000..1563eecbc9 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html @@ -0,0 +1,64 @@ +--- +title: aria-valuetext 属性の使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +tags: + - ARIA + - Accessibility + - Attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +--- +<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuetext" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">aria-valuetext</a></code> 属性は、プログレスバー、スピンボタン、スライダーなどの範囲ウィジェットの <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></code> に対する人間が読める代替テキストを定義するために使用されます。</span></p> + +<p>作成者は、レンダリングされた値を数値として正確に表現できない場合にのみ、<code>aria-valuetext</code> 属性を設定する<strong>べき</strong>です（SHOULD）。 たとえば、スライダーのレンダリング値が<code>小</code>、<code>中</code>、<code>大</code>の場合があります。 この場合、<code>aria-valuenow</code> の値は 1 〜 3 の範囲で値空間内の各値の位置を示しますが、<code>aria-valuetext</code> は、<code>小</code>、<code>中</code>、<code>大</code>のいずれかの文字列になります。</p> + +<h3 id="Value" name="Value">値</h3> + +<p>数値の文字列表現</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>aria-valuetext</code> 属性がない場合、支援技術は現在の値の <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></code> 属性のみに依存します。 <code>aria-valuetext</code> が指定されている場合、支援技術は <code>aria-valuenow</code> の値の代わりにその値をレンダリングする<strong>べき</strong>です（SHOULD）。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1.3A" name="Example_1.3A">例 1:</h4> + +<p>下のスニペットは、曜日を選択するための簡単なスライダーを示しています。 スライダーの値は数値で、<code>aria-valuetext</code> 属性を使用してその日の名前を指定します。 アプリケーションは、<code>aria-valuenow</code> に応じてプログラムで <code>aria-valuetext</code> を更新します。</p> + +<pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"1"</span> + aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"7"</span> + aria-valuetext=<span class="str">"</span></span>日曜日<span class="tag"><span class="str">"</span>></span> +</pre> + +<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> + +<h3 id="Notes" name="Notes">注 </h3> + +<h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li> + <li>scrollbar</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li> + <li>spinbutton</li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術 </h3> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">aria-valuetext の WAI-ARIA 仕様</a>（英語）</li> +</ul> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html new file mode 100644 index 0000000000..b17fe32b00 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html @@ -0,0 +1,123 @@ +--- +title: ボタンロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role +tags: + - ARIA + - Accessibility + - NeedsContent +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +<p><strong><a href="https://www.w3.org/TR/wai-aria/roles#button">ボタン</a></strong>ロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。<code>role="button"</code> だけで、どんな要素 (例えば {{HTMLElement("p")}}、{{HTMLElement("span")}} や {{HTMLElement("div")}}) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために <code>aria-pressed</code> と組み合わせて使うことが出来ます。</p> + +<div class="note"><strong>注記: </strong>できれば、<code>button</code> ロールよりもネイティブ HTML ボタン (<code><button></code>、<code><input type="button" /></code>、<code><input type="submit" /></code>、<code><input type="reset" /></code>や<code><input type="image" /></code>) を使うことをおすすめします。ネイティブ HTML ボタンは古いユーザーエージェントや支援技術から広くサポートされています。ネイティブ HTML ボタンは追加のカスタマイズなしに、キーボードやフォーカスの要件をサポートしています。</div> + +<h2 id="Keyboard_and_focus" name="Keyboard_and_focus">キーボードとフォーカス</h2> + +<p>ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし <code>button</code> ロールがそれ自身ではフォーカス可能でない要素 (<code><span></code>、<code><div></code> もしくは <code><p></code> のような) に追加されたら、<code>tabindex</code> 属性がフォーカス可能なボタンを作るために使用されなければなりません。</p> + +<p>ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <code><button></code> 要素では、ボタンの <code>onclick</code> イベントはマウスクリックとフォーカスされている間に <kbd>Space</kbd> もしくは <kbd>Enter</kbd> が押されたときに発火します。しかし他のタグがカスタムボタンを作成するために使用されていたら、<code>role="button"</code> が使われていたとしても <code>onclick</code> イベントはマウスカーソルにクリックされたときにだけに発火するでしょう。このため、開発者は <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーが押されたときにトリガーされるために別のキーイベントハンドラを要素に追加しなければなりません。</p> + +<p class="warning"><strong>警告:</strong> リンクをボタンロールによりマークアップする際は注意してください。ボタンは <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーを使ってトリガーされることが期待されますが、リンクは <kbd>Enter</kbd> キーが期待されます。 言い換えれば、リンクがボタンのように振る舞うようときは、<code>role="button"</code> が追加されるだけでは不十分です。ネイティブのボタンと矛盾しないために、<kbd>Space</kbd> キーをリッスンするキーイベントハンドラを追加する必要があります。</p> + +<h2 id="Toggle_buttons" name="Toggle_buttons">トグルボタン</h2> + +<p>role="button" を使う利点は、トグルボタンの作成が許可されていることです。トグルボタンには、押された状態と押されていない状態の2つの状態があります。ボタンがトグルボタンであるかどうかは、 <code>button</code> ロールに加えて <code>aria-pressed</code> 属性で指定することができます。</p> + +<ul> + <li><code>aria-pressed</code> が使用されていない場合、ボタンはトグルボタンではありません。</li> + <li><code>aria-pressed="false"</code> が使用されている場合、ボタンは現在押されていないトグルボタンです。</li> + <li><code><code>aria-pressed="true"</code></code> が使用されている場合、ボタンは現在押されているトグルボタンです。</li> + <li><code>aria-pressed="mixed"</code> が使用されている場合、ボタンは部分的に押したとみなされます。</li> +</ul> + +<h2 id="Labeling_buttons" name="Labeling_buttons">ボタンのラベリング</h2> + +<p>ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> または <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性を通して提供することができます。</p> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p><code>button</code> ロールが使用されているとき、ユーザーエージェントはその要素をオペレーティングシステムのアクセシビリティAPIにおけるボタンコントロールとして公開すべきです。スクリーンリーダーはその要素をボタンとして通知し、そのアクセシブルな名前を言述すべきです。音声認識ソフトウェアは「クリック」に続けてボタンのアクセシブルな名前を発声することでボタンを有効にすべきです。</p> + +<div class="note"><strong>Note:</strong> 支援技術がどのようにこの手法を扱うべきかについての意見は異なる場合があります。上記の情報はこれらの意見のひとつであり、従って規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="ARIA_Basic_Button" name="ARIA_Basic_Button">ARIA ベーシックボタン</h3> + +<p>以下のスニペットでは、 span 要素に <code>button</code> ロールが与えられています。 <code><span></code> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために <code>tabindex</code> 属性が必要です。このスニペットは、 <code><span></code> 要素をボタンのように見せるための CSS スタイルが提供され、 <code>handleBtnClick</code> と <code>handleBtnKeyPress</code> は、クリックされたときや <kbd>Space</kbd> もしくは <kbd>Enter</kbd> キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。</p> + +<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span> +</pre> + +<h3 id="ARIA_Toggle_Button" name="ARIA_Toggle_Button">ARIA トグルボタン</h3> + +<p>このスニペットでは {{HTMLElement("span")}} 要素が <code>button</code> ロールと <code>aria-pressed</code> 属性によってトグルボタンに変更されています。ボタンが作動したとき、 <code>aria-pressed</code> の値を <code>true</code> と <code>false</code> で切り替え続けます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><button type="button" aria-pressed="false" onclick="handleBtnClick(event)"> + Native button toggle +</button> + +<span role="button" tabindex="0" + aria-pressed="false" onclick="handleBtnClick(event)" + onKeyPress="handleBtnKeyPress(event)"> + Span button toggle +</span></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">button, +[role="button"] { + padding: 3px; + border: 1px solid #CCC; +} + +button:active, +button:focus, +[role="button"][aria-pressed="true"] { + border: 2px solid #000; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function handleBtnClick(event) { + toggleButton(event.target); +} + +function handleBtnKeyPress(event) { + // スペースかエンターが押されているかを確認 + if (event.key === " " || event.key === "Enter") { + // スペースが押されたときにスクロールさせないためにデフォルトの振る舞いをキャンセル + event.preventDefault(); + toggleButton(event.target); + } +} + +function toggleButton(element) { + // ボタンが押されているかを確認 + var pressed = (element.getAttribute("aria-pressed") === "true"); + // aria-pressed をの状態を反転 + element.setAttribute("aria-pressed", !pressed); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('ARIA_Toggle_Button')}}</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul> + <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a></code></li> +</ul> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Strong native semantics in HTML5</a></li> + <li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html new file mode 100644 index 0000000000..13f3fa4b10 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html @@ -0,0 +1,63 @@ +--- +title: チェックボックスロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role +tags: + - ARIA + - Accessibility + - NeedsContent + - Role(2) + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +<p><span class="seoSummary"><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">チェックボックス</a>ロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が <code>role="checkbox"</code> を使っていたら 、支援技術へチェックボックスのステートを公開するために<code>aria-checked</code> 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、<code>role=checkbox</code> 要素は <code>aria-checked</code> を通して３つのステートを公開できます:</span></p> + +<ul> + <li>aria-checked="true": チェックボックスはチェックされています</li> + <li>aria-checked="false": チェックボックスはチェックされていません</li> + <li>aria-checked="mixed": チェックボックスは部分的にチェックされています</li> +</ul> + +<p>開発者はチェックボックスが作動した際に、 <code>aria-checked</code> 属性を動的に変更する必要があります。</p> + +<p>チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。</p> + +<h3 id="ユーザーエージェントと支援技術への影響">ユーザーエージェントと支援技術への影響 </h3> + +<p><code>チェックボックス</code>ロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:</p> + +<ul> + <li>チェックボックスを持っている要素を、オペレーティングシステムのアクセシビリティAPIへ公開します。</li> + <li>aria-checked の値が変わった際に、アクセシブルなす～手との変更イベントを送信します。</li> +</ul> + +<p>支援技術製品は次のように振る舞わなければなりません:</p> + +<ul> + <li>スクリーンリーダーは要素をチェックボックスとしてアナウンスしなければなりません。またオプションでチェックボックスを動作させる方法を提供します。</li> +</ul> + +<div class="note"><strong>注記:</strong> 支援技術がこの技術をどう扱うべきかについて、意見は分かれています。上記の情報はこれらの意見の一つであり、標準的なものではありません。</div> + +<h3 id="例">例</h3> + +<h4 id="例1_ARIA_によるチェックボックスロールの追加">例1: ARIA によるチェックボックスロールの追加</h4> + +<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> +<label for="chk1">Remember my preferences</label></pre> + +<h3 id="注記">注記 </h3> + +<h3 id="使用された_ARIA_属性">使用された ARIA 属性</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked">aria-checked</a></li> +</ul> + +<h3 id="関連する_ARIA_技術">関連する ARIA 技術</h3> + +<h3 id="互換性">互換性</h3> + +<p class="comment">TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加</p> + +<h3 id="その他のリソース">その他のリソース</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_group_role/index.html new file mode 100644 index 0000000000..9cd767047d --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_group_role/index.html @@ -0,0 +1,124 @@ +--- +title: group ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p class="p1">このテクニックは、<code><a href="http://www.w3.org/TR/wai-aria/#group">group</a></code> ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。</p> + +<p class="p1"><code>group</code> ロールは、<code><a href="http://www.w3.org/TR/wai-aria/#region">region</a></code> とは対照的に、目次やページの要約に含まれないように意図された一連のユーザーインターフェイスオブジェクトを識別するために使用されます（スクリプトや支援技術によって動的に作成される構造のような）。 グループ（group）はページ上で主要な知覚可能なセクションと見なされるべきではありません。 このロールが要素に追加されると、ブラウザーは、アクセス可能なグループイベントを支援技術製品に送り、支援技術製品はそれをユーザーに通知することができます。</p> + +<p class="p1">グループは、階層内の兄弟の集合を形成するツリーウィジェット内の子供や、ディレクトリ内に同じコンテナを持つ項目の集合のような、関連する機能を持つ項目の論理的集合を形成するために使用されるべきです。 ただし、グループがリストのコンテキストで使用される場合、作者はその子を <code><a href="http://www.w3.org/TR/wai-aria/#listitem">listitem</a></code> 要素に制限する必要があります。 グループ要素はネストすることができます。</p> + +<p class="p1">支援技術によるグループの適切な取り扱いは、それが提供されるコンテキストによって決まります。</p> + +<p class="p1">作者がページの目次に含まれることを保証するためにセクションが重要であると考える場合は、そのセクションに <code><a href="http://www.w3.org/TR/wai-aria/#region">region</a></code> ロールまたは<a href="http://www.w3.org/TR/wai-aria/#landmark_roles">標準的なランドマークロール</a>を割り当てるべきです。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p class="p1"><code>group</code> ロールが要素に追加されるか、またはそのような要素が可視になると、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>group</code> ロールを持つものとして要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API をサポートしている場合は、アクセス可能なグループイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。</p> + +<ul class="ul1"> + <li class="li2">スクリーンリーダーは、フォーカスが最初にその中のコントロールに着くとグループをアナウンスし、もし <code><a href="http://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a></code> が設定されていれば、その説明が読み上げられます。 これに続いて、フォーカスされたコントロールをアナウンスすることができます。</li> + <li class="li2">スクリーン拡大鏡でグループが拡大されることがあります。</li> +</ul> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Using_the_group_role_with_a_HTML_tree_view" name="Example_1_Using_the_group_role_with_a_HTML_tree_view">例 1: HTML ツリービューでの group ロールの使用</h4> + +<p class="p1">以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。</p> + +<pre class="brush: html"><div id="tree1" role="tree" tabindex="-1"> + <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true"> + <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" /> + <span role="treeitem" tabindex="0">動物</span> + </div> + <div id="animalGroup" role="group"> + <div id="birds" role="treeitem"> + <span tabindex="-1">鳥</span> + </div> + <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false"> + <img role="presentation" tabindex="-1" src="images/treeContracted.gif" /> + <span role="treeitem" tabindex="0">猫</span> + </div> + <div id="catGroup" role="group"> + <div id="siamese" role="treeitem"> + <span tabindex="-1">シャム猫</span> + </div> + <div id="tabby" role="treeitem"> + <span tabindex="-1">虎猫</span> + </div> + </div> + </div> +</div></pre> + +<h4 class="p1" id="Example_2_Using_the_group_role_with_a_HTML_drop-down_menu" name="Example_2_Using_the_group_role_with_a_HTML_drop-down_menu">例 2: HTML ドロップダウンメニューでの group ロールの使用</h4> + +<p class="p2">以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。</p> + +<pre class="brush: html"><div role="menu"> + <ul role="group"> + <li role="menuitem">受信トレイ</li> + <li role="menuitem">アーカイブ</li> + <li role="menuitem">ごみ箱</li> + </ul> + <ul role="group"> + <li role="menuitem">カスタムフォルダ 1</li> + <li role="menuitem">カスタムフォルダ 2</li> + <li role="menuitem">カスタムフォルダ 3</li> + </ul> + <ul role="group"> + <li role="menuitem">新規フォルダ</li> + </ul> +</div></pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li> + <p class="p1">Unknown Title (http://test.cita.illinois.edu/aria/tree/tree2.php) <strong>[broken link]</strong></p> + </li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<ul> + <li class="p1">グループの DOM サブツリーの外側にあるグループメンバーは、そのグループに参加するために明示的な関係を割り当てられている必要があります。</li> +</ul> + +<h3 class="p1" id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul class="ul1"> + <li class="li2"><a class="external" href="http://www.w3.org/TR/wai-aria/#group">group</a></li> +</ul> + +<h3 class="p1" id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul class="ul1"> + <li class="li2"><a class="external" href="http://www.w3.org/TR/wai-aria/#region">region</a> ロール</li> +</ul> + +<h3 class="p1" id="Compatibility" name="Compatibility">互換性</h3> + +<p class="p2">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 class="p1" id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul class="ul1"> + <li class="li2">ARIA Best Practices – Directories, Groups and Regions: <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading</a> （該当項目は削除されています。）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_link_role/index.html new file mode 100644 index 0000000000..0cf9c79aba --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_link_role/index.html @@ -0,0 +1,97 @@ +--- +title: link ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p class="p1">このテクニックは、<code><a href="https://www.w3.org/WAI/PF/aria-1.1/roles#link">link</a></code> ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。</p> + +<p class="p1"><code>link</code> ロールは、アプリケーションまたは外部にあるリソースへのハイパーリンクを作成する要素を識別するために使用されます。 このロールが要素に追加されると、タブを使用してリンクへのフォーカスを変更したり、リンクの実行にスペースやエンターを使用することができます。</p> + +<div class="note"><strong>注</strong>: 可能であれば、ネイティブ要素は古いユーザーエージェントや支援技術によって広くサポートされているため、<code>link</code> ロールではなくネイティブの {{HTMLElement("a")}} 要素を使用することをお勧めします。 ネイティブ {{HTMLElement("a")}} 要素は、追加のカスタマイズを必要とせずに、デフォルトでキーボードとフォーカスの要件もサポートしています。</div> + +<p class="p1"><code><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex">tabindex</a></code> 属性は、タブの順序で要素の位置を直接指定するために、このロールで任意に使用できます。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p class="p1">要素に <code>link</code> ロールが追加された場合、またはそのような要素が可視になる場合、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>link</code> ロールを持つ要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なリンクイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。</p> + +<ul class="ul1"> + <li class="li2">スクリーンリーダーは、リンクがフォーカスされているときに、リンクであるという事実とともに、リンクまたはそのラベルのテキストをアナウンスするべきです。 ARIA リンクは通常のリンクと同様にスクリーンリーダーの「リンクのリスト」機能に含まれているべきで、「リンクのアクティブ化」や「リンクへの移動」など、このダイアログのリストに対するアクションは通常のリンクと同じように行われるべきです。</li> + <li class="li2">スクリーン拡大鏡はリンクを拡大することがあります。</li> +</ul> + +<p> </p> + +<p><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</p> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Adding_the_role_in_the_HTML_code" name="Example_1_Adding_the_role_in_the_HTML_code">例 1: HTML コードにロールを追加する</h4> + +<p class="p2">以下のスニペットは、<code>link</code> ロールが html ソースコードに直接どのように追加されるかを示しています。</p> + +<pre class="brush: html"><div role="link">リンク</div></pre> + +<h4 class="p1" id="Example_2_Accessible_link_build_from_an_application_using_span" name="Example_2_Accessible_link_build_from_an_application_using_span">例 2: span を使用したアプリケーションからのアクセス可能なリンクの構築</h4> + +<pre class="brush: html"><script type="text/javascript"> +sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}}; +//リンク上のクリックとキーダウンを処理する +function navigateLink(evt) { + if (evt.type=="click" || + evt.keyCode == sap.ui.keycodes.ENTER) { + var ref = evt.target != null ? evt.target : evt.srcElement; + if (ref) window.open(ref.getAttribute("href"),"_blank"); + } +} +</script> + +<body role="application"> + + <h3>span を使った単純なリンクの構築</h3> + <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link"> + スペースバーまたはエンターキーを使用してこのリンクをアクティブ化します。 + </span> +</body> +</pre> + +<h3 id="Notes" name="Notes">注</h3> + +<p class="p1">リンクを押すとアクションがトリガーされますが、ブラウザーのフォーカスは変更されず、新しいページに移動することもありません。 <code>link</code> ロールの代わりに <code><a href="http://www.w3.org/TR/wai-aria/#button">button</a></code> ロールを使用することを検討してください。</p> + +<h3 class="p1" id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul class="ul1"> + <li class="li2"><a class="external" href="http://www.w3.org/TR/wai-aria/#link">link</a></li> +</ul> + +<h3 class="p1" id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul class="ul1"> + <li class="li2"><a class="external" href="https://www.w3.org/TR/wai-aria/#button">button</a> ロール</li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li> + <p class="p1">ARIA のベストプラクティス - link ロール: <a class="external" href="https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex">https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex</a></p> + </li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_log_role/index.html new file mode 100644 index 0000000000..91e3298f55 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_log_role/index.html @@ -0,0 +1,90 @@ +--- +title: log ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p class="p1">このテクニックは、<code><a href="http://www.w3.org/TR/wai-aria/#log">log</a></code> ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。</p> + +<p class="p1"><code>log</code> ロールは、新しい情報が意味のある順序で追加され、古い情報が消える<a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">ライブリージョン</a>を作成する要素を識別するために使用されます。 たとえば、チャットログ、メッセージ履歴、エラーログなどです。 他のタイプのライブリージョンとは対照的に、このロールは順番に並べられ、新しい情報はログの末尾にのみ追加されます。 このロールが要素に追加されると、ブラウザーは支援技術製品にアクセス可能なログイベントを送信し、ユーザーにそれを通知することができます。</p> + +<p class="p1">デフォルトでは、更新にはライブリージョンの変更のみが含まれ、ユーザーがアイドル状態のときにアナウンスされます。 変更の際にライブリージョン全体を聞く必要がある場合、 <code>aria-atomic="true"</code> を設定するべきです。 できるだけ早くアナウンスし、ユーザーが中断する可能性がある場合は、より積極的な更新のために <code>aria-live="assertive"</code> を設定することができます。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p class="p1">要素に <code>log</code> ロールが追加されたとき、またはそのような要素が可視になるとき、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>log</code> ロールを持つ要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なログイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。</p> + +<ul class="ul1"> + <li class="li2"><code>aria-live="assertive"</code> が設定されておらず、ユーザーが中断されている場合を除き、スクリーンリーダーは、ユーザーがアイドル状態のときにログ内の変更をアナウンスするべきです。</li> + <li class="li2">スクリーン拡大鏡は、ログ更新が発生したことを視覚的に示すことができます。</li> +</ul> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Adding_the_role_in_the_HTML_code" name="Example_1_Adding_the_role_in_the_HTML_code">例 1: HTML コードにロールを追加する</h4> + +<p class="p2">以下のスニペットは、<code>log</code> ロールを HTML ソースコードに直接追加する方法を示しています。</p> + +<pre class="brush: html"><div id="liveregion" class="region" role="log"></div></pre> + +<h4 class="p1" id="Example_2_Snippet_from_an_example_application" name="Example_2_Snippet_from_an_example_application">例 2: サンプルアプリケーションからのスニペット</h4> + +<p class="p2">このスニペットは AJAX チャットアプリケーションにおいてチャットログを作成します。</p> + +<pre class="brush: html"><div id="chatArea" role="log"> + <ul id="chatRegion" aria-live="polite" aria-atomic="false"> + <li>AJAX チャットの使用を開始するには、ユーザー名を選択してください。</li> + </ul> + <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text"> + </ul> +</div> +</pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li class="li1"><a class="external" href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<ul class="ul1"> + <li class="li1">要素に <code>log</code> ロールを使用すると、その要素には <code>aria-live="polite"</code> が暗黙で含まれます。</li> + <li class="li1">株式相場表示機のようにスクロールするテキストがある領域では、<code>marquee</code> ロールを代わりに使用するべきです。</li> +</ul> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul> + <li class="p1"><a class="external" href="http://www.w3.org/TR/wai-aria/#log">log</a></li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li class="p1"><a class="external" href="http://www.w3.org/TR/wai-aria/#marquee">marquee</a> ロール</li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li class="p1">ARIA のベストプラクティス - ライブリージョンの実装: <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">http://www.w3.org/TR/wai-aria-practices/#LiveRegions</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html new file mode 100644 index 0000000000..c5b0f28f40 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html @@ -0,0 +1,53 @@ +--- +title: presentation ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +--- +<p class="summary" id="Description"><span class="seoSummary">このテクニックは、<code><a href="https://www.w3.org/TR/wai-aria/#presentation">presentation</a></code> ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。</span></p> + +<p><code>presentation</code> ロールは、要素とそれに関連する子要素の意味論的意味を取り除くために使用されます。 例えば、レイアウト目的で使用される表は、表要素に <code>presentation</code> ロールを適用して、表要素およびその表に関連する子要素（表のヘッダーや表のデータの要素など）から意味論的意味を取り除けます。 しかし、表に関係のない要素は、その意味論的意味を保持するべきです。</p> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p> </p> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1" name="Example_1">Example 1: </h3> + +<p> </p> + +<pre class="brush: html">Code </pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> +</ul> + +<h2 id="Notes" name="Notes">注</h2> + +<p> </p> + +<h2 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h2> + +<p> </p> + +<h2 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h2> + +<p> </p> + +<h2 id="Compatibility" name="Compatibility">互換性</h2> + +<p> </p> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h2 id="Additional_resources" name="Additional_resources">その他のリソース</h2> + +<p> </p> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html new file mode 100644 index 0000000000..5d69e27437 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html @@ -0,0 +1,74 @@ +--- +title: progressbar ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +--- +<p class="summary"><span class="seoSummary">このテクニックは、<code><a href="http://www.w3.org/TR/wai-aria/#progressbar">progressbar</a></code> ロールの使い方を示し、ブラウザーや支援技術への影響について説明します。</span></p> + +<p><code>progressbar</code> ロールは、長い時間がかかったり、いくつかの手順で構成されるタスクの進捗状況を表示する要素に使用するべきです。</p> + +<p>プログレスバーは、ユーザーの要求を受けて、アプリケーションが要求された操作を完了に向かって進捗していることを示します。 プログレスバーの実際の値が決定できる場合、開発者は <code><a href="http://www.w3.org/TR/wai-aria/#aria-valuenow">aria-valuenow</a></code>、<code><a href="http://www.w3.org/TR/wai-aria/#aria-valuemin">aria-valuemin</a></code>、<code><a href="http://www.w3.org/TR/wai-aria/#aria-valuemax">aria-valuemax</a></code> 属性を使用してこの進捗状況を示す必要があります。 進捗値が不確定な場合、開発者は <code>aria-valuenow</code> 属性を省略するべきです。</p> + +<p>タスクが進捗するにつれて、<code>aria-valuenow</code> 値は、この進捗を支援技術製品に示すために動的に更新されなければならない。</p> + +<p>プログレスバーがページの特定の領域のロード進捗状況を説明している場合、作者は、<a href="http://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a> を使用してステータスを指し示すべきであり、ロードが完了するまで領域の <a href="http://www.w3.org/TR/wai-aria/#aria-busy">aria-busy</a> 属性を <code>true</code> に設定する<strong>べき</strong>です（SHOULD）。 これは常に読み取り専用なので、ユーザーはプログレスバーの値を変更することはできません。</p> + +<div class="note"><strong>注</strong>: 支援技術は、<a href="http://www.w3.org/TR/wai-aria/#aria-valuetext">aria-valuetext</a> が指定されていない限り、<code>aria-valuemin</code> の値と <code>aria-valuemax</code> の値の間の範囲のパーセントとして、<code>aria-valuenow</code> の値を一般にレンダリングします。 この計算に適した方法で、<code>aria-valuemin</code>、<code>aria-valuemax</code>、<code>aria-valuenow</code> の値を設定することをお勧めします。</div> + +<div class="note">注: <code>progressbar</code> ロールを持つ要素の暗黙の <code><a href="http://www.w3.org/TR/wai-aria/#aria-readonly">aria-readonly</a></code> の値は <code>true</code> です。</div> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p>スクリーンリーダーは進捗状況の更新が発生したときにアナウンスするべきです。 プログレスバーにラベルが付いている場合は、ラベルテキストも同様に述べるべきです。</p> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Basic_progressbar_with_percentage_values" name="Example_1_Basic_progressbar_with_percentage_values">例 1: パーセンテージ値を持つ基本的なプログレスバー</h3> + +<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> +</pre> + +<p> </p> + +<h3 id="Example_2_Using_aria-valuetext" name="Example_2_Using_aria-valuetext">例 2: aria-valuetext の使用</h3> + +<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="ステップ 2: ファイルをコピーしています... " aria-valuemax="100"> + ステップ 2: ファイルをコピーしています... +</div> +</pre> + +<p> </p> + +<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> + +<p> </p> + +<h2 id="Notes" name="Notes">注</h2> + +<p> </p> + +<h2 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#progressbar" title="http://www.w3.org/TR/wai-aria/roles#progressbar">progressbar</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuenow" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemin" title="ARIA techniques">aria-valuemin</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuemax" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">aria-valuemax</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">aria-valuetext</a></li> +</ul> + +<h2 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h2> + +<p> </p> + +<h2 id="Compatibility" name="Compatibility">互換性</h2> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h2 id="Additional_resources" name="Additional_resources">その他のリソース</h2> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html new file mode 100644 index 0000000000..6b2b7dda4a --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html @@ -0,0 +1,53 @@ +--- +title: radio ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p>このテクニックは、<code><a href="https://www.w3.org/TR/wai-aria/#radio">radio</a></code> ロールをどのように使用するかを示し、ブラウザーと支援技術に及ぼす影響について説明します。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1" name="Example_1">例 1:</h4> + +<p>MDN ページの<a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">基本的なフォームのヒント</a>からの例</p> + +<pre class="brush: html"><h3 id="rg1_label">ランチオプション</h3> + +<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> + <li id="r1" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> タイ + </li> + <li id="r2" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> サブウェイ + </li> + <li id="r3" tabindex="0" role="radio" aria-checked="true"> + <img role="presentation" src="radio-checked.gif" /> ラジオマリア + </li> +</ul></pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..f8b1001d8e --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,135 @@ +--- +title: slider ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +<p id="Description"> </p> + +<p class="summary"><span class="seoSummary">このテクニックは、<code><a href="http://www.w3.org/TR/wai-aria/#slider">slider</a></code> ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。</span></p> + +<p><code>slider</code> ロールは、ユーザーが所定の範囲内から値を選択できるマークアップに使用されます。 <code>slider</code> ロールは、値を変更するために調節するコントロールである「つまみ」に割り当てられます。 ユーザーがつまみとやり取りするとき、アプリケーションはスライダーの <code>aria-valuenow</code>（および可能なら <code>aria-valuetext</code>）属性をプログラムで調整して現在の値を反映する必要があります。 詳細については、下記の{{ anch("Examples","例") }}のセクションを参照してください。</p> + +<h3 id="Keyboard_And_Focus" name="Keyboard_And_Focus">キーボードとフォーカス</h3> + +<p>スライダーはキーボードでフォーカス可能で操作可能であるべきです。 ユーザーがタブキーでスライダーにフォーカスを合わせると、フォーカスはつまみに当たるべきです。 つまみはマウスのユーザーがドラッグするコントロールです。 矢印キーは、次のように操作する必要があります（右から左の言語のローカライゼーションは矢印の方向を逆にする必要があります）。</p> + +<table style="width: 70%;"> + <thead> + <tr> + <th scope="col">キー</th> + <th scope="col">動作</th> + </tr> + </thead> + <tbody> + <tr> + <td>右矢印と上矢印</td> + <td>選択した値を増やす</td> + </tr> + <tr> + <td>左矢印と下矢印</td> + <td>選択した値を減らす</td> + </tr> + <tr> + <td>ページアップとページダウン</td> + <td>オプションで、設定した量だけ値を増減します（例えば、0 ～ 100 の範囲で 10 ずつ）</td> + </tr> + </tbody> +</table> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p> </p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Simple_Numerical_Range" name="Example_1_Simple_Numerical_Range">例 1: 単純な数値範囲</h3> + +<p>次の例では、単純なスライダーを使用して 1 ～ 100 の値を選択しています。 現在のボリュームは 50 です。 アプリケーションは、ユーザーの入力に応じてプログラムで <code>aria-valuenow</code> の値を更新します。</p> + +<pre class="brush: html"><label for="fader">ボリューム</label> +<input type="range" + id="fader" + min="1" + max="100" + value="50" + step="1" + aria-valuemin="1" + aria-valuemax="100" + aria-valuenow="50" + oninput="outputUpdate(value)"> +<output for="fader" id="volume">50</output> +</pre> + +<p>次のコードスニペットを使用すると、ユーザー入力によって更新された出力を返すことができます。</p> + +<pre>function outputUpdate(vol) { + document.querySelector('#volume').value = vol; +} +</pre> + +<h3 id="Example_2_Text_Values" name="Example_2_Text_Values">例 2: テキスト値</h3> + +<p>時には、意味的には数字ではない値を選択するためにスライダーが使用されることがあります。 このような場合、<code>aria-valuetext</code> 属性を使用して、現在選択されている値に対して適切なテキスト名を指定します。 次の例では、スライダーを使用して曜日を選択しています。</p> + +<pre class="brush: html"><label id="day-label">曜日</label> +<div class="day-slider"> + <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" + aria-valuemin="1" + aria-valuemax="7" + aria-valuenow="2 + aria-valuetext="月曜日"> + </div> +</div> +</pre> + +<p>以下のコードスニペットは、ユーザーの入力に応答して <code>aria-valuenow</code> および <code>aria-valuetext</code> 属性を更新する関数を示しています。</p> + +<pre class="brush: js">var dayNames = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]; +var updateSlider = function (newValue) { + var handle = document.getElementById("day-handle"); + handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span> + handle.setAttribute("aria-valuetext", dayNames[newValue]); +}; +</pre> + +<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> +</ul> + +<h2 id="Notes" name="Notes">注</h2> + +<p> </p> + +<p> </p> + +<h2 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="Using the aria-label attribute">aria-valuenow</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="Using the aria-required attribute">aria-valuetext</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> +</ul> + +<h2 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h2> + +<p> </p> + +<h2 id="Compatibility" name="Compatibility">互換性</h2> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h2 id="Additional_resources" name="Additional_resources">その他のリソース</h2> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">slider ロールの WAI-ARIA 仕様</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_status_role/index.html new file mode 100644 index 0000000000..dfed2dab7a --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_status_role/index.html @@ -0,0 +1,82 @@ +--- +title: status ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p class="p1">このテクニックは、<code><a href="https://www.w3.org/TR/wai-aria/#status">status</a></code> ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。</p> + +<p class="p1"><code>status</code> ロールは、<a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">ライブリージョン</a>の一種であり、内容は <code><a href="https://www.w3.org/TR/wai-aria-practices/#alert">alert</a></code> を正当化するほど重要ではないユーザーのためのアドバイザリ情報であり、多くの場合ステータスバーとして表示されます。 ロールが要素に追加されると、ブラウザーは、支援技術製品にアクセス可能なステータスイベントを送信し、ユーザーに通知することができます。</p> + +<p class="p1">ステータス情報のコンテンツは、ステータスオブジェクト内に提供されなければならず、このオブジェクトがフォーカスを受け取らないようにするべきです。 ページの別の部分がステータスに表示されるものを制御する場合、関係は <code><a href="http://www.w3.org/TR/wai-aria/#aria-controls">aria-controls</a></code> 属性を介して明示的に指定するべきです。</p> + +<p class="p1">支援技術は、ステータスをレンダリングするために点字ディスプレイのいくつかのセルを予約することができます。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p class="p1"><code>status</code> ロールが要素に追加されるか、またはそのような要素が可視になると、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>status</code> ロールを持つものとして要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なステータスイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。</p> + +<ul class="ul1"> + <li class="li2">スクリーンリーダーは、現在のステータスをアナウンスするための特別なキーを提供することがあり、これはステータスのライブリージョンの内容を提示するべきです。 <code>aria-live="assertive"</code> が設定されている場合を除いて、ユーザーがアイドル状態になったときにアナウンスするべきです。</li> + <li class="li2"> スクリーン拡大鏡でステータスが拡大されることがあります。</li> +</ul> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1_Adding_the_status_role_in_HTML" name="Example_1_Adding_the_status_role_in_HTML">例 1: HTMLで status ロールを追加する</h4> + +<p class="p1">以下のスニペットは、<code>status</code> ロールが html ソースコードに直接追加される仕組みを示しています。</p> + +<pre class="brush: html"><p role="status">変更は自動的に保存されました。</p> </pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<ul> + <li class="p1"><a class="external" href="https://www.w3.org/TR/wai-aria/#status">status</a></li> +</ul> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<ul> + <li class="p1"><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#alert">alert</a> ロール</li> + <li class="p1"><a href="https://www.w3.org/TR/wai-aria-1.1/#live_region_roles">ライブリージョンのロール</a></li> + <li class="p1"><a href="https://www.w3.org/TR/wai-aria-1.1/#attrs_liveregions">ライブリージョンの属性</a></li> +</ul> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<ul> + <li class="comment"> + <p>Paciello Group は、2014年のブログ記事を通じて互換性に関するいくつかのデータを発表しました。 <a href="https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">ARIA ライブリージョンのスクリーンリーダーのサポート</a></p> + </li> + <li class="comment"> + <p>TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + </li> +</ul> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> + +<ul> + <li class="p1">status ロールの <a href="https://www.w3.org/TR/wai-aria-1.1/#status">WAI-ARIA 1.0（2014年）</a>よりの以前の勧告</li> +</ul> diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html new file mode 100644 index 0000000000..fec2cec021 --- /dev/null +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html @@ -0,0 +1,45 @@ +--- +title: toolbar ロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role +--- +<h3 id="Description" name="Description">説明</h3> + +<p>このテクニックは、<code><a href="https://www.w3.org/TR/wai-aria-1.1/#toolbar" rel="noopener">toolbar</a></code> ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。</p> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p> </p> + +<div class="note"><strong>注</strong>: 支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h3 id="Examples" name="Examples">例</h3> + +<h4 id="Example_1" name="Example_1">Example 1: </h4> + +<p> </p> + +<pre class="brush: html">Code </pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<p><a href="https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html">W3C toolbar example</a></p> + +<ul> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<h3 id="ARIA_attributes_used" name="ARIA_attributes_used">使用された ARIA 属性</h3> + +<h3 id="Related_ARIA_techniques" name="Related_ARIA_techniques">関連する ARIA 技術</h3> + +<h3 id="Compatibility" name="Compatibility">互換性</h3> + +<p class="comment">TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する</p> + +<h3 id="Additional_resources" name="Additional_resources">その他のリソース</h3> diff --git a/files/ja/web/accessibility/aria/forms/alerts/index.html b/files/ja/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..3bce447f64 --- /dev/null +++ b/files/ja/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,153 @@ +--- +title: alerts +slug: Web/Accessibility/ARIA/forms/alerts +tags: + - ARIA + - Accessibility + - Forms + - Web +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="The_problem" name="The_problem">問題点</h2> + +<p>アクセシブルなエラーチェックを組み入れたいフォーム、例えば問い合わせフォームがあります。よくある問題点は電子メールアドレスが有効ではない、あるいは名前欄に姓も名も含まれていないことです。</p> + +<h2 id="The_form" name="The_form">フォーム</h2> + +<p>始めに、<a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints" title="Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> の手法に関する記事</a>を読んでいないのでしたら、まずはそちらをお読みください。ここでは、その手法を拡張します。</p> + +<p>こちらがシンプルなフォームです:</p> + +<pre class="brush: html"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<p>ストレートでシンプルですが、この時点では美しさの賞は与えられないでしょう。:-)</p> + +<h2 id="Checking_for_validity_and_notifying_the_user" name="Checking_for_validity_and_notifying_the_user">有効性の確認とユーザへの通知</h2> + +<p>有効性の確認とユーザへの通知は、いくつかのステップで構成されます:</p> + +<ol> + <li>電子メールアドレスや入力された名前が有効かを確認します。シンプルにするため、電子メールアドレスは “@” 記号を含んでいるか、名前は空白 ” “ を少なくとも 1 文字含んでいるかを確認します。</li> + <li>フィールドの <code>aria-invalid</code> 属性を設定して、値を “<code>true</code>” にします。</li> + <li>alert を通して、入力した値が間違っていることをユーザに通知します。それには JavaScript の ‘<code>alert</code>’ 関数を使用した押しつけがましいダイアログボックスではなく、シンプルな WAI-ARIA のウィジェットを使用します。これはユーザに通知を行いますが、ユーザは割り込まれることなくフォームとの対話を続けられます。</li> +</ol> + +<p>これらのすべては <code>input</code> がフォーカスを失ったとき、つまり “<code>onblur</code>” ハンドラの状況で発生します。</p> + +<p>私が作成した JavaScript コードは以下のとおりであり、“<code>head</code>” の終了タグの前に挿入しました:</p> + +<pre class="brush: js"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert) + document.body.removeChild(oldAlert); + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="The_checkValidity_function" name="The_checkValidity_function"><code>checkValidity</code> 関数</h2> + +<p>中核をなすのが <code>checkValidity</code> 関数です。これは 3 つの引数をとります: 検証を行う <code>input</code> の ID、有効性を確かめるために検索する語句、alert に挿入するエラーメッセージです。</p> + +<p>値が有効かを調べるため、この関数は <code>input</code> の値 <code>indexOf</code> が -1 より大きいかを確認します。検索語句が値の中で見つからないときに、<code>-1</code> 以下の値が返ります。</p> + +<p>値が無効であるとき、この関数は 2 つのことを行います:</p> + +<ol> + <li>要素の <code>aria-invalid</code> 属性を “<code>true</code>” に設定します。これは、そこに無効な内容物があることをスクリーンリーダーに示します。</li> + <li>示されたエラーメッセージを持つ alert を追加するため、<code>addAlert</code> 関数を呼び出します。</li> +</ol> + +<p>検索語句が見つかった場合は <code>aria-invalid</code> 属性を “<code>false</code>” にリセットします。加えて、まだ残っているかもしれない alert を削除します。</p> + +<h2 id="The_addAlert_function" name="The_addAlert_function"><code>addAlert</code> 関数</h2> + +<p>この関数は始めに、古い alert を削除します。この機能はシンプルです: id が “<code>alert</code>” である要素を探して、発見した場合はその要素を Document Object Model から削除します。</p> + +<p>次にこの関数は、alert のテキストを保持する <code>div</code> 要素を作成します。これは “<code>alert</code>” という ID を持ちます。また、“alert” が設定された role を持ちます。これは属性名に “aria” がついていませんが、実は ARIA から生まれたものです。その理由は role が、簡素化のため単純に HTML へ移植された、<a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribute Module">XHTML Role Attribute Module</a> に基づいているためです。</p> + +<p>テキストは <code>div</code> 要素に追加され、また <code>div</code> 要素はドキュメントに追加されます。</p> + +<p>これが発生したとき、その <code>div</code> が現れるとすぐに Firefox は支援技術に対して “alert”イベントを発生させます。ほとんどのスクリーンリーダーは自動的にその div 要素を拾い上げて、読み上げるでしょう。これはパスワードを保存したいかを尋ねる、Firefox の通知バーに似ています。ここで作成した alert はボタンを持たず、何が誤っているかを伝えるのみです。</p> + +<h2 id="Adding_the_magic_to_the_“onblur”_event" name="Adding_the_magic_to_the_“onblur”_event">“<code>onblur</code>” イベントのマジックを加える</h2> + +<p>あとはイベントハンドラの追加が残っています。以下のように電子メールアドレスと名前の入力欄の変更が必要です:</p> + +<pre class="brush: html"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>サンプルのテスト</strong></p> + +<p>Firefox 3 およびサポート済みのスクリーンリーダーを使用している場合は、以下を試してみましょう:</p> + +<ol> + <li>名前欄に (姓を除く) 名だけを入力してください。Tab キーを押すと、無効な名前を入力したことを伝える警告が聞こえるでしょう。Shift-Tab を押して戻り、エラーを修正できます。</li> + <li>“@” 記号がない電子メールアドレスを入力してください。Tab を押してフィールドを離れると、有効な電子メールアドレスを入力していないことを伝える警告が聞こえるでしょう。</li> +</ol> + +<p>どちらのケースでも問題のフィールドへフォーカスを戻すと、スクリーンリーダーはそのフィールドのデータが無効であることを伝えるでしょう。JAWS 9 はこれをサポートしていますが JAWS 8 は未サポートであり、サポートしているスクリーンリーダーの前バージョンで動作するわけではありません。</p> + +<h2 id="A_few_questions_that_you_might_have" name="A_few_questions_that_you_might_have">よくある質問</h2> + +<dl> + <dt>Q. いくつかの input で、ラベルテキストの “<code>(required)</code>” と <code>aria-required</code> 属性の両方を置いている理由は?</dt> + <dd>A. これが実際のフォームで、またサイトを ARIA 未サポートのブラウザでアクセスされた場合でも、入力必須のフィールドであることを示したいと考えているためです。</dd> + <dt>Q. 無効なデータのフィールドへ自動的にフォーカスを戻さない理由は?</dt> + <dd>A. これは少なくとも Windows API の仕様で許可されていないなどの理由があります。また、実際のユーザとの対話なしにフォーカスを飛ばせるようにすることは、一般的によいことではありません。</dd> +</dl> + +<div class="warning">TBD: これは再考しましょう -- 個人的には、キーボードトラップを発生させずに行えるのであれば、フォーカスの設定はよいであろうと考えます。</div> + +<h2 id="In_conclusion" name="In_conclusion">おわりに</h2> + +<p>Web サイトのアクセシビリティは、クライアントサイドの検証向けにアクセシブルな alert を提供することで大きく向上します。ユーザにとっては、20 個ほどのフィールドを埋めて送信するとフィールド 3 のデータが無効であるとわかるだけで、すべてのフィールドで値が残っているかを見直さなければならなかったりいくつかの情報を余計に入力したりすることより失望させられることはありません。</p> diff --git a/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..f8fc0aea2c --- /dev/null +++ b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,121 @@ +--- +title: 基本的なフォームのヒント +slug: Web/Accessibility/ARIA/forms/Basic_form_hints +tags: + - ARIA + - Accessibility + - Forms +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +<h2 id="Form_labels" name="Form_labels">フォームラベル</h2> + +<p>伝統的な HTML のフォーム関連要素を使用してフォームを実装する際は、コントロール向けのラベルを提供することと、ラベルとコントロールとを明示的に結びつけることが重要です。スクリーンリーダーのユーザがページをナビゲートするときにスクリーンリーダーはフォームコントロールについて述べますが、コントロールトラベルとの間に直接的な結びつきがないと、どのラベルが適切かをスクリーンリーダーが知る方法がなくなります。</p> + +<p>以下の例では、ラベルを持つシンプルなフォームを示しています。各 {{HTMLElement("input")}} 要素は <strong>id</strong> を持ち、また各 {{HTMLElement("label")}} 要素は結びつけられる {{HTMLElement("input")}} の <strong>id</strong> を示す、<strong>for</strong> 属性を持つことに注目してください。</p> + +<p><em>例 1. ラベルを持つシンプルなフォーム</em></p> + +<pre class="brush: html"><form> + <ul> + <li> + <input id="wine-1" type="checkbox" value="riesling"/> + <label for="wine-1">Berg Rottland Riesling</label> + </li> + <li> + <input id="wine-2" type="checkbox" value="weissbergunder"/> + <label for="wine-2">Weissbergunder</label> + </li> + <li> + <input id="wine-3" type="checkbox" value="pinot-grigio"/> + <label for="wine-3">Pinot Grigio</label> + </li> + <li> + <input id="wine-4" type="checkbox" value="gewurztraminer"/> + <label for="wine-4">Berg Rottland Riesling</label> + </li> + </ul> +</form> +</pre> + +<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">ARIA でラベルをつける</h2> + +<p>HTML の {{HTMLElement("label")}} 要素はフォーム関連の要素にふさわしいのですが、多くのフォームコントロールは {{HTMLElement("div")}} や {{HTMLElement("span")}} を使用した、動的な JavaScript ウィジェットとして実装されています。W3C の <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> から生まれた <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> こと <strong>Accessible Rich Internet Applications</strong> 仕様は、このような場合のために <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a> 属性を用意しています。</p> + +<p>以下の例では、順不同リストを使用して実装したラジオボタングループを示しています。3 行目で {{HTMLElement("li")}} 要素の <strong>aria-labelledby</strong> 属性に、1 行目の {{HTMLElement("h3")}} 要素の <strong>id</strong> である "rg1_label" を設定しており、h3 要素がラジオボタングループのラベルです。</p> + +<p><em>例 2. 順不同リストを使用して実装したラジオボタングループ (<a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a> をもとに改作)</em></p> + +<pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> + +<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> + <li id="r1" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Thai + </li> + <li id="r2" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Subway + </li> + <li id="r3" tabindex="0" role="radio" aria-checked="true"> + <img role="presentation" src="radio-checked.gif" /> Radio Maria + </li> +</ul> +</pre> + +<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">ARIA で説明する</h2> + +<p>フォームコントロールはラベルに加えて、説明文が結びつけられることがあります。ARIA には、説明文とコントロールを直接結びつけるための <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> 属性があります。</p> + +<p>以下の例では別の {{HTMLElement("div")}} 要素内の文で説明されている、{{HTMLElement("button")}} 要素を示しています。{{HTMLElement("button")}} 要素の <strong>aria-describedby</strong> 属性は {{HTMLElement("div")}} 要素の <strong>id</strong> を参照しています。</p> + +<p><em>例 3. 別の要素で説明されているボタン</em></p> + +<pre class="brush: html"><button aria-describedby="descriptionRevert">Revert</button> +<div id="descriptionRevert">Reverting will undo any changes that have been made + since the last save.</div></pre> + +<p>(<strong>aria-describedby</strong> 属性はフォームコントロールに加えて、他の用途にも使用されることに注意してください。)</p> + +<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">必須のフィールドと正しくないフィールド</h2> + +<p>一般的に Web 開発者は、必須のフィールドや正しくないフィールドを示すために視覚的な方法を使用します。しかし、支援技術 (AT) は必ずしもその表示から情報を推測できるわけではありません。ARIA は、コントロールが必須あるいは正しくないことを示すための属性を用意しています:</p> + +<ul> + <li>フォーム要素は入力が必須であることを AT に示すために、<a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> プロパティを適用できます。</li> + <li>データフィールドに正しくないデータがあることを AT に知らせるために、プログラムで <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> 状態を適用することで、ユーザは正しくないデータを入力したことを知ります。</li> +</ul> + +<p>以下の例では、3 つのフィールドを持つシンプルなフォームを示しています。4 行目から 12 行目で、name および email フィールドは入力必須であることを示すために (ラベルの隣にアスタリスクを置くのに加えて) <strong>aria-required</strong> 属性を true に設定しています。2 番目の例は電子メールの形式を検証して、その結果に応じて email フィールド (HTML の 12 行目) の (要素を視覚的に変化させるのに加えて) <strong>aria-invalid</strong> 属性を設定する JavaScript コードスニペットです。</p> + +<p><em>例 4a. 必須のフィールドを持つフォーム</em></p> + +<pre class="brush: html"><form> + <div> + <label for="name">* Name:</label> + <input type="text" value="name" id="name" aria-required="true"/> + </div> + <div> + <label for="phone">Phone:</label> + <input type="text" value="phone" id="phone" aria-required="false"/> + </div> + <div> + <label for="email">* E-mail:</label> + <input type="text" value="email" id="email" aria-required="true"/> + </div> +</form></pre> + +<p><em>例 4b. フォームの入力内容を検証するスクリプトの一部</em></p> + +<pre class="brush: js">var validate = function () { + var emailElement = document.getElementById(emailFieldId); + var valid = emailValid(formData.email); // 正しい場合に true、そうでない場合に false を返す + + emailElement.setAttribute("aria-invalid", !valid); + setElementBorderColour(emailElement, valid); // 第 2 引数が false である場合はボーダーを赤色に設定 +};</pre> + +<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">役に立つエラーメッセージの提供</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/forms/alerts" title="aria/forms/alerts">フォームを強化するための ARIA alerts</a> の使い方をご覧ください。</p> + +<div class="note">TBD: ひとつの記事にまとめるか、テクニックを分けるか、あるいはその両方を行うとよいでしょう。また ARIA のマークアップは、サーバサイドの検証の後に読み込まれたページ内のエラーメッセージにふさわしいのでしょうか?</div> + +<p>フォームのアクセシビリティのために ARIA を使用する際のさらなるガイドラインについては、<a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> のドキュメントをご覧ください。</p> diff --git a/files/ja/web/accessibility/aria/forms/index.html b/files/ja/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..06d28f5f8d --- /dev/null +++ b/files/ja/web/accessibility/aria/forms/index.html @@ -0,0 +1,17 @@ +--- +title: フォーム +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/forms +--- +<p>以下のページでは、Web フォームのアクセシビリティを向上させるさまざまなテクニックを紹介します:</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints" title="Basic form hints">基本的なフォームのヒント</a>: 値が無効あるいは必須のフィールドに、ヒントや説明を追加します。</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/alerts" title="alerts">Alerts</a>: クライアントサイドの検証で発生したエラーメッセージを示すために、アラートを使用します。</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">マルチパートのラベル</a>: 各々のラベル内で制御することにより、複雑なフォームラベルを実現します。</li> +</ul> + +<p>同様のコンテンツを多く扱っている、<a href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">フォーム検証や ARIA に関する Yahoo! の記事</a>もご覧ください。</p> diff --git a/files/ja/web/accessibility/aria/forms/multipart_labels/index.html b/files/ja/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..d2e3c6d4de --- /dev/null +++ b/files/ja/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,41 @@ +--- +title: マルチパートのラベル +slug: Web/Accessibility/ARIA/forms/Multipart_labels +tags: + - ARIA + - Accessibility + - Guide + - NeedsContent + - label +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +<div> +<h2 id="Problem" name="Problem">問題点</h2> + +<p>ユーザに質問をするフォームがありますが、その回答が質問文で触れられています。ブラウザの設定項目から皆が知っている伝統的な例を挙げると、“履歴を x 日後に削除する” 設定です。“履歴を” はテキストボックスの左側にあり、また x は例えば 21 といった数値であり、そして “日後に削除する” という文言はテキストボックスの後ろにあって、理解しやすい文を構成します。</p> + +<p>スクリーンリーダーを使用している場合、Firefox でこの設定項目に達すると “履歴を 21 日後に削除する” と伝えられ、その後にあなたはテキストボックス内にいて、数値 21 が入っているとと知らされることに気づきます。すばらしいでしょう? 単位を見つけるために行き来する必要はありません。“日” は容易に “月” や “年” に変えることができ、また多くの通常のダイアログではこれを見つけるための方法が、スクリーンの再調査コマンドで行き来する以外にありません。</p> + +<p>解決策は、ARIA の <strong>aria-labelledby</strong> という属性にあります。このパラメータは、ひとつのアクセシブルな名称になるように連結したい HTML 要素の ID で構成される文字列です。</p> + +<p><strong>aria-labelledby</strong> および <strong>aria-describedby</strong> はどちらもラベル付けされる要素、例えば <input> で指定します。どちらの場合もラベルとコントロールの紐付けがあってもかまいませんが、aria-labelledby によって上書きされます。<strong>aria-labelledby</strong> を提供する HTML ページでは、ARIA を未サポートとの古いブラウザもサポートするように構成したラベルも提供してください。Firefox 3 では新しい属性により、目の不自由なユーザが自動的によりよいアクセシビリティを得られますが、古いブラウザのユーザはこの方法でアクセシビリティがない状態を抜けられません。</p> + +<p>例:</p> +<input><span id="labelShutdown">Shut down computer after</span> <input> <span id="shutdownUnit"> minutes</span> + +<pre class="brush: html"><input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> +<span id="labelShutdown">Shut down computer after</span> +<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> +<span id="shutdownUnit"> minutes</span> +</pre> + +<h2 id="A_Note_for_JAWS_8_users" name="A_Note_for_JAWS_8_users">JAWS 8 ユーザへの注意</h2> + +<p>JAWS 8.0 はラベルを発見する独自のロジックを持っており、常に HTML ドキュメントで見つけたテキストボックスの accessibleName より優先します。JAWS 8 で、上記の例からラベルを受け入れるようにする方法は見つかっていません。しかし NVDA や Window-Eyes の動作は良好であり、また Linux での Orca も問題がありません。</p> + +<div class="note">TBD: さらに互換性情報を追加する</div> + +<h2 id="Can_this_be_done_without_ARIA" name="Can_this_be_done_without_ARIA">ARIA を使用せずに実現できますか?</h2> + +<p>コミュニティーのメンバーである Ben Millard はブログへの投稿で、単に input を label 内に埋め込むことにより <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">HTML 4 を使用して前出の例のようにコントロールをラベル内埋め込むことが可能</a>であることを指摘しました。この情報をありがとう、Ben! これはとても役に立ち、また長年使用されてきたテクニックには時に権威から逃れるものもあることを示します。このテクニックは Firefox で動作しますが、現時点で IE を含む他の多くのブラウザは動作しません。従ってフォームコントロールを埋め込んだラベルについては、<strong>aria-labelledby</strong> を使用することがやはり最善の方法です。</p> +</div> diff --git a/files/ja/web/accessibility/aria/index.html b/files/ja/web/accessibility/aria/index.html new file mode 100644 index 0000000000..a262674af4 --- /dev/null +++ b/files/ja/web/accessibility/aria/index.html @@ -0,0 +1,126 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - HTML +translation_of: Web/Accessibility/ARIA +--- +<p class="summary"><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> は Web コンテンツや Web アプリケーション (特に Ajax や JavaScript や Bootstrap のようなより最新のウェブ技術を伴って開発するもの) を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。</span>例えば、ARIA はナビゲーションの目印、JavaScript ウィジェット、フォームのヒントやエラーメッセージ、動的なコンテンツ更新などをアクセシブルにします。</p> + +<p>ARIA は任意のマークアップに追加できる特別なアクセシビリティの属性のセットですが、とりわけ HTML に適応しています。<code>role</code> 属性は、オブジェクトの一般的な型が何か (article、alert、slider など) を定義します。付加的な ARIA の属性は他の役に立つ特性、例えばフォームの説明やプログレスバーの現在の値を提供します。ARIA の属性はオブジェクト(特にボタン)のアクティブ/無効化の状態を指定するのにも使われます。</p> + +<p>スクリーンリーダーにその要素が無視できるのを教える <code>aria-hidden</code> 属性は、ブラウザーに表示しないよう教える HTML5 の <code>hidden</code> 属性と混用されるべきではありません。</p> + +<p>ARIA は、ほとんどの一般的なブラウザーやスクリーンリーダーに実装されています。ただし実装状況はまちまちであり、また古い技術では (どうあっても) それを十分にサポートしていません。上手に退行する "安全な" ARIA を使用するか、新しい技術へのアップグレードをユーザーに求めましょう。</p> + +<div class="note"> +<p><strong>注記</strong>: ぜひ貢献して、後進のために ARIA をよりよくしてください! 十分な時間がありませんか? でしたら、Mozilla の<a href="https://lists.mozilla.org/listinfo/accessibility">アクセシビリティメーリングリスト</a>や <a href="https://wiki.mozilla.org/IRC">IRC</a> の #accessibility チャンネルで提案してください。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Documentation" name="Documentation">ARIA 入門</h2> + +<dl> + <dt><a href="/ja/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA の紹介</a></dt> + <dd>ARIA で動的コンテンツをアクセシブルにする方法の簡単な紹介です。2008 年に作成された、定評のある <a href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">Gez Lemon 氏による ARIA の紹介</a>もご覧ください。</dd> + <dt><a href="/ja/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/ja/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web アプリケーションと ARIA の FAQ</a></dt> + <dd>WAI-ARIA に関する一般的な質問や、なぜ Web アプリケーションをアクセシブルにすることが必要かに対する回答です。</dd> + <dt><a href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of Screen Readers Using ARIA</a></dt> + <dd>ARIA の導入 "前" および "後" を含む、Web の方々から集めた簡単な実例のビデオをご覧ください。</dd> + <dt><a href="http://w3c.github.io/aria-in-html/">Using ARIA</a></dt> + <dd> + <p>開発者向けの実践的なガイドです。HTML 要素で使用する ARIA 属性は何かについて提案しています。提案内容は、実際の実装状況に基づいています。</p> + </dd> +</dl> + +<h2 id="Simple_ARIA_Enhancements" name="Simple_ARIA_Enhancements">簡単な ARIA の強化</h2> + +<dl> + <dt><a href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt> + <dd>スクリーンリーダーの利用者向けに Web ページのナビゲーションを向上させるための、ARIA landmark の使用法を紹介します。<a href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">ARIA landmark の実装状況の覚え書き</a>や実際のサイトでの例もご覧ください (2011 年 7 月更新)。</dd> + <dt><a href="/ja/docs/ARIA/forms" rel="internal" title="ARIA/forms">フォームのアクセシビリティ向上</a></dt> + <dd>ARIA は動的コンテンツのためだけのものではありません! 付加的な ARIA の属性を使用して HTML フォームのアクセシビリティを向上させる方法を学びましょう。</dd> + <dt><a href="/ja/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (作成中)</a></dt> + <dd>Live region は、ページのコンテンツの変化をどのように制御するかに関する提案を、スクリーンリーダーに与えます。</dd> + <dt><a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt> + <dd>スクリーンリーダーソフトウェア JAWS の作者による、Live region の簡単な概説です。なお、live region は Firefox での NVDA や、Safari での VoiceOver (OS X Lion および iOS 5) でもサポートされています。</dd> +</dl> + +<h2 id="ARIA_for_Scripted_Widgets" name="ARIA_for_Scripted_Widgets">スクリプトウィジェット向け ARIA</h2> + +<dl> + <dt><a href="/ja/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="Accessibility/Keyboard-navigable_JavaScript_widgets">JavaScript ウィジェット向けのキーボードナビゲーションとフォーカス</a></dt> + <dd>アクセシブルな JavaScript ウィジェットを作成する最初のステップは、キーボードでナビゲーション可能にすることです。この記事では、そのプロセスを見ていきます。<a href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! のフォーカス制御に関する記事</a>もすばらしい情報源です。</dd> + <dt><a class="external external-icon" href="https://web.archive.org/web/20141006075412/http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt> + <dd>ARIA は、開発者に一貫性のある動作を実装させることに挑戦します。それは明らかにユーザーにとってもっともよいことです。このスタイルガイドは、一般的なウィジェット向けのキーボードインターフェイスを説明します。</dd> +</dl> + +<h2 class="Tools" id="リファレンス">リファレンス</h2> + +<dl> + <dt><a href="/ja/docs/Accessibility/ARIA/widgets/overview" title="aria/widgets/overview">ウィジェット技術、チュートリアル、サンプル</a></dt> + <dd>スライダー、メニュー、あるいは他のウィジェットが必要ですか? こちらで情報を見つけましょう。</dd> + <dt><a href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA が有効な JavaScript UI ライブラリ</a></dt> + <dd>新たなプロジェクトを始める場合は、ARIA サポートが組み込まれた UI ウィジェットライブラリを選択しましょう。注意: これは 2009 年から存在する記事です。更新することが可能な MDN のページへコンテンツを移行すべきでしょう。</dd> +</dl> + +<dl> + <dt><a href="https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute">Role attribute-ARIA</a></dt> + <dd>role 属性の提案。</dd> + <dt> + <h2 id="Examples" name="Examples">例</h2> + </dt> + <dt><a href="/ja/docs/Accessibility/ARIA/ARIA_Test_Cases" title="ARIA/examples">ARIA サンプルライブラリ</a></dt> + <dd>学びやすくなっている、要点のサンプルファイルを集めています。</dd> + <dt>アクセシブルな JS ウィジェットライブラリのデモ</dt> + <dd><a class="external external-icon" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external external-icon" href="http://yuilibrary.com/gallery/">YUI</a></dd> +</dl> + +<h2 id="Standardization_Efforts" name="Standardization_Efforts">標準化の取り組み</h2> + +<dl> + <dt><a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">W3C の WAI-ARIA 活動の概要</a></dt> + <dd>Web Accessibility Initiative (WAI) による、WAI-ARIA の標準化の取り組みに関する権威ある概要です。</dd> +</dl> +<strong><a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 仕様</a></strong> + +<dl> + <dd>W3C の仕様そのものであり、リファレンスとして有用です。まだ実装に不一致がみられるため、現時点では互換性のテストが重要であることに注意してください。</dd> + <dt><a href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> + <dd>W3C の WAI-ARIA 仕様と同様に、将来の理想 (さまざまなブラウザーやスクリーンリーダーで一貫性のある ARIA サポートに作成者が頼れるとき) を表した公式のベストプラクティスです。W3C のドキュメントは ARIA の深い視点をもたらします。<br> + <br> + 今のところ、ARIA を実装する Web 開発者は互換性を最大化するべきです。現在の実装状況に基づいて、ベストプラクティスのドキュメントやサンプルを使用しましょう。</dd> + <dt><a href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> + <dd>Open AJAX は、ARIA の開発ツール、サンプルファイル、自動テストを中心に取り組んでいます。</dd> + <dt><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">作成中: WCAG 2.0 ARIA Techniques</a></dt> + <dd> + <p>コミュニティは WAI-ARIA + HTML 向けの WCAG 技術の完全なセットを求めており、それにより組織は自身の ARIA が有効なコンテンツが WCAG に準拠するという要求を満たすことができます。これは主として、規則や方針が WCAG に基づいている場合に重要です。</p> + </dd> +</dl> +</div> + +<div class="section"> +<h2 id="Community" name="Community">ブログ</h2> + +<p>ブログ上の ARIA に関する情報は、早々に古くなってしまう傾向があります。それでも、現在 ARIA に取り組んでいる他の開発者が提供したすばらしい情報があります。</p> + +<p><a href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> + +<h2 id="Videos" name="Videos">動画</h2> + +<p>Following talks are a great way to understand ARIA:</p> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p> + +<h2 id="Filing_Bugs" name="Filing_Bugs">バグ報告</h2> + +<p><a href="/ja/docs/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">ブラウザー、スクリーンリーダー、JavaScript ライブラリの ARIA に関するバグを報告してください</a>。</p> +</div> +</div> + +<h2 id="Related_Topics" name="Related_Topics">関連トピック</h2> + +<p><a href="https://developer.mozilla.org/ja/docs/Accessibility">Accessibility</a>, <a href="https://developer.mozilla.org/ja/docs/AJAX">AJAX</a>, <a href="https://developer.mozilla.org/ja/docs/JavaScript">JavaScript</a></p> diff --git a/files/ja/web/accessibility/aria/roles/alert_role/index.html b/files/ja/web/accessibility/aria/roles/alert_role/index.html new file mode 100644 index 0000000000..89b0251538 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/alert_role/index.html @@ -0,0 +1,70 @@ +--- +title: 'ARIA: alert ロール' +slug: Web/Accessibility/ARIA/Roles/Alert_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Alert_Role +--- +<p class="summary">\{{ariaref}}<span class="seoSummary"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、要素が動的に更新されたことをユーザーに通知するために使用できます。 ロールが追加されると、スクリーンリーダーは更新されたコンテンツの読み上げを即座に開始します。 ユーザーがアラートを閉じることを期待する場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></code> ロールを使用するべきです。</span></p> + +<h2 id="Description" name="Description">説明</h2> + +<p>5つのライブリージョンロールの1つである <code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">alert</a></code> ロールは、重要な、通常は時間依存の情報をユーザーに提供するために使用され、要素が動的に更新されたことをユーザーに伝えることがよくあります。</p> + +<p><code>alert</code> ロールは、アラート（alert）メッセージを含むノードに追加し、アラートをトリガーする要素には追加しません。 アラートは主張的なライブリージョンです。 <code>role="alert"</code> の設定は、<code>aria-live="assertive"</code> と <code>aria-atomic="true"</code> の設定と同じです。 それらはフォーカスを受け取らないので、フォーカスを管理する必要はなく、ユーザーインタラクションを必要とするべきではありません。</p> + +<p><code>alert</code> ロールについて最も重要なことは、動的コンテンツ用であることです。 ユーザーがフォームに記入し、JavaScript を使用してエラーメッセージを追加すると、アラートがすぐにメッセージを読み上げるなどの状況に最適です。 ユーザーが HTML と対話していない HTML 上では使用するべきではありません。 例えば、ページ上に複数の可視のアラートが散在して読み込まれたページは、動的にトリガーされないため読み上げられません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>アラートをトリガーする最も基本的な方法は、デフォルトで <code>display: none;</code> を持つ要素に <code>role="alert"</code> を追加することです。 CSS や JavaScript で <code><a href="/ja/docs/Web/CSS/CSS_Display">display</a></code> の値を変更すると、自動的にスクリーンリーダーがコンテンツを読み上げるようになります。</p> + +<pre class="brush: html"><p role="alert" style="display: none;">要素が表示されるとアラートがトリガーされます。</p></pre> + +<p>CSS だけでアラートをトリガーすることは可能ですが、ブラウザやスクリーンリーダーのサポートが増え、イベントハンドラやフォームの検証などのより大きなユーザーインタラクションの一部として、より適切な場合が多いため、JavaScript を使用する方がよいでしょう。 JavaScript を使用すると、開発者はアラートの追加と削除を適切に制御できます。</p> + +<pre class="brush: html"><button type="button" onclick="triggerAlert">アラートをトリガー</button> +<p class="alert">ボタンを押すとアラートがトリガーされます。</p> +</pre> + +<pre class="brush: js">function triggerAlert() { + var alertEl = document.querySelector('.alert'); + alertEl.addAttribute("role", "alert"); +} +</pre> + +<p>（訳注：<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a>によると、alert ロールを動的に追加してもトリガーされないそうです。）</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>alert</code> ロールは、変更されたコンテンツを読み上げるべきで、直ちにユーザーの注意を引く必要があるため、静的コンテンツに使用したり、定期的に使用したりするべきではありません。 アラートは、定義上、破壊的です。 一度にたくさんのアラートがある場合や、不必要なアラートがある場合、悪いユーザーエクスペリエンスをもたらします。</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","#alert","Alert")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#alert","Alert")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">ARIA: alertdialog ロール</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/aria-alert-support/">ARIA alert support - The Paciello Group</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA ライブリージョン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role">alert ロールの使用</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/application_role/index.html b/files/ja/web/accessibility/aria/roles/application_role/index.html new file mode 100644 index 0000000000..151333eb49 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/application_role/index.html @@ -0,0 +1,108 @@ +--- +title: 'ARIA: application ロール' +slug: Web/Accessibility/ARIA/Roles/Application_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Application_Role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>application</code> ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈テクニックを使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。</span></p> + +<pre class="brush: html"><div role="application">...</div> +</pre> + +<p>これは、デスクトップアプリケーションの一部であるように、この <code><div></code> 要素とその全ての子孫を処理することを定義します。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>application</code> ロールは、支援技術に対して、ウェブコンテンツのこの部分に、他の既知の HTML 要素や WAI-ARIA ウィジェットに適合しない要素が含まれていることを示します。 HTML 構造やウィジェットの特別な解釈は一切中止し、マウスやキーボード、タッチのインタラクションを扱うためには、コントロールをブラウザーやウェブアプリケーション（web application）に完全に渡すべきです。</p> + +<p>このモードでは、ウェブ作成者は、キーボード入力、フォーカス管理、その他のインタラクションを全て処理する責任があり、支援技術が最終的に何らかの処理を行うとは想定できません。</p> + +<p><code>application</code> ロールに包まれるウェブアプリケーションに、通常のウェブコンテンツと同様に扱われるべき部分が含まれている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></code> ロールや <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールを使用するべきです。</p> + +<h3 id="Background" name="Background">背景</h3> + +<p>歴史的な理由で、特に Windows 上では、スクリーンリーダーやその他の支援技術（AT）は、従来、読み込みが完了した後に、ブラウザーからウェブコンテンツ全体を一度に取得していました。 AT は、視覚障害者がコンテンツを消費するのに最も合理的な表現を独自に構築します。 これは、仮想ドキュメント、ブラウズモード、または類似の用語で呼ばれることがよくあります。 ドキュメントは単一列のビューに合理化されます。 キーボードインタラクションモデルが生成され、これはワードプロセッサにとても似ていて、このモデルでは、行単位、文単位、段落単位で読むことができます。 AT は、リンク、見出し、フォームコントロール、テーブル、リスト、画像のような任意の意味論を読みます。</p> + +<p>さらに、長年にわたり、いわゆるクイックナビゲーションキーのセットが確立されているため、視覚障害者は特定の要素タイプを介してページを見ることができます。 このような要素には、通常、見出し、フォームフィールド、リスト、テーブル、リンク、グラフィック、ランドマークリージョンが含まれます。</p> + +<p>この全てがうまくいくためには、AT はほぼ全てのキーボード入力を遮り、それを消費し、ブラウザーや他のユーザエージェントに何も送られないようにします。 ウェブページとインタラクションできるように、特定のキー（通常は <kbd>Enter</kbd> キー）を押すと、このモードはオフになり、標準的なウィジェットのセットが認識されます。 フォームモードやフォーカスモードとも呼ばれるスクリーンリーダーモードでは、全てのキーボード入力がブラウザーに再び送られます。 <kbd>Esc</kbd> キーはブラウズモードに切り替える最も一般的な方法です。</p> + +<p><code>application</code> ロールは、ウェブコンテンツとインタラクションするためにブラウズモードとフォーカスモードの両方を使用する AT において、直接的なインタラクションでアクセス可能な標準的なセットの一部ではないウィジェットのための手段を提供するように設計されています。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></dt> + <dd>通常のウェブコンテンツとして扱われるべきアプリケーションの部分を示すために使用します。</dd> + <dt>aria-activedescendant</dt> + <dd>アプリケーション内でのフォーカスの管理に使用します。</dd> + <dt>aria-label</dt> + <dd>公開されているアプリケーションの名前やウィジェットの目的を提供するために使用します。</dd> + <dt>aria-describedby</dt> + <dd>この要素をナビゲートまたは操作するための追加の説明書を含む要素の <code>id</code> 参照を示すのに使用します。</dd> + <dt>aria-roledescription</dt> + <dd>スクリーンリーダーが話すために、アプリケーションにもっと説明的なロールのテキストを与えるために使用します。 これはローカライズするべきです。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>キーボードインタラクションは、完全にウェブ制作者のコントロール下にあり、実装されている特定のウィジェットに関連するものでもかまいません。 例えば、スライドアプリケーションでは、矢印キーを使用してスライド上の要素を配置し、ARIA のライブリージョンを介して音声によるフィードバックを使用して位置や他のオブジェクトとのオーバーラップの状態を伝えるウィジェットを作成できます。 フォーカスは、<code>aria-activedescendant</code> によって管理します。</p> + +<p><kbd>Tab</kbd> キー、<kbd>スペース</kbd>キー、<kbd>Enter</kbd> キー、および <kbd>Esc</kbd> キーは、アプリケーションで処理する必要があります。 1つの例外は、フォーカスが、ブラウザーからのキーボードナビゲーションをサポートするアプリケーション内の標準ウィジェット（例えば {{htmlelement("input")}} 要素）に設定されている場合です。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>keyPress</dt> + <dd>キーボード入力の処理とフォーカスの制御に使用する。</dd> + <dt>Click, Touch</dt> + <dd>あなたのウィジェットにも適切に対処してください。</dd> + <dt>Changing attribute values</dt> + <dd><code>aria-activedescendant</code> は、アプリケーションコンテナ内のフォーカスを管理するために使用されます。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。</dd> +</dl> + +<div class="note"> +<p><code>application</code> ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分で通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください！</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>application</code> ロールを適切に使用するいくつかの有名なウェブアプリケーションは次のとおりです。</p> + +<ul> + <li>グーグルの Docs、Sheets、Slides</li> + <li>CKEditor と TinyMCE の WYSIWYG ウェブエディタは、Mozilla Developer Network で使用されているようなものです。</li> + <li>Gmail の一部（訳注：<a href="https://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">グーグルから使っていないという情報あり</a>）</li> +</ul> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>application</code> ロールを不適切に使用すると、意図せずにウェブページの情報からのアクセスを奪う可能性があるので、使用には十分注意してください。 あなたが実際にそれを必要とし、他の既知のウィジェットのセットを使うことができない場合に、真剣に考えます。 使用する場合は、<code>application</code> ロールは、例えば <code><body></code> 要素ではなく、可能な最も低い共通コンテナに追加するべきです。</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","#application","application")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p><code>application</code> ロールを適用すると、この要素の全ての子孫要素がウェブコンテンツではなくアプリケーションコンテンツのように扱われます。 支援技術がウェブコンテンツに与えるであろう読み上げメカニズムは適用されません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.marcozehe.de/2012/02/06/if-you-use-the-wai-aria-role-application-please-do-so-wisely/">WAI-ARIA のロール "application" を使用する場合は、賢明にしてください</a> — Marco Zehe のブログ記事（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/article_role/index.html b/files/ja/web/accessibility/aria/roles/article_role/index.html new file mode 100644 index 0000000000..9381ee3b24 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/article_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: article ロール' +slug: Web/Accessibility/ARIA/Roles/Article_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Article_Role +--- +<p class="summary">\{{ariaref}}<span class="seoSummary"><code>article</code> ロールは、ページ、ドキュメント、またはウェブサイト上で容易に自立することができるページのセクションを示します。 これは、通常、コメント、フォーラム投稿、新聞記事、または1ページにまとめられたその他項目などの関連コンテンツの項目に設定します。</span></p> + +<pre class="brush: html"><div role="article"> +<h2>この断片の見出し</h2> +<p>この断片の段落。</p> +<p>別の段落。</p> +... 記事とインタラクションしたり、共有したり等するためのコントロール ... +</div> +<div role="article"> ... </div> +</pre> + +<p>この例では、1ページに2つの記事を並べて表示しています。 これらは同じように構成でき、関連しています。</p> + +<div class="note"> +<p><code>article</code> ロールを持つ <code><div></code> ではなく、<code><article></code> 要素を使用します。 利用可能な場合は、いつでもネイティブの要素を使用します。</p> +</div> + +<p><code>role="article"</code> を使用する代わりに、{{htmlelement("article")}} 要素を使用することができます。</p> + +<pre class="brush: html"><article> +<h2>この断片の見出し</h2> +<p>この断片の段落。</p> +<p>別の段落。</p> +... 記事とインタラクションしたり、共有したり等するためのコントロール ... +</article> +<article> ... </article> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>article</code> ロールは、ドキュメント、ページ、サイトのセクションを表し、それが単独で存在する場合は、完全なドキュメント、ページ、サイトとして見ることができます。 一連の記事（article）セクションの目的は、互いの関係を示すことです。</p> + +<p>記事は、ナビゲーションに関するランドマークとは見なされませんが、ランドマークをサポートする多くの支援技術は、記事間をナビゲートする手段をサポートします。 また、記事内のネスト関係の表示をサポートすることもあります。</p> + +<p>記事をネストすることができ、ネストされた記事は、それをネストしているものと直接関係しますが、必ずしもネスト階層の外側にあるものとは限りません。 具体的な使用事例については、例を参照してください。</p> + +<p>記事がフィード（feed）の一部である場合、<code>aria-posinset</code> 属性および <code>aria-setsize</code> 属性を設定して、この特定の記事が表すフィード内の位置を示すことができます。</p> + +<p>スクリーンリーダーやその他の支援技術がパススルーモードになるような <code>application</code> やその他のウィジェット内では、記事を使用して、囲んだコンテンツを通常のウェブコンテンツとして扱うように切り替えるべきであることを示すことができます。</p> + +<p>意味論のない要素に <code>article</code> ロールを含める代わりに、{{htmlelement("article")}} 要素を使用するべきです。 ユーザーエージェントは、これを <code>article</code> ロールのような適切なアクセシビリティ情報に変換します。 <code><article></code> 要素を使用すると、検索エンジンがページの構造をよりよく検出できるようになります。 <code>role="article"</code>、または好ましくは <code><article></code> の適切な使用例には、ブログ投稿、フォーラム投稿、フォーラムまたはブログ投稿へのコメント、フォーラムまたはブログ投稿へのコメントへのコメント、ソーシャルメディアフィード内の項目等が含まれます。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-posinset</dt> + <dd>フィードのコンテキストでは、1から始まるカウントに基づいて、そのフィード内のこの特定の記事の位置を示します。</dd> + <dt>aria-setsize</dt> + <dd>フィードのコンテキストでは、そのフィード内にいくつの記事の項目があるかを示します。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>このロールは、具体的なキーボードインタラクションをサポートしていません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>イベントハンドラ</dt> + <dd>このロールでは、イベントハンドラは必要ありません。</dd> + <dt>属性値の変更</dt> + <dd>フィードを作成するときは、各 <code>article</code> ロールの <code>aria-posinset</code> 属性と <code>aria-setsize</code> 属性を適切な値に設定します。 <code>aria-posinset</code> は、1ベースであることに注意してください。</dd> +</dl> + +<div class="note"> +<p>常にネイティブの要素を使用してください。 <code>article</code> ロールを持つ <code><div></code> ではなく、{{htmlelement("article")}} 要素を使用するべきです。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li>WAI-ARIA Authoring Practices 1.1 の feed のデザインパターンから、<a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/feed/feedDisplay.html">レストランの推奨フィード表示</a>とそれと分けられた<a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/feed/feed.html">ドキュメント</a></li> +</ul> + +<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","#article","article")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#feed","feed")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p>このロールは、HTML の {{htmlelement("article")}} 要素に対応し、可能な場合はその要素を代わりに使用するべきでます。 このロールは、その子の間に具体的なロールが存在する必要はありません。 これは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role">feed</a></code> ロールを持つ要素の直接の子として許可される唯一のロールです。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Feed_Role">feed ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Section_Role">section ロール</a></li> + <li>{{htmlelement("article")}} 要素</li> + <li><a href="/ja/docs/Web/RSS/Article">RSS の Article</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/banner_role/index.html b/files/ja/web/accessibility/aria/roles/banner_role/index.html new file mode 100644 index 0000000000..156371cecc --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/banner_role/index.html @@ -0,0 +1,97 @@ +--- +title: 'ARIA: banner ロール' +slug: Web/Accessibility/ARIA/Roles/Banner_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Banner_role +--- +<p class="summary">\{{ariaref}} <span class="seoSummary"><code>banner</code> ロールは、ページの先頭に頻繁に配置される一般的で有益なコンテンツを表します。 これには、通常、ロゴ、会社名、検索アイコン、ページに関連する写真、またはスローガンが含まれます。 </span></p> + +<pre class="brush: html"><div role="banner"> + <img src="companylogo.svg" alt="会社名"> + <h1>タイトル<h1> + <h2>サブタイトル</h2> +</div></pre> + +<p>HTML5 の {{htmlelement("header")}} 要素は、{{htmlelement("aside")}}、{{htmlelement("article")}}、{{htmlelement("main")}}、{{htmlelement("nav")}}、または {{htmlelement("section")}} の子孫でない限り、<code>banner</code> ランドマークと同じ意味を持ちます。</p> + +<ul> +</ul> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>banner</code> ランドマークロールは、それが適用されたコンテナ要素をヘッダーに変換します。 これは、一般的に全ページ上部にあるサイト全体共通のサイトヘッダーのコンテンツ用に予約されているべきです。</p> + +<p>バナー（banner）には、通常ロゴやコーポレートアイデンティティ、おそらくサイト固有の検索ツールが含まれており、一般的にマーケティングチームがサイトのヘッダーやトップバナーと呼ぶものです。 {{htmlelement("header")}} 要素技術がそのバナーで使用されていない場合は、支援技術に対して <code>banner</code> ランドマーク（landmark）を定義するために、<code>role="banner"</code> の宣言を使用するべきです。</p> + +<p>支援技術は、{{htmlelement("body")}} 要素の子孫であり、<code><article></code>、<code><aside></code>、<code><main></code>、<code><nav></code> または <code><section></code> サブセクション内にネストされていない場合、バナーとしてページのメイン <code><header></code> 要素を識別できます。</p> + +<p>各ページに <code>banner</code> ランドマークを持っていてもかまいませんが、各ページは <code>banner</code> ロールを持つ1つの <code><header></code> に限定するべきです。 ネストされた <code>document</code> ロールおよび/または <code>application</code> ロールを含むページの場合、ネストされたそれぞれの <code>document</code> ロールや <code>application</code> ロールは、1つの <code>banner</code> ランドマークを持っていてもかまいません。 ページに複数の <code>banner</code> ランドマークが含まれている場合は、それぞれに固有のラベルを付けるべきです。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<p>無し</p> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ここでは、ナビゲーションへ飛ぶリンク、ロゴ、タイトル、サブタイトルを含む簡単なバナーがあります。 これがサイトのメインヘッダーであるため、<code>banner</code> ランドマークロールをコンテナ要素に追加しました。</p> + +<pre class="brush: html"><div role="banner"> + <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a> + <img src="images/w3c.png" alt="W3C ロゴ"> + <h1>ARIA ランドマーク</h1> + <p>容易なナビゲーションのためのページのサブセクションの特定</p> +</div></pre> + +<p>また、上記の HTML の <code><header></code> 要素で記述することもできます。</p> + +<pre class="brush: html"><header> + <a href="#nav" id="skipToMenu" class="skiptocontent">キーボードナビゲーションへ飛ぶ</a> + <img src="images/w3c.png" alt="W3C ロゴ"> + <h1>ARIA ランドマーク</h1> + <p>容易なナビゲーションのためのページのサブセクションの特定</p> +</header></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p><code><header></code> 要素を使用して、ページの任意のサブセクションの子孫でないことを保証するのが最善ですが、場合によっては基になる HTML にアクセスできません。 この場合、JavaScript を使用してページのメインヘッダーに <code>banner</code> ロールを追加できます。 この方法でページのバナーを特定すると、サイトのアクセシビリティが向上します。</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","#banner","ARIA: banner role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_banner","Banner landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("header")}} 要素</li> + <li><a href="https://w3c.github.io/aria-practices/examples/landmarks/banner.html">WC3 Landmarks Example</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/cell_role/index.html b/files/ja/web/accessibility/aria/roles/cell_role/index.html new file mode 100644 index 0000000000..05813316b2 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/cell_role/index.html @@ -0,0 +1,199 @@ +--- +title: 'ARIA: cell ロール' +slug: Web/Accessibility/ARIA/Roles/Cell_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Cell_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>role</code> 属性の <code>cell</code> 値は、要素を列ヘッダーや行ヘッダーの情報を含まない表形式コンテナ内のセルとして識別します。 サポートされるには、セルが <code>row</code> ロールを持つ要素内にネストされている必要があります。</p> + +<pre class="brush: html"><div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> +</div> +</pre> + +<p>上のセルの書き方より良い、より意味のある方法は、意味論的な <code><td></code> 要素を使うことでしょう。</p> + +<pre class="brush: html"><tr role="row"> + <td role="cell">フランス</td> + <td role="cell">6700 万</td> +</tr> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="cell"</code> を持つ要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の、<code>row</code> 内のセル（オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内のセル）であり、静的な表形式の構造内にあります。 可能であれば、ネイティブな <a href="/ja/docs/Web/HTML/Element/td">HTML <code><td></code></a> 要素を使用することを強く推奨します。</p> + +<p><code>role="row"</code> を持つコンテナ要素内に、<code>role="cell"</code> を持つ各要素をネストしなければなりません（MUST）。 この行（<code>row</code>）は、<code>role="rowgroup"</code> を持つ要素内にネストすることができ、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内にネストするべきです。 セルに列ヘッダーまたは行ヘッダーの情報が含まれている場合は、それぞれ <code>colheader</code> ロールや <code>rowheader</code> ロールを使用します。 セルにヘッダー情報が含まれておらず、<code>grid</code> や <code>treegrid</code> にネストされている場合、<code>gridcell</code> ロールがより適切な場合があります。</p> + +<p>セルには、<code>aria-colindex</code>、<code>aria-colspan</code>、<code>aria-rowindex</code>、<code>aria-rowspan</code> など、表形式データ構造内のセルの位置を明確にする多数のプロパティ属性を含めることができます。</p> + +<div class="note"> +<p>可能であれば、ネイティブな HTML 表要素（<code><table></code>）を、表の行要素（<code><tr></code>）および表のセル要素（<code><td></code>）と共に使用することを強く推奨します。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd><code>role="row"</code> の要素は、表形式の構造内のセルの行です。 行には、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内において1つ以上のセル、グリッドセル、列ヘッダー、行ヘッダーが含まれます。 オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内にも含まれます。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>行はセルの親として必須です。 行グループ（<code>rowgroup</code>）は、オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の <code>thead</code>、<code>tfoot</code>、<code>tbody</code> 要素と構造的に同等です。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd><code>grid</code> と <code>treegrid</code> と共に3つの可能なコンテキストのうちの1つで、セルを含む行が見つかります。 表（<code>table</code>）は、セルを、ネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部として識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd><code>table</code> と <code>treegrid</code> と共に3つの可能なコンテキストのうちの1つで、セルとグリッドセル（<code>gridcell</code>）を含む行が見つかります。 グリッド（<code>grid</code>）は、セルを、ネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む対話型の可能性のある表構造の一部として識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridtree_Role">role="treegrid"</a></dt> + <dd><code>grid</code> に似ていますが、<code>tree</code> と同じ方法で展開や折りたたみができる行があります。</dd> +</dl> + +<h4 id="Subclass_Roles" name="Subclass_Roles">サブクラスロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></dt> + <dd><code>grid</code> や <code>treegrid</code> 内の行内のセル。</dd> + <dt>role="columnheader"</dt> + <dd>列スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>columnheader</code> ロールは、対応する列の全てのセルとの関係を確立します。</dd> + <dt>role="rowheader"</dt> + <dd>行スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>rowheader</code> ロールは、対応する行の全てのセルとの関係を確立します。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-colspan 属性</dt> + <dd>HTML の <code><th></code> と <a href="/ja/docs/Web/HTML/Element/td"><code><td></code> 要素の <code>colspan</code> 属性</a>と同様に、セルにまたがる列数を定義します。</dd> + <dt>aria-rowspan 属性</dt> + <dd>HTML の <code><th></code> と <a href="/ja/docs/Web/HTML/Element/td"><code><td></code> 要素の <code>rowspan</code> 属性</a>と同様に、セルにまたがる行数を定義します。</dd> + <dt>aria-colindex 属性</dt> + <dd> + <p><code>aria-colindex</code> 属性は、列が DOM から隠されている場合にのみ必要です。 この属性は、値として 1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行内の全列数に対する要素の列インデックスまたは位置を定義します。 全ての列が DOM 内にある場合、この属性は必要ありません。</p> + </dd> + <dt>aria-rowindex 属性</dt> + <dd> + <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要です。 現在のセルが入っている全行のリストの行を示します。 この属性は、値として 1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全行数の間の整数をとり、セルの位置またはインデックスを示します。 たとえば、最初のヘッダーの最初の行のセルは <code>aria-rowindex="1"</code> と設定され、47 行目のセルは、DOM 内に全ての行が存在しないために <code>aria-rowindex</code> が必要な場合は、<code>aria-rowindex="47"</code> となるでしょう。 表示されている行が連続していて、<code>colspan</code> や <code>rowspan</code> が 1 より大きいセルがない場合、このプロパティは行の全てのセルの代わりに親の行に追加できます。</p> + + <p> </p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の <code>cell</code> ロールの代わりに HTML の <code><td></code> 要素を使用してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none" aria-rowindex="1">ARIA のロール</span> + <span role="columnheader" aria-sort="none" aria-rowindex="1">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell" aria-rowindex="11">header</span> + <span role="cell" aria-rowindex="11">h1</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="16">header</span> + <span role="cell" aria-rowindex="16">h6</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="18">rowgroup</span> + <span role="cell" aria-rowindex="18">thead</span> + </div> + <div role="row"> + <span role="cell" aria-rowindex="24">term</span> + <span role="cell" aria-rowindex="24">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 全ての行が DOM 内にあるわけではないので、全てのセルに <code>aria-rowindex</code> プロパティを追加しました。 複数の行や列にまたがるセルがない場合、<code>aria-rowindex</code> は行の個々のセルではなく行に配置されている可能性があります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、<code>table</code>、<code>tbody</code>、<code>thead</code>、<code>tr</code>、<code>th</code>、<code>td</code> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display: grid など、CSS の display プロパティ</a>によって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA のロール</th> + <th role="columnheader" aria-sort="none" aria-rowindex="1">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <td role="cell" aria-rowindex="11">header</td> + <td role="cell" aria-rowindex="11">h1</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="16">header</td> + <td role="cell" aria-rowindex="16">h6</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="18">rowgroup</td> + <td role="cell" aria-rowindex="18">thead</td> + </tr> + <tr role="row"> + <td role="cell" aria-rowindex="24">term</td> + <td role="cell" aria-rowindex="24">dt</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 表のネイティブな意味論の場合、ARIA のロールは必要ありません。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display プロパティ</a>などで表の行は変更されていません。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</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","#cell","ARIA Cell Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#cell","ARIA Cell Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">role="rowheader"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Colheader_Role">role="colheader"</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></li> + <li><a href="/ja/docs/Web/HTML/Element/td">HTML <td> 要素</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/th">HTML <th> 要素</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/complementary_role/index.html b/files/ja/web/accessibility/aria/roles/complementary_role/index.html new file mode 100644 index 0000000000..ff7fe74363 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/complementary_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: complementary ロール' +slug: Web/Accessibility/ARIA/Roles/Complementary_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Complementary_role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>complementary</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、メインコンテンツに関連する補助セクションを指定するために使用され、しかも分離しても単独で成り立つことができます。 これらのセクションは、サイドバーやコールアウトボックスとして表示されることがよくあります。 可能であれば、代わりに HTML の {{htmlelement("aside")}} 要素を使用してください。</span></p> + +<pre class="brush: html"><div role="complementary"> + <h2>私たちのパートナー</h2> + <!-- 補完的なセクションのコンテンツ --> +</div> +</pre> + +<p>これはイベントのスポンサーへのリンクを含むサイドバーです。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>complementary</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマーク（landmark）は、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>complementary</code> ランドマークロールを持つコンテナ内にリストされたコンテンツは、文書のメインのコンテンツから分離されている場合でも意味をなすべきです。</p> + +<div class="note"> +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="complementary"> + <h2>トレンド記事</h2> + <ul> + <li><a href="#">あなたがすべての気分を感じさせる18のツイート</a></li> + <li><a href="#">私は完璧な昼食用の容器を見つけたので、それを探すのを停止する</a></li> + <li><a href="#">最終的に私たちがこれらの食品と呼ぶべきものを決定する時が来た</a></li> + <li><a href="#">Tumblr で今週見た17の本当に良い投稿</a></li> + <li><a href="#">10の親のハック、私たちはそれらを試したので、働くことを知っている</a></li> + </ul> + </div> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("aside")}} 要素を使用すると、自動的にセクションが <code>complementary</code> ロールを持つことを伝えます。 可能であれば、それを代わりに使用することをお勧めします。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>complementary</code> ランドマークロールや {{htmlelement("aside")}} 要素がある場合は、各ランドマークに <code>aria-label</code> 属性を使用してラベルを付けるか、それらに適切な説明的なタイトルがある場合は、<code>aria-labelledby</code> 属性を使用してそれを指してください。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解できるようになります。</p> + +<pre class="brush: html"><aside aria-label="使用上の注意"> + <!-- コンテンツ --> +</aside> + +... + +<aside id="sidebar" aria-label="スポンサー"> + <!-- コンテンツ --> +</aside> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、 <code>aria-label="サイドバー"</code> の <code>role="complementary"</code> の宣言は、"complementary サイドバー" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーはドキュメントの大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#complementary","ARIA: Complementary role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_complementary","Complementary landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("aside")}}: 余談要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#complementary">complementary (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="http://html5doctor.com/aside-revisited/">Aside Revisited | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html b/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html new file mode 100644 index 0000000000..3f61014940 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/contentinfo_role/index.html @@ -0,0 +1,147 @@ +--- +title: 'ARIA: contentinfo ロール' +slug: Web/Accessibility/ARIA/Roles/Contentinfo_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Contentinfo_role +--- +<div>\{{ariaref}}</div> + +<p><code>contentinfo</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、著作権情報、ナビゲーションリンク、プライバシーステートメントなど、ウェブサイトの各ページの最後に繰り返される情報を識別するために使用されます。 このセクションは一般的にフッターと呼ばれます。</p> + +<pre class="brush: html"><div role="contentinfo"> + <h2>フッター</h2> + <!-- フッターのコンテンツ --> +</div> +</pre> + +<p>これはウェブサイトのフッターです。 代わりに {{htmlelement("footer")}} 要素を使用することをお勧めします。</p> + +<pre class="brush: html"><footer> + <h2>フッター</h2> + <!-- フッターのコンテンツ --> +</footer> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>contentinfo</code> ロールは、ページフッターを識別するための<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページには、1ページあたり1つのトップレベルの <code>contentinfo</code> ランドマークロールのみが含まれているべきです。</p> + +<p>各ページには、{{htmlelement("footer")}} 要素を使用するか、または <code>role="contentinfo"</code> を宣言することによって作成された <code>contentinfo</code> ランドマークが1つだけ含まれているべきです。 {{htmlelement("iframe")}} 要素を介して埋め込まれたコンテンツに存在する <code>contentinfo</code> ランドマークは、この制限に含まれません。</p> + +<div class="note"> +<p>{{htmlelement("footer")}} 要素を使用すると、自動的にセクションに <code>contentinfo</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題をテスト</a>してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><body> + + </span><!-- 他のページのコンテンツ --> + +<span class="tag"> <div role="contentinfo"> + <h2>MDN Web Docs</h2> + <ul> + <li><a href="#"></span>ウェブ技術<span class="tag"></a></li> + <li><a href="#"></span>ウェブ開発について学ぶ<span class="tag"></a></li> + <li><a href="#"></span>MDN について<span class="tag"></a></li> + <li><a href="#"></span>フィードバック<span class="tag"></a></li> + </ul> + <p></span>© 2005-2018 Mozilla および各貢献者 コンテンツは <a href="#">これらのライセンス</a> の下で公開されています。<span class="tag"></p></span> +<span class="tag"> </div> +</body></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<h3 id="Use_sparingly" name="Use_sparingly">控えめに使用する</h3> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h3 id="One_contentinfo_landmark_per_page" name="One_contentinfo_landmark_per_page">ページあたり1つの <code>contentinfo</code> ランドマーク</h3> + +<h4 id="The_<body>_element" name="The_<body>_element"><code><body></code> 要素</h4> + +<p>{{htmlelement("body")}} 要素の直接の子孫として使用される文書ごとに1つの <code>contentinfo</code> ランドマークが存在するべきです。</p> + +<h4 id="Mega-footers" name="Mega-footers">メガフッター</h4> + +<p>文書のフッターの中に追加の {{htmlelement("footer")}} 要素や <code>contentinfo</code> ランドマークを入れ子にしないでください。 代わりに、他の<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>を使用してください。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>contentinfo</code> ランドマークロールや {{htmlelement("footer")}} 要素がある場合は、各ランドマークの <code>aria-label</code> 属性でラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><body> + + ... + + <article> + <h2>毎日パッタイ</h2> + <!-- 記事のコンテンツ --> + <footer aria-label="毎日パッタイのメタデータ"> + <p><a href="#">リサ</a>によって<time datetime="2018-09-23 12:17">5月16日</time>に投稿されました。</p> + </footer> + </article> + + ... + + <footer aria-label="フッター"> + <!-- フッターのコンテンツ --> + </footer> +</body></pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="フッター"</code> の <code>role="contentinfo"</code> の宣言は、"contentinfo フッター" として重複してアナウンスすることができます。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("body")}} 要素の直接の子孫である場合、{{htmlelement("footer")}} 要素を使用すると、自動的にセクションが <code>contentinfo</code> ロールを持つことを伝えます（VoiceOver の<a href="/ja/docs/Web/HTML/Element/footer#Accessibility_concerns">既知の問題</a>は別として）。 可能であれば、代わりに <code><footer></code> を使用することをお勧めします。 <code><article></code>、<code><aside></code>、<code><main></code>、<code><nav></code>、<code><section></code> 内にネストされた <code><footer></code> 要素は、<code>contentinfo</code> とはみなされないことに注意してください。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#contentinfo","contentinfo landmark role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_contentinfo","contentinfo landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("footer")}}: フッター要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#contentinfo">contentinfo (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="http://html5doctor.com/the-footer-element-update/">The Footer Element Update | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/dialog_role/index.html b/files/ja/web/accessibility/aria/roles/dialog_role/index.html new file mode 100644 index 0000000000..283e1d5042 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/dialog_role/index.html @@ -0,0 +1,166 @@ +--- +title: 'ARIA: dialog ロール' +slug: Web/Accessibility/ARIA/Roles/dialog_role +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> ロールは、ウェブアプリケーションまたはウェブページの他の部分からコンテンツまたは UI を分離する HTML ベースのアプリケーションのダイアログまたはウィンドウをマークアップするために使用されます。 ダイアログは、通常、オーバーレイを使用してページコンテンツの残りの部分の上に配置されます。 ダイアログは非モーダル（ダイアログの外のコンテンツとやりとりすることは可能です）またはモーダル（ダイアログ内のコンテンツのみがやり取りできる）のいずれかになります。</span></p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2> + <p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p> + <button>閉じる</button> +</div></pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>ダイアログの要素を <code>dialog</code> ロールと共にマークアップすると、支援技術がダイアログのコンテンツをグループ化し、ページのコンテンツの他の部分から分離されたものとして識別するのに役立ちます。 ただし、<code>role="dialog"</code> だけを追加するだけでは、ダイアログをアクセス可能にするには不十分です。 さらに、次のことを行う必要があります。</p> + +<ul> + <li>ダイアログには適切なラベルを付ける必要があります。</li> + <li>キーボードのフォーカスを正しく管理する必要があります。</li> +</ul> + +<p>以下のセクションでは、これら2つの要件がどのように満たされるかについて説明します。</p> + +<h4 id="Labeling" name="Labeling">ラベリング</h4> + +<p>ダイアログ自体がフォーカスを受け取れる必要はありませんが、それでもラベルを付ける必要があります。 ダイアログに与えられたラベルは、ダイアログ内のインタラクティブコントロールのコンテキスト情報を提供します。 つまり、ダイアログのラベルは、その内部のコントロールのグループラベルのように動作します（<code><legend></code> 要素が <code><fieldset></code> 要素内のコントロールのグループラベルを提供する方法と同様です）。</p> + +<p>ダイアログにすでに表示されているタイトルバーがある場合、そのバーの中のテキストを使用してダイアログ自体にラベルを付けることができます。 これを達成する最善の方法は、<code>role="dialog"</code> 要素に <code>aria-labelledby</code> 属性を使用することです。 さらに、ダイアログにダイアログタイトルの他に説明的なテキストが含まれている場合、このテキストは <code>aria-describedby</code> 属性を使用してダイアログに関連付けることができます。 このアプローチは、次のコードスニペットに示されています。</p> + +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> + <h2 <strong>id="dialog1Title"</strong>>あなたの個人情報が更新されました</h2> + <p <strong>id="dialog1Desc"</strong>>詳細は、ユーザーアカウントのセクションでいつでも変更できます。</p> + <button>閉じる</button> +</div></pre> + +<p> </p> + +<div class="note">非仮想モードで動作するスクリーンリーダーが知覚するためには、ダイアログのタイトルと説明のテキストにフォーカスを合わせる必要はありません。 ARIA の dialog ロールとラベリング手法を組み合わせることで、スクリーンリーダーは、フォーカスがダイアログへ移動したときにダイアログの情報をアナウンスするべきです。</div> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p> </p> + +<h4 id="Focus_management" name="Focus_management">フォーカス管理 </h4> + +<p>ダイアログには、キーボードフォーカスをどのように管理するべきかについての特定の要件があります。</p> + +<ul> + <li>ダイアログには常に少なくとも1つのフォーカス可能なコントロールを持つべきです。 多くのダイアログでは、[閉じる]、[OK]、[キャンセル]などのボタンがあります。 必要なコントロールに加えて、ダイアログには、フォーム全体やタブのような他のコンテナウィジェットも含め、任意の数のフォーカス可能な要素を含めることができます。</li> + <li>ダイアログが画面に表示されたら、キーボードのフォーカス（その制御はダイアログの目的に依存する）を、ダイアログ内のデフォルトのフォーカス可能なコントロールに移動するべきです。 基本的なメッセージのみを提供するダイアログでは、[OK] ボタンになります。 フォームを含むダイアログでは、フォームの最初のフィールドになります。</li> + <li>ダイアログが閉じられた後、キーボードフォーカスは、ダイアログに移動する前の位置に戻すべきです。 それ以外の場合は、フォーカスをページの先頭にドロップすることができます。</li> + <li>ほとんどのダイアログでは、ダイアログのタブ順序がラップすることが予想されます。 つまり、ユーザーがダイアログ内のフォーカス可能な要素をタブで移動すると、最後のものに達した後、最初のフォーカス可能な要素にフォーカスが移ります。 言い換えれば、タブ順序は、ダイアログ内に含まれている必要があります。</li> + <li>ダイアログを移動またはサイズ変更できる場合は、マウスユーザーだけでなくキーボードユーザーもこれらの操作を実行できる必要があります。 同様に、ダイアログがツールバーやコンテキストメニューのような特別な機能を提供する場合、これらはキーボードユーザーが到達可能で操作可能でなければなりません。</li> + <li>ダイアログはモーダルでも非モーダルでもよい。 モーダルダイアログが画面に表示されると、ダイアログの外にあるページコンテンツと対話することはできません。 つまり、モーダルダイアログが表示されている限り、メインアプリケーションの UI またはページコンテンツは一時的に無効になっているとみなされます。 非モーダルダイアログの場合、ダイアログが表示されている間もダイアログの外のコンテンツと対話することは可能です。 非モーダルダイアログでは、開いているダイアログとメインページの間でフォーカスを移動できるグローバルなキーボードショートカットが必要です。 詳細については、<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Guides/Managing_Modal_and_Non_Modal_Dialogs">モーダルおよび非モーダルダイアログの管理</a>ガイドを参照してください。</li> +</ul> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code><span class="highlight-span">aria-labelledby</span></code></dt> + <dd>ダイアログにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labelledby</code> 属性の値は、ダイアログのタイトルに使用される要素の ID になります。</dd> + <dt><code>aria-describedby</code></dt> + <dd>この属性を使用して、ダイアログの内容を記述します。</dd> +</dl> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h3> + +<p><code>dialog</code> ロールが使用されるとき、ユーザーエージェントは以下を行うべきです。</p> + +<ul> + <li>オペレーティングシステムのアクセシビリティ API でダイアログとして要素を公開します。</li> +</ul> + +<p>ダイアログが正しくラベル付けされ、フォーカスがダイアログ内のコントロールに移動されると、スクリーンリーダーは、フォーカスされた要素をアナウンスする前にダイアログのアクセシブルロール、名前、および任意で説明をアナウンスするべきです。</p> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h4 id="Example_1_A_dialog_containing_a_form" name="Example_1_A_dialog_containing_a_form">例 1: フォームを含むダイアログ</h4> + +<pre class="brush: html"> <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">加入申込書</h2> + <p id="dialog1Desc">私たちは、この情報を第三者と共有することはありません。</p> + <form> + <p> + <label for="firstName">名</label> + <input id="firstName" type="text" /> + </p> + <p> + <label for="lastName">姓</label> + <input id="lastName" type="text"/> + </p> + <p> + <label for="interests">興味</label> + <textarea id="interests"></textarea> + </p> + <p> + <input type="checkbox" id="autoLogin"/> + <label for="autoLogin">自動ログイン</label> + </p> + <p> + <input type="submit" value="情報を保存する"/> + </p> + </form> + </div></pre> + +<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content" name="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">例 2: フォールバックコンテンツとしての fieldset に基づくダイアログ</h4> + +<p>ARIA マークアップをサポートしていないブラウザーや AT 製品をサポートするには、フォールバックコンテンツとして <code>fieldset</code> 要素にダイアログマークアップを適用することもできます。 このようにして、ダイアログのタイトルは正しくアナウンスされます。</p> + +<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <strong><legend></strong> + <span id="dialog1Title">あなたの個人情報が更新されました。</span> + <span id="dialog1Desc">詳細は、ユーザーアカウントのセクションでいつでも変更できます。</span> + </legend> + + <button>閉じる</button> +</fieldset></pre> + +<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> + +<ul> + <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI ダイアログ</a></li> +</ul> + +<h3 id="Notes" name="Notes">注</h3> + +<div class="note"><strong>注</strong>: キーボードユーザーがダイアログの外の要素にフォーカスを移動するのを防ぐことは可能ですが、スクリーンリーダーの仮想カーソルを使用するためにスクリーンリーダーのユーザーは仮想的にそのコンテンツをナビゲートすることができます。 このため、ダイアログは <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></code> ロールの特別なケースとみなされます。 非仮想ナビゲーションモードでは、スクリーンリーダーのユーザーがナビゲートすることが予想されます。</div> + +<ul> +</ul> + +<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","#dialog","dialog")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>近日公開</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Alertdiialog_Role">ARIA: alertdialog ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">alertdialog ロールの使用</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/document_role/index.html b/files/ja/web/accessibility/aria/roles/document_role/index.html new file mode 100644 index 0000000000..eb69ada642 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/document_role/index.html @@ -0,0 +1,94 @@ +--- +title: 'ARIA: document ロール' +slug: Web/Accessibility/ARIA/Roles/Document_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Document_Role +--- +<p>\{{ariaref}}<span class="seoSummary">複雑な複合<a href="/ja/docs/Web/Accessibility/ARIA/Roles/widget_Role">ウィジェット</a>や<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">アプリケーション</a>で一般的に使用される <code>document</code> ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 <code>document</code> ロールは、ドキュメントモードを使用して、この要素に含まれるコンテンツを読み取るための読み取りモードまたはブラウズモードを支援技術に指示します。</span></p> + +<pre class="brush: html"><div role="dialog"> + ... + <div id="InfoText" role="document" tabindex="0"> + <p>いくつかの情報テキストがここに入ります。</p> + </div> + ... + <button>閉じる</button> +</div> +</pre> + +<p>この例は、いくつかのコントロールと、支援技術のユーザーがタブを当てて（<kbd>Tab</kbd> キーによる移動で）読むことができる情報テキストを含むセクションを含む<a href="/ja/docs/Web/Accessibility/ARIA/Roles/diialog_Role">ダイアログ</a>ウィジェットを示しています。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>デフォルトでは、ウェブページはドキュメント（document）として扱われ、支援技術（AT）は、新しいウェブページに入るときブラウズモードまたは読み取りモードにします。 このモードは、ウィジェットロールや <code>application</code> ロールなど、さまざまなロールを通じて変更できます。 <code>document</code> ロールは、AT をブラウズモードまたは読み取りモードに戻します。</p> + +<p>一般に、<code>application</code> ロールまたは他のインタラクティブなウィジェットロール内に配置される <code>document</code> ロールは、利用可能な場合、支援技術のユーザがブラウズモードまたは仮想読み取りモードを使用して読むべきである複雑な複合ウィジェットのセクションを示すために使用します。</p> + +<p>読み取りモードの AT は、ウィジェットロールまたは <code>application</code> ロールのセットを持つ要素を除くすべての要素に対してそのモードをデフォルトとしているため、<code>document</code> ロールは、静的リッチテキストとして読むべきであるウィジェットまたはアプリケーション内のフォーカス可能な要素に対してのみ役に立ちます。 ウィジェット内のテキストを含む要素に <code>role="document"</code> と <code>tabindex="0"</code> を追加すると、スクリーンリーダーのユーザーは <kbd>Tab</kbd> キーを押してドキュメント要素にフォーカスを合わせ、スクリーンリーダーの読み取りカーソルでテキストを読み取ることができます。</p> + +<p>支援技術は、親の動的コンテキストのために再配線されたコントロールを遮り、<kbd>上矢印</kbd>または<kbd>下矢印</kbd>キーボードイベントなどの標準入力イベントを再度有効にして、読み取りカーソルを制御するために、コンテキストをドキュメントモードに戻すべきです。</p> + +<p><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code> ロールとは対照的に、<code>document</code> ロールは、<code>document</code> ロールを持つ他の要素との関係はなく、単にそれ含む複合ウィジェットとの関係を持っています。 記事（article）は関連記事を持つことができます。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-expanded</code></dt> + <dd>ドキュメント要素が折りたたみ可能である場合は、<code>true</code> または <code>false</code> の値を含み、ドキュメントが現在展開されているか折りたたまれているかを示します。 他の値には、ドキュメントが折りたたまれないことを意味するデフォルトの <code>undefined</code> が含まれます。</dd> +</dl> + +<dl> + <dt><code>tabindex="0"</code></dt> + <dd>支援技術のユーザーがそれにタブを当ててすぐに読むことができるように、それをフォーカス可能にするために使用します。</dd> +</dl> + +<p> </p> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p><code>tabindex="0"</code> 属性/値のペアを設定することで、要素をフォーカス可能にするべきです。 これにより、ユーザーはタブを当てることができ、読み取りモードが自動的に呼び出され、コンテンツをすぐに読むことができます。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>なし（任意の属性が必要とする場合を除く。 例えば、<code>document</code> が折りたたみ可能である場合、<code>aria-expanded</code> のステートと値を維持する必要があります。）</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>例えば、Gmail と1つの会話ビューがあります。 GMail はウェブアプリケーションです。 Gmail の場合、ほとんどのユーザーエージェントのインタラクションは、ほとんどの場合、アプリケーションによって奪われます。 ただし、会話の件名を含む1つの会話の開始見出しにキーボードフォーカスが設定されている場合、スクリーンリーダーのユーザーは読み取りモードのコマンドを使用してメッセージを読んだり、展開したり、折りたたんだり、彼らがどんなやり方でも操作できるようにします。 Back ボタンをアクティブにするか、関連するキーを押すことによって、フォーカスがメッセージリストに戻ると、直接アプリケーションのインタラクションモードが再度呼び出され、<kbd>矢印</kbd>キーを使用してリスト内の別の会話に移動できます。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p><code>tabindex</code> 属性に値 0 を設定することにより、<code>document</code> ロールを持つ項目がフォーカス可能であることを常に確認します。 これはタブ順にも含まれます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加の利点</h3> + +<p><code>document</code> ロールは、ユーザーが標準のスクリーンリーダーのコマンドで読むべき内容であることを明白に明示することによって、支援技術の動作を間接的に制御する簡単な方法です。</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","#document","document")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p> </p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/widget_Role">ARIA: widget ロール</a> </li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Application_Role">ARIA: application ロール</a></li> +</ul> 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> diff --git a/files/ja/web/accessibility/aria/roles/figure_role/index.html b/files/ja/web/accessibility/aria/roles/figure_role/index.html new file mode 100644 index 0000000000..f878ae0eaa --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/figure_role/index.html @@ -0,0 +1,148 @@ +--- +title: 'ARIA: figure ロール' +slug: Web/Accessibility/ARIA/Roles/Figure_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Figure_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>figure</code> ロールは、適切な意味論が存在しないページコンテンツ内の図表を識別するために使用できます。 図表は、通常、1つまたは複数の画像、コードスニペット、または情報を通常のテキストの流れとは異なる方法で配置するその他のコンテンツとみなされます。</p> + +<pre class="brush: html"><div role="figure" aria-labelledby="caption"> + <img src="image.png" + alt="画像の完全な代替説明"> + <p id="caption">図表 1: キャプション</p> +</div> +</pre> + +<p>上記の例では、画像とキャプションの2つの別々のコンテンツ項目で構成される図表があります。 これは、コンテンツを <code>role="figure"</code> を使用して図表として識別する {{htmlelement("div")}} 要素で囲まれます。</p> + +<p>図表を作成するために ARIA を使用する代わりに、{{htmlelement("figcaption")}} 要素と共に、ネイティブな意味論の HTML {{htmlelement("figure")}} 要素の使用を検討してください。 以下の{{anch("Best practices","ベストプラクティス")}}をご覧ください。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>一緒にグループ化され、図表（画像、動画、音声、コードスニペット、または他のコンテンツを含む）として消費されるべきコンテンツは、 <code>role="figure"</code> を使用して図表として識別できます。</p> + +<p>図表のコンテンツをどのように書くべきかについての鉄則はありません。 他のコンテンツと同様にアクセス可能であることを確認するべきです。 例えば、支援技術のユーザーがキーボードやマウスなどで操作できることを確認してください。</p> + +<p>図表にキャプションやラベルを追加する場合は、さまざまな方法でキャプションやラベルを追加できます。 図表を説明するコンテンツを含む要素に ID を追加し、図表上の適切な属性でその ID を参照して、次のように図表をラベルに関連付けることができます。</p> + +<pre class="brush: html"><div role="figure" aria-labelledby="figure-1"> + ... + <p id="figure-1">図表を説明するテキスト。</p> +</div></pre> + +<ul> + <li>テキストが簡潔なラベルである場合は、<code>aria-labelledby</code> を使用してください。</li> + <li>テキストがより長い説明である場合は、<code>aria-describedby</code> を使用してください。</li> +</ul> + +<p>ここでも、ARIA 無しで、HTML の {{htmlelement("figure")}} 要素と {{htmlelement("figcaption")}} 要素を使用して、意味論的に行うことができます。</p> + +<pre class="brush: html"><figure> + ... + <figcaption>図表を説明するテキスト。</figcaption> +</figure></pre> + +<ul> +</ul> + +<p>ラベルを画面に表示したくないが、支援技術のユーザーにわかりやすいラベルを提供したい場合は、図表コンテナの <code>aria-label</code> 属性を使用できます。</p> + +<pre class="brush: html"><div role="figure" aria-label="図表を説明するテキスト。"> + ... +</div></pre> + +<p><code>aria-label</code> は <code><figure></code> と一緒に使うことができます。</p> + +<pre class="brush: html"><figure aria-label="図表を説明するテキスト。"> + ... +</figure></pre> + +<p>一般的には、メインテキストから図表を参照するべきですが、図表は参照元の要素と同じ場所に表示する必要はありません。</p> + +<div class="note"> +<p><strong>注</strong>: 可能な限り、意味論的 HTML 要素を使用して図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするべきです。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-describedby</dt> + <dd>キャプションとしての参照テキストを含む要素の ID。</dd> + <dt>aria-labelledby</dt> + <dd>ラベルとしてのテキストを含む要素の ID。</dd> + <dt>aria-label</dt> + <dd>ラベルとして機能することができるテキストを含む要素がない場合は、<code>figure</code> ロールを持つ要素や <code><figure></code> 要素の <code>aria-label</code> の値として直接ラベルを追加できます。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>ロールに固有のキーボードインタラクションはありません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>ロール固有の JavaScript 要件はありません。 HTML の意味論を制御できない場合は、JavaScript でこれらのロールとプロパティを追加することで、HTML のアクセシビリティを向上させることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>aria-labelledby</code> でその ID を参照することによって、図表の説明的なラベルを提供する段落を識別するために、このページの最初の例を拡張することもできます。</p> + +<pre><div role="figure" aria-labelledby="figure-1"> + <img src="diagram.png" + alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム — + 音楽、猫、自然、そしてアイスクリーム"> + <pre><code> + let awesome = ['音楽', '猫', '自然', 'アイスクリーム']; + </code></pre> + <p id="figure-1">図表 1: 素晴らしい4つの層。</p> +</div></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>たとえば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="figure"</code> のみを使用する必要があります。</p> + +<p>可能であれば、図表とそのキャプション（{{htmlelement("figure")}} と {{htmlelement("figcaption")}}）をマークアップするために、適切な意味論の HTML 要素を使用する必要があります。 たとえば、上記の例は次のように書き直されます。</p> + +<pre class="brush: html"><figure> + <img src="diagram.png" + alt="素晴らしい4つの層と相対的な優先順位を示すダイヤグラム — + 音楽、猫、自然、そしてアイスクリーム"> + <pre><code> + let awesome = ['音楽', '猫', '自然', 'アイスクリーム']; + </code></pre> + <figcaption>図表 1: 素晴らしい4つの層。</figcaption> +</figure></pre> + +<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","#figure","figure")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><a href="/ja/docs/Web/HTML/Element/figure">HTML <figure> 要素</a></li> + <li><a href="/ja/docs/Web/HTML/Element/figcaption">HTML <figcation> 要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/form_role/index.html b/files/ja/web/accessibility/aria/roles/form_role/index.html new file mode 100644 index 0000000000..b181d1ff15 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/form_role/index.html @@ -0,0 +1,171 @@ +--- +title: 'ARIA: form ロール' +slug: Web/Accessibility/ARIA/Roles/Form_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Form_Role +--- +<div>\{{ariaref}}</div> + +<p><code>form</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、HTML のフォームと同等の機能を提供するページ上の要素のグループを識別するために使用できます。</p> + +<pre class="brush: html"><div role="form" id="contact-info" aria-label="連絡先"> + <!-- フォームのコンテンツ --> +</div> +</pre> + +<p>これは、ユーザーの連絡先を収集して保存するフォームです。</p> + +<div class="warning"> +<p><strong>重要</strong>: 本当に正当な理由がない限り、HTML の {{htmlelement("form")}} 要素を使用してフォームのコントロールを格納するべきです。</p> +</div> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>form</code> ロールは、フォーム（form）を識別するための<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>form</code> ランドマークは、他の指名されたランドマークが適切でない場合（例えば、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_Role">main</a></code> や <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Search_Role">search</a></code>）に、全体としてフォームを作成するために組み合わせるアイテムとオブジェクトのコレクションを含む領域を識別します。</p> + +<dl> + <dd> + <div class="note"> + <p>{{htmlelement("form")}} 要素を使用すると、アクセス可能な名前がある場合、自動的にセクションに <code>contentinfo</code> ロールと <code>form</code> ランドマークを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> + </div> + </dd> +</dl> + +<p>可能であれば、HTML の {{htmlelement("form")}} 要素を使用してください。 <code><form></code> 要素は、アクセス可能な名前（例えば、<code>aria-labelledby</code>、<code>aria-label</code>、または <code>title</code>）がある場合、<code>form</code> ランドマークを定義します。 ユーザーがフォームの目的を理解できるように、文書内の各フォームに固有のラベルを付けるようにしてください。 このラベルは、支援技術のユーザーだけでなく、すべてのユーザーに表示するべきです。 検索機能にフォームが使用されている場合は、<code>form</code> ランドマークの代わりに <code>search</code> ランドマークを使用します。</p> + +<p>ページの領域を特定するには、<code>role="form"</code> を使用します。 すべてのフォームのフィールドを識別するためにそれを使用しないでください。 <code><form></code> の代わりに <code>form</code> ランドマークを使用している場合でも、<code><button></code>、<code><input></code>、<code><select></code>、<code><textarea></code> などのネイティブな HTML フォームのコントロールを使用することをお勧めします。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<p>ロールに固有のステートやプロパティはありません。</p> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>ロールに固有のキーボードインタラクションはありません。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt><code>onsubmit</code></dt> + <dd>onSubmit イベントハンドラは、フォームの送信時に発生するイベントを処理します。 <code><form></code> 以外のものは送信できませんので、{{domxref("XMLHTTPRequest")}} などの代替データ送信メカニズムを構築するには、JavaScript を使用する必要があります。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><div role="form" id="send-comment" aria-label="</span>コメントを追加<span class="tag">"></span> + <label for="username">ユーザー名</label> + <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> + + <label for="email">電子メール</label> + <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> + + <label for="comment">コメント</label> + <textarea id="comment" name="comment"></textarea> + + <input value="コメント" type="submit"> +<span class="tag"></div</span>> +</pre> + +<p>代わりに <code><form></code> を使用することをお勧めします。</p> + +<pre><span class="tag"><form id="send-comment" aria-label="</span>コメントを追加<span class="tag">"></span> + .... +<span class="tag"></form</span>> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<h3 id="Use_sparingly" name="Use_sparingly">控えめに使用する</h3> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h3 id="Inputs_are_not_forms" name="Inputs_are_not_forms">入力はフォームではない</h3> + +<p>すべての<a href="/ja/docs/Web/HTML/Element#Forms">フォーム要素</a>（入力、テキスト領域、選択など）で <code>role="form"</code> を宣言する必要はありません。 フォーム要素をラップする HTML 要素で宣言するべきです。 理想的には、{{htmlelement("form")}} 要素をラップ要素として使用し、<code>role="form"</code> を宣言しないでください。</p> + +<h3 id="Search" name="Search">検索</h3> + +<p>フォームを使用して検索する場合は、より専門化した <code>role="search"</code> 値を使用する必要があります。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<p>それそれの {{htmlelement("form")}} 要素と <code>form</code> ランドマークロールには、ラベルが必要です。 このラベルで、支援技術のユーザーがフォームの目的をすばやく理解することができます。</p> + +<p>フォームにラベルを付けるには、2つの方法があります。 {{htmlelement("legend")}} 要素は、<code><form></code> 要素の直接の子孫として使用します。<code>role="form"</code> の宣言を使用している場合、<code>role="form"</code> が宣言されている要素に適用される <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a> を使用します。 理想的には、フォームにラベルを付けるには、<code><form></code> と <code><legend></code> のテクニックを使用します。<br> + （訳注：<code><legend></code> は <code><fieldset></code> の最初の子でなければならないとある。）</p> + +<h4 id="Using_the_<form>_element" name="Using_the_<form>_element"><code><form></code> 要素の使用</h4> + +<pre class="brush: html"><form id="address"> + <legend>あなたの住所を更新してください</legend> + <!-- フォームのコンテンツ --> +</form> +</pre> + +<h4 id="Using_roleform" name="Using_roleform"><code>role="form"</code> の使用</h4> + +<pre class="brush: html"><div role="form" id="gift-cards" aria-label="ギフトカードを購入する"> + <!-- フォームのコンテンツ --> +</div></pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="お問い合わせフォーム"</code> の <code>role="form"</code> の宣言は、"form お問い合わせフォーム" として重複してアナウンスすることができます。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("form")}} 要素を使用すると、自動的にセクションが <code>form</code> ロールを持つことを伝えます。 可能であれば、<code><form></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<dl> +</dl> + +<dl> +</dl> + +<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","#form","ARIA Form Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_form","Role Form")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("form")}}: フォーム要素</li> + <li>{{htmlelement("legend")}}: 凡例要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#form">form (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/grid_role/index.html b/files/ja/web/accessibility/aria/roles/grid_role/index.html new file mode 100644 index 0000000000..666819b2b4 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/grid_role/index.html @@ -0,0 +1,715 @@ +--- +title: 'ARIA: grid ロール' +slug: Web/Accessibility/ARIA/Roles/Grid_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Grid_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>grid</code> ロールは、1つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。</span></p> + +<pre class="brush: html"><table role="grid" aria-labelledby="select-your-seat"> + <caption>座席を選んでください</caption> + <tbody role="presentation"> + <tr role="presentation"> + <td></td> + <th>列 A</th> + <th>列 B</th> + </tr> + <tr> + <th scope="row">島 1</th> + <td tabindex="0"> + <button id="1a" tabindex="-1">1A</button> + </td> + <td tabindex="-1"> + <button id="1b" tabindex="-1">1B</button> + </td> + <!-- More Columns --> + </tr> + <tr> + <th scope="row">島 2</th> + <td tabindex="-1"> + <button id="2a" tabindex="-1">2A</button> + </td> + <td tabindex="-1"> + <button id="2b" tabindex="-1">2B</button> + </td> + <!-- More Columns --> + </tr> + </tbody> +</table> +</pre> + +<p>（オプション）上記の例の簡単な説明を含めます。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>グリッドウィジェットには、テーマに関連するインタラクティブなコンテンツの1つ以上のセルを持つ1つ以上の行が含まれています。 それは特定の視覚的プレゼンテーションを意味するわけではありませんが、要素間の関係を意味します。 これは、チェックボックスやナビゲーションリンクなどのような単純なグループ化に使用します。 複雑なスプレッドシートアプリケーションにも使用できます。</p> + +<p>セル要素には、行ヘッダーや列ヘッダーでない限り、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code> ロールがあります。 ヘッダー要素ではそれぞれ <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a></code> ロールと <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code> ロールです。 セル要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code> ロールを持つ要素によって所有される必要があります。 行は <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> を使用してグループ化できます。</p> + +<p>グリッドをインタラクティブなウィジェットとして使用する場合は、{{anch("Keyboard interactions","キーボードインタラクション")}}を実装する必要があります。</p> + +<p> </p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt> + <h4 id="Roles" name="Roles">ロール</h4> + </dt> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a>（サブクラス）</dt> + <dd>展開や折りたたみができる列を持つグリッドには、ツリーグリッドを使用できます。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></dt> + <dd>グリッド内の行。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></dt> + <dd>1つ以上の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code> を含むグループ。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-level</dt> + <dd>他の構造内のグリッドの階層レベルを示します。</dd> + <dt>aria-multiselectable</dt> + <dd><code>aria-multiselectable</code> が <code>true</code> に設定されている場合、グリッド内の複数の項目を選択できます。 デフォルト値は <code>false</code> です。</dd> + <dt>aria-readonly</dt> + <dd>ユーザーがグリッドをナビゲートできるが、グリッドの値を変更できない場合は、<code>aria-readonly</code> を <code>true</code> に設定するべきです。 デフォルト値は <code>false</code> です。</dd> +</dl> + +<div class="note"> +<p>多くのユースケースでは、HTML の <code><a href="/ja/docs/Web/HTML/Element/table">table</a></code> 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。</p> +</div> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>キーボードユーザーはグリッドに出会うと、<kbd>左</kbd>、<kbd>右</kbd>、<kbd>上</kbd>、<kbd>下</kbd>のキーを使用して行と列をナビゲートします。 インタラクティブなコンポーネントをアクティブにするには、<kbd>リターン</kbd>キーと<kbd>スペース</kbd>キーを使用します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">キー</th> + <th scope="col">動作</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>→</kbd></td> + <td>1セル右にフォーカスを移動します。 フォーカスが行の右端のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>←</kbd></td> + <td>1セル左にフォーカスを移動します。 フォーカスが行の左端のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>↓</kbd></td> + <td>1セル下にフォーカスを移動します。 フォーカスが列の最下部のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>↑</kbd></td> + <td>1セル上にフォーカスを移動します。 フォーカスが列の最上部のセルにある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Page Down</kbd></td> + <td>作成者が決定した行数だけ下にフォーカスを移動します。 通常、現在表示されている行セットの一番下の行が最初に表示される行の1つになるようにスクロールします。 フォーカスがグリッドの最後の行にある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Page Up</kbd></td> + <td>作成者が決定した行数だけ上にフォーカスを移動します。通常、現在表示されている行セットの一番上の行が最後に表示される行の1つになるようにスクロールします。 フォーカスがグリッドの最初の行にある場合、フォーカスは移動しません。</td> + </tr> + <tr> + <td><kbd>Home</kbd></td> + <td>フォーカスを含む行の最初のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>End</kbd></td> + <td>フォーカスを含む行の最後のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>Home</kbd></td> + <td>最初の行の最初のセルにフォーカスを移動します。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>End</kbd></td> + <td>最後の行の最後のセルにフォーカスを移動します。</td> + </tr> + </tbody> +</table> + +<p>セル、行、列を複数選択できる場合は、次のキーの組み合わせが一般的に使用されます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">キーの組み合わせ</th> + <th scope="col">動作</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>ctrl</kbd> + <kbd>Space</kbd></td> + <td>フォーカスを含む列を選択します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>Space</kbd></td> + <td>フォーカスを含む行を選択します。 グリッドに行を選択するためのチェックボックス付きの列が含まれている場合、このキーの組み合わせを使用して、フォーカスがチェックボックスにない場合でもそのボックスをチェックできます。</td> + </tr> + <tr> + <td><kbd>ctrl</kbd> + <kbd>A</kbd></td> + <td>すべてのセルを選択します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>→</kbd></td> + <td>選択範囲を1セル右側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>←</kbd></td> + <td>選択範囲を1セル左側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>↓</kbd></td> + <td>選択範囲を1セル下側に拡張します。</td> + </tr> + <tr> + <td><kbd>shift</kbd> + <kbd>↑</kbd></td> + <td>選択範囲を1セル上側に拡張します。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Calendar_example" name="Calendar_example">カレンダーの例</h3> + +<div class="hidden"> +<h4 id="HTML" name="HTML">HTML</h4> + +<pre class="brush: html"><table role="grid" aria-labelledby="calendarheader" aria-readonly=true> + <caption id="calendarheader">September 2018</caption> + <thead role="rowgroup"> + <tr role="row"> + <td></td> + <th role="columnheader" aria-label="Sunday">S</th> + <th role="columnheader" aria-label="Monday">M</th> + <th role="columnheader" aria-label="Tuesday">T</th> + <th role="columnheader" aria-label="Wednesday">W</th> + <th role="columnheader" aria-label="Thursday">T</th> + <th role="columnheader" aria-label="Friday">F</th> + <th role="columnheader" aria-label="Saturday">T</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <th scope="row" role="rowheader">Week 35</th> + <td>26</td> + <td>27</td> + <td>28</td> + <td>29</td> + <td>30</td> + <td>31</td> + <td role="gridcell" tabindex="-1">1</td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 36</th> + <td role="gridcell" tabindex="-1"> + 2 + </td> + <td role="gridcell" tabindex="-1"> + 3 + </td> + <td role="gridcell" tabindex="-1"> + 4 + </td> + <td role="gridcell" tabindex="-1"> + 5 + </td> + <td role="gridcell" tabindex="-1"> + 6 + </td> + <td role="gridcell" tabindex="-1"> + 7 + </td> + <td role="gridcell" tabindex="-1"> + 8 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 37</th> + <td role="gridcell" tabindex="-1"> + 9 + </td> + <td role="gridcell" tabindex="-1"> + 10 + </td> + <td role="gridcell" tabindex="-1"> + 11 + </td> + <td role="gridcell" tabindex="-1"> + 12 + </td> + <td role="gridcell" tabindex="-1"> + 13 + </td> + <td role="gridcell" tabindex="-1"> + 14 + </td> + <td role="gridcell" tabindex="-1"> + 15 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 38</th> + <td role="gridcell" tabindex="-1"> + 16 + </td> + <td role="gridcell" tabindex="-1"> + 17 + </td> + <td role="gridcell" tabindex="-1"> + 18 + </td> + <td role="gridcell" tabindex="-1"> + 19 + </td> + <td role="gridcell" tabindex="-1"> + 20 + </td> + <td role="gridcell" tabindex="-1"> + 21 + </td> + <td role="gridcell" tabindex="-1"> + 22 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 39</th> + <td role="gridcell" tabindex="-1"> + 23 + </td> + <td role="gridcell" tabindex="-1"> + 24 + </td> + <td role="gridcell" tabindex="-1"> + 25 + </td> + <td role="gridcell" tabindex="-1"> + 26 + </td> + <td role="gridcell" tabindex="-1"> + 27 + </td> + <td role="gridcell" tabindex="-1"> + 28 + </td> + <td role="gridcell" tabindex="-1"> + 29 + </td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 40</th> + <td role="gridcell" tabindex="-1"> + 30 + </td> + <td>1</td> + <td>2</td> + <td>3</td> + <td>4</td> + <td>5</td> + <td>6</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS" name="CSS">CSS</h4> + +<pre class="brush: css">body { + margin: 2rem; + font-family: "Helvetica Neue", sans-serif; +} + +table { + margin: 0; + border-collapse: collapse; + font-variant-numeric: tabular-nums; +} + +tbody th, tbody td { + padding: 5px; +} + +tbody td { + border: 1px solid #000; + text-align: right; + color: #767676; +} + +tbody td[role="gridcell"] { + color: #000; +} + +tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { + background-color: #f6f6f6; + outline: 3px solid blue; + } +}</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<pre class="brush: js">var selectables = document.querySelectorAll('table td[role="gridcell"]'); + +selectables[0].setAttribute('tabindex', 0); + +var trs = document.querySelectorAll('table tbody tr'), + row = 0, + col = 0, + maxrow = trs.length - 1, + maxcol = 0; + +Array.prototype.forEach.call(trs, function(gridrow, i){ + Array.prototype.forEach.call(gridrow.querySelectorAll('td'), function(el, i){ + el.dataset.row = row; + el.dataset.col = col; + col = col + 1; + }); + if (col>maxcol) { maxcol = col - 1; } + col = 0; + row = row + 1; +}); + +function moveto(newrow, newcol) { + var tgt = document.querySelector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); + if (tgt && (tgt.getAttribute('role')==='gridcell') ) { + Array.prototype.forEach.call(document.querySelectorAll('[role=gridcell]'), function(el, i){ + el.setAttribute('tabindex', '-1'); + }); + tgt.setAttribute('tabindex', '0'); + tgt.focus(); + return true; + } else { + return false; + } +} + +document.querySelector('table').addEventListener("keydown", function(event) { + switch (event.key) { + case "ArrowRight": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) + 1); + break; + case "ArrowLeft": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) - 1); + break; + case "ArrowDown": + moveto(parseInt(event.target.dataset.row, 10) + 1, parseInt(event.target.dataset.col, 10)); + break; + case "ArrowUp": + moveto(parseInt(event.target.dataset.row, 10) - 1, parseInt(event.target.dataset.col, 10)); + break; + case "Home": + if (event.ctrlKey) { + var i = 0; + var result; + do { + var j = 0; + var result; + do { + result = moveto(i, j); + j++; + } while (result == false); + i++; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), 0); + } + break; + case "End": + if (event.ctrlKey) { + var i = maxrow; + var result; + do { + var j = maxcol; + do { + result = moveto(i, j); + j--; + } while (result == false); + i--; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), document.querySelector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); + } + break; + case "PageUp": + var i = 0; + var result; + do { + result = moveto(i, event.target.dataset.col); + i++; + } while (result == false); + break; + case "PageDown": + var i = maxrow; + var result; + do { + result = moveto(i, event.target.dataset.col); + i--; + } while (result == false); + break; + case "Enter": + alert(event.target.textContent); + break; + } + event.preventDefault(); +}); +</pre> +</div> + +<p>{{EmbedLiveSample("Calendar_example", "100%", "300")}}</p> + +<p> </p> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<pre><table role="grid" aria-labelledby="calendarheader"> + <caption id="calendarheader">September 2018</caption> + <thead role="rowgroup"> + <tr role="row"> + <td></td> + <th role="columnheader" aria-label="Sunday">S</th> + <th role="columnheader" aria-label="Monday">M</th> + <th role="columnheader" aria-label="Tuesday">T</th> + <th role="columnheader" aria-label="Wednesday">W</th> + <th role="columnheader" aria-label="Thursday">T</th> + <th role="columnheader" aria-label="Friday">F</th> + <th role="columnheader" aria-label="Saturday">T</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row"> + <th scope="row" role="rowheader">Week 35</th> + <td>26</td> + <td>27</td> + <td>28</td> + <td>29</td> + <td>30</td> + <td>31</td> + <td role="gridcell" tabindex="-1">1</td> + </tr> + <tr role="row"> + <th scope="row" role="rowheader">Week 36</th> + <td role="gridcell" tabindex="-1"> + 2 + </td> + <td role="gridcell" tabindex="-1"> + 3 + </td> + <td role="gridcell" tabindex="-1"> + 4 + </td> + <td role="gridcell" tabindex="-1"> + 5 + </td> + <td role="gridcell" tabindex="-1"> + 6 + </td> + <td role="gridcell" tabindex="-1"> + 7 + </td> + <td role="gridcell" tabindex="-1"> + 8 + </td> + </tr> + <!-- … Additional Rows … --> + </tbody> +</table></pre> + +<h4 id="CSS_2" name="CSS_2">CSS</h4> + +<pre class="brush: css">table { + margin: 0; + border-collapse: collapse; + font-variant-numeric: tabular-nums; +} + +tbody th, tbody td { + padding: 5px; +} + +tbody td { + border: 1px solid #000; + text-align: right; + color: #767676; +} + +tbody td[role="gridcell"] { + color: #000; +} + +tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { + background-color: #f6f6f6; outline: 3px solid blue; +} +</pre> + +<h4 id="JavaScript_2" name="JavaScript_2">JavaScript</h4> + +<pre>var selectables = document.querySelectorAll('table td[role="gridcell"]'); + +selectables[0].setAttribute('tabindex', 0); + +var trs = document.querySelectorAll('table tbody tr'), + row = 0, + col = 0, + maxrow = trs.length - 1, + maxcol = 0; + +Array.prototype.forEach.call(trs, function(gridrow, i){ + Array.prototype.forEach.call(gridrow.querySelectorAll('td'), function(el, i){ + el.dataset.row = row; + el.dataset.col = col; + col = col + 1; + }); + if (col>maxcol) { maxcol = col - 1; } + col = 0; + row = row + 1; +}); + +function moveto(newrow, newcol) { + var tgt = document.querySelector('[data-row="' + newrow + '"][data-col="' + newcol + '"]'); + if (tgt && (tgt.getAttribute('role')==='gridcell') ) { + Array.prototype.forEach.call(document.querySelectorAll('[role=gridcell]'), function(el, i){ + el.setAttribute('tabindex', '-1'); + }); + tgt.setAttribute('tabindex', '0'); + tgt.focus(); + return true; + } else { + return false; + } +} + +document.querySelector('table').addEventListener("keydown", function(event) { + switch (event.key) { + case "ArrowRight": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) + 1); + break; + case "ArrowLeft": + moveto(parseInt(event.target.dataset.row, 10), parseInt(event.target.dataset.col, 10) - 1); + break; + case "ArrowDown": + moveto(parseInt(event.target.dataset.row, 10) + 1, parseInt(event.target.dataset.col, 10)); + break; + case "ArrowUp": + moveto(parseInt(event.target.dataset.row, 10) - 1, parseInt(event.target.dataset.col, 10)); + break; + case "Home": + if (event.ctrlKey) { + var i = 0; + var result; + do { + var j = 0; + var result; + do { + result = moveto(i, j); + j++; + } while (result == false); + i++; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), 0); + } + break; + case "End": + if (event.ctrlKey) { + var i = maxrow; + var result; + do { + var j = maxcol; + do { + result = moveto(i, j); + j--; + } while (result == false); + i--; + } while (result == false); + } else { + moveto(parseInt(event.target.dataset.row, 10), document.querySelector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); + } + break; + case "PageUp": + var i = 0; + var result; + do { + result = moveto(i, event.target.dataset.col); + i++; + } while (result == false); + break; + case "PageDown": + var i = maxrow; + var result; + do { + result = moveto(i, event.target.dataset.col); + i--; + } while (result == false); + break; + case "Enter": + alert(event.target.textContent); + break; + } + event.preventDefault(); +});</pre> + +<p> </p> + +<h3 id="More_examples" name="More_examples">より多くの例</h3> + +<p>他の例を以下で見つけることができます。</p> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html">データグリッドの例</a>（英語）</li> + <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/grid/LayoutGrids.html">レイアウトグリッドの例</a>（英語）</li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/">W3C/WAI チュートリアル: テーブル</a>（英語）</li> +</ul> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p>{{anch("Keyboard interactions","キーボードインタラクション")}}が適切に実装されていても、矢印キーを使用する必要があることに気づかないユーザーもいます。 <code>grid</code> ロールを使用して、必要な機能とインタラクションが最善にアーカイブできることを確認してください。</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","#grid","Role Grid")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#grid","Role Grid")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/composite_Role">ARIA composite ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/table_Role">ARIA table ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_Role">ARIA treegrid ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/row_Role">ARIA row ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowgroup_Role">ARIA rowgroup ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">ARIA: gridcell ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">ARIA: rowheader ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">ARIA: columnheader ロール</a></li> + <li><a href="/ja/docs/Web/HTML/Element/table">HTML table 要素</a></li> + <li>aria-level</li> + <li>aria-multiselectable</li> + <li>aria-readonly</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/heading_role/index.html b/files/ja/web/accessibility/aria/roles/heading_role/index.html new file mode 100644 index 0000000000..b8fb52a347 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/heading_role/index.html @@ -0,0 +1,114 @@ +--- +title: 'ARIA: heading ロール' +slug: Web/Accessibility/ARIA/Roles/heading_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/heading_role +--- +<div> {{MDNSidebar}}\{{ariaref}}</div> + +<p><span class="seoSummary"><code>heading</code> ロールは、この要素をページやセクションの見出しとして定義します。 ページに構造を与えるために、セクション間の関係を示すレベルも提供するべきです。</span></p> + +<pre class="brush: html"><div role="heading" aria-level="1">これはメインページの見出しです</div> +</pre> + +<p>これは div のテキストをページのメインの見出しとして定義します。 それは <code>aria-level</code> 属性を介してレベル 1 で示します。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>heading</code> ロールは、この要素を見出しのように扱うべきであることを支援技術に示します。 スクリーンリーダーは、たとえば、テキストを読み、このテキストが見出しのように書式設定されていることを示します。 さらに、レベルは、この見出しが表すページ構造のどの部分を支援技術に伝えるべきかを示すべきです。 レベル 1 見出しは、通常、ページのメインの見出しを示し、レベル 2 は、最初のサブセクションを示し、レベル 3 は、そのサブセクションなどとなります。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-level</code></dt> + <dd><code>aria-level</code> 属性は、この見出しが文書構造内にあるレベルを指定します。 レベルが存在しない場合、デフォルト値は 2 です。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>このロールは特別なキーボードナビゲーションを必要としません。 どんな見出しもそうであるように、ID を与えることで、アンカーリンクから参照できるようになり、キーボードを介してアクセス可能となります。</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt>必要なイベントハンドラ</dt> + <dd>無し</dd> + <dt>属性値の変更</dt> + <dd>コンテンツを動的に挿入する場合を除き、通常は必須ではありませんが、この場合、新しく追加された見出しには、文書構造の残りの部分と値が整合する <code>aria-level</code> 属性が必要です。</dd> +</dl> + +<div class="note"> +<p><code>heading</code> ロールと <code>aria-level</code> で <code><div></code> または <code><span></code> を使用する代わりに、このテキストが見出しであり、それが表す構造の部分を示すために、代わりに <code><h1></code> から <code><h6></code> の要素を使用することを検討してください 。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下は典型的なページ構造を示しています。</p> + +<pre class="brush: html"><div id="container"> +<div role="heading" aria-level="1">メインページ見出し</div> +<p>この記事では、ページ構造の表示について説明します。</p> +<div role="heading" aria-level="2">前書き</div> +<p>導入テキスト。</p> +<div role="heading" aria-level="2">第 1 章</div> +<p>テキスト</p> +<div role="heading" aria-level="3">第 1.1 章</div> +<p>サブセクション内の複数のテキスト。</p> +...</div></pre> + +<p>ただし、代わりに次のようにするべきです。</p> + +<pre class="brush: html"><div id="container"> +<h1>メインページ見出し</h1> +<p>この記事では、ページ構造の表示について説明します。</p> +<h2>前書き</h2> +<p>導入テキスト。</p> +<h2>第 1 章</h2> +<p>テキスト</p> +<h3>第 1.1 章</h3> +<p>サブセクション内の複数のテキスト。</p> +...</div></pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><code>heading</code> ロールと <code>aria-level</code> 属性を使用する必要がある場合は、HTML との整合性を保つために、レベルでレベル 6 を超えないようにしてください。 理論的にはそれより大きくすることができますが、一部のスクリーンリーダーでサポートする場合もありますが、他のブラウザーやスクリーンリーダーの組み合わせでは結果が予測できない場合があります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>このロールを使用する最良の方法は、まったく使用しないで、代わりに上記の例に示すようにネイティブの見出しタグ <code><h1></code> ～ <code><h6></code> を使用することです。 <code>heading</code> ロールと <code>aria-level</code> 属性は、実際には、大きな変更を加えることができないレガシーコードにアクセシビリティを取り入れる場合にのみ使用するべきです。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加の利点</h3> + +<p>無し</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","#heading","heading")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Precedence_order" name="Precedence_order">優先順位</h2> + +<p><code>heading</code> ロールは、それが使用されている要素のネイティブな意味論的意味をオーバーライドします。 また、<code>aria-level</code> 属性は、どのレベルの見出しが公開されているかに関する情報を提供します。</p> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6>: HTML の見出し要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/index.html b/files/ja/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..c3fc70ecab --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/index.html @@ -0,0 +1,72 @@ +--- +title: WAI-ARIA ロール +slug: Web/Accessibility/ARIA/Roles +translation_of: Web/Accessibility/ARIA/Roles +--- +<p class="summary">このページは、MDN で説明されているすべての WAI-ARIA ロールをカバーするリファレンスページを一覧にしています。ロールの完全なリストについては、<a href="/ja-JP/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA を使用する: ロール、ステート、プロパティ</a>をご覧ください。</p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> +<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> +</ul> +</div> diff --git a/files/ja/web/accessibility/aria/roles/list_role/index.html b/files/ja/web/accessibility/aria/roles/list_role/index.html new file mode 100644 index 0000000000..d3dfaa48f3 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/list_role/index.html @@ -0,0 +1,115 @@ +--- +title: 'ARIA: list ロール' +slug: Web/Accessibility/ARIA/Roles/List_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/List_role +--- +<p>\{{ariaref}}<span class="seoSummary">ARIA の <code>list</code> ロールは、項目のリスト（list）を識別するために使用できます。 これは、通常、リスト内に含まれるリスト項目（list item）を識別するために使用される <code>listitem</code> ロールと組み合わせて使用されます。</span></p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">リスト項目 1</div> + <div role="listitem">リスト項目 2</div> + <div role="listitem">リスト項目 3</div> +</section> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ <code>list</code> と <code>listitem</code> のコンテナを使用して支援技術で識別できます。 <code>list</code> には1つ以上の <code>listitem</code> の子が含まれているか、1つ以上の <code>group</code> が子として存在し、各 <code>group</code> には1つ以上の <code>listitem</code> が子として格納されている必要があります。</p> + +<p>リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。</p> + +<div class="warning"> +<p><strong>警告</strong>: 可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> とその <code>listitem</code>（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt> + <dd> + <p>リストやディレクトリ内の単一項目。 <code>listitem</code> ロールを持つ要素は、<code>list</code> ロールや <code>group</code> ロールを持つ要素内にのみ存在します。</p> + </dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></dt> + <dd> + <p>リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。</p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え（英語）</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="list"</code> と <code>role="listitem"</code> のみを使用する必要があります。</p> + +<p>HTML の {{htmlelement("ol")}} と {{htmlelement("ul")}} とは異なり、ARIA の <code>list </code>ロールは順序付きリストと順序無しリストを区別しません。 可能な場合は、リスト（{{htmlelement("ol")}} と {{htmlelement("ul")}}）とリスト項目（{{htmlelement("li")}}）をマークアップするのに適切な意味論の HTML 要素を使用するべきです。 例えば、上記の例は次のように書き直<span id="result_box" lang="ja"><span>すべきです</span></span>。</p> + +<pre class="brush: html"><ul> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ul></pre> + +<p>リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> + +<pre class="brush: html"><ol> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ol></pre> + +<div class="note"> +<p><strong>注</strong>: ARIA の <code>list</code> ロールと <code>listitem</code> ロールでは、順序付きリストと順序無しリストを区別しません。</p> +</div> + +<p>仮に、<code>ol</code> または <code>ul</code> という意味論の HTML 要素を使用して <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> ロールを適用する場合、ARIA では <code>listitem</code> 要素に親 <code>list</code> 要素が必要であるため、各子 <code>li</code> 要素は <code>presentation</code> ロールを継承します。 したがって、<code>li</code> 要素は支援技術には見えませんが、これらの要素の内部に含まれる要素（ネストされたリストを含む）は、支援技術に見えます。</p> + +<div class="note"> +<p><strong>注</strong>: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに <code>tab</code>、<code>tabpanel</code>、<code>tablist</code> ロールを使用するべきです。</p> +</div> + +<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","#list","list")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("ul")}}</span></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("ol")}}</span></li> + <li><span class="ILfuVd yZ8quc">{{htmlelement("li")}}</span></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">ARIA: group ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/listbox_role/index.html b/files/ja/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..58106a9e75 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,211 @@ +--- +title: 'ARIA: listbox ロール' +slug: Web/Accessibility/ARIA/Roles/listbox_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +<p>\{{ariaref}}</p> + +<ul class="ul1"> +</ul> + +<ul class="ul1"> +</ul> + +<p><span class="seoSummary"><code>listbox</code> ロールは、ユーザーが静的な1つ以上の項目を選択するリストに使用され、HTML の <code><select></code> 要素とは異なり、画像を含むことがあります。</span></p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>listbox</code> ロールは、HTML の {{htmlelement("select")}} 要素と同様に、ユーザーが1つまたは複数の静的項目を選択できるリストを作成する要素を識別するために使用されます。 <code><select></code> とは異なり、リストボックス（listbox）は画像を含むことができます。 リストボックスのそれぞれの子は、<code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a></code> ロールを持つべきです。</p> + +<p>HTML の <code><select></code> 要素または、1項目のみを選択する場合はラジオボタンのグループ、複数項目を選択する場合はチェックボックスのグループを使用することを強くお勧めします。 なぜなら、全ての子孫のフォーカスを管理するためのキーボードのインタラクティビティがたくさんあり、ネイティブな HTML 要素がこの機能を無料で提供するためです。</p> + +<p><code>listbox</code> ロールを持つ要素は、暗黙の <code>aria-orientation</code> の値に <code>vertical</code> を持ちます。</p> + +<p class="p1">リストに<kbd>タブ</kbd>で移動した場合、他に何も選択されていない場合はリスト内の最初の項目が選択されます。 <kbd>上/下矢印</kbd>はリストをナビゲートし、<kbd>Shift + 上/下矢印</kbd>を押すと選択範囲が移動して拡張されます。 1つ以上の文字を入力すると、リスト項目をナビゲートします（同じ文字はその文字から始まる各項目に移動し、異なる文字はその文字列全体で始まる最初の項目に移動します）。 現在の項目に関連するコンテキストメニューがある場合、<kbd>Shift + F10</kbd> でそのメニューが起動します。 リスト項目がチェック可能である場合、<kbd>スペース</kbd>を使用して<a href="http://www.w3.org/TR/wai-aria-practices/#checkbox">チェックボックス</a>をトグルできます。 選択可能なリスト項目の場合、<kbd>スペース</kbd>は選択をトグルし、<kbd>Shift + スペース</kbd>を使用して連続項目を選択し、<kbd>Ctrl + 矢印</kbd>で選択せずに移動し、<kbd>Ctrl + スペース</kbd>を使用して不連続項目を選択できます。 全ての項目を選択するには、チェックボックス、リンクまたは他の方法を使用することをお勧めします。 <kbd>Ctrl + A</kbd> は、このためのショートカットキーとして使用できます。</p> + +<p class="li2"><code>listbox</code> ロールが要素に追加されるか、そのような要素が可視になると、スクリーンリーダーは、フォーカスを得たときにリストボックスのラベルとロールをアナウンスします。 オプションや項目がリスト内でフォーカスされている場合は、次にそれがアナウンスされ、その後、スクリーンリーダーがサポートしている場合は、リストでの項目の位置が示されます。 リスト内でフォーカスが移動すると、スクリーンリーダーは関連する項目をアナウンスします。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Associated_Roles" name="Associated_Roles">関連するロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Option_Role">option</a></dt> + <dd>1つ以上のネストされたオプションが必要です。 選択された全てのオプションは、<code>aria-selected</code> が <code>true</code> に設定されています。 選択されていない全てのオプションは、<code>aria-selected</code> が <code>false</code> に設定されています。 オプションを選択できない場合は、<code>aria-selected</code> を省略します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd><code>listitem</code> 要素を含むセクション。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-multiselectable</dt> + <dd>ユーザーが複数のオプションを選択できるようにするには、これを含めて <code>true</code> を設定します。 <code>true</code> に設定するならば、全てのオプションに <code>aria-selected</code> 属性を含めるべきです。 <code>false</code> または省略すると、現在選択されているオプションのみが選択され、いずれかのオプションが選択されている場合は、<code>aria-selected</code> 属性が必要で、<code>true</code> に設定する必要があります。</dd> + <dt>aria-activedescendant</dt> + <dd>そのオプションの <code>aria-selected</code> の値が <code>true</code> や <code>false</code> を持っているかどうかに関わらず、最も最近にオプションと対話したことを意味する、現在アクティブなオプションの <code>id</code> を値として取ります。 複数選択であっても、1つの <code>id</code> の値をとります。</dd> + <dt>aria-required</dt> + <dd>選択が必要であることを示します。</dd> + <dt>aria-readonly</dt> + <dd>リストボックスは編集可能ではありません。 ユーザーはオプションの選択や非選択を変更することはできませんが、それ以外の操作は可能です。</dd> +</dl> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<ul> + <li>単一選択リストボックスがフォーカスを受け取ったとき、 + <ul> + <li>リストボックスがフォーカスを受け取る前にオプションが選択されていない場合、最初のオプションがフォーカスを受け取ります。 必要に応じて、最初のオプションを自動的に選択してもよい。</li> + <li>リストボックスがフォーカスを受け取る前にオプションが選択されている場合、フォーカスは選択されたオプションに設定されます。</li> + </ul> + </li> + <li>複数選択リストボックスがフォーカスを受け取ったとき、 + <ul> + <li>リストボックスがフォーカスを受け取る前にどのオプションも選択されていない場合、フォーカスは最初のオプションに設定され、選択状態には自動的な変更はありません。</li> + <li>リストボックスがフォーカスを受け取る前に1つ以上のオプションが選択されている場合、フォーカスは選択されているリストの最初のオプションに設定されます。</li> + </ul> + </li> + <li><kbd>↓（下矢印）</kbd>: 次のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。</li> + <li><kbd>↑（上矢印）</kbd>: 前のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。</li> + <li><kbd>Home</kbd>（オプション）: 最初のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションを持つリストでは、このキーをサポートすることを強くお勧めします。</li> + <li><kbd>End</kbd>（オプション）: 最後のオプションにフォーカスを移動します。 必要に応じて、単一選択リストボックスでは、選択もフォーカスと共に移動することがあります。 5つ以上のオプションを持つリストでは、このキーをサポートすることを強くお勧めします。</li> + <li>先行入力は、全てのリストボックス、特に7つ以上のオプションを持つリストボックスに対してお勧めします。 + <ul> + <li> 文字を入力: フォーカスは、入力された文字で始まる名前を持つ次の項目に移動します。</li> + <li>複数の文字を連続して入力: フォーカスは、入力された文字列で始まる名前を持つ次の項目に移動します。</li> + </ul> + </li> + <li><strong>複数選択</strong>: 作成者は、複数選択をサポートするために2つのインタラクションモデルのいずれかを実装することができます。 ユーザーがリストをナビゲートしながら <kbd>Shift</kbd> や <kbd>Ctrl</kbd> などの修飾キーを押し続けなくてもよい推奨モデルや、選択状態が失われるのを避けるためにナビゲート中に修飾キーを押し続ける必要のある代替モデルがあります。 + <ul> + <li>推奨選択モデル — 修飾キーを押し続ける必要はありません。 + <ul> + <li><kbd>スペース</kbd>: フォーカスされたオプションの選択状態を変更します。</li> + <li><kbd>Shift + ↓（下矢印）</kbd>（オプション）: 次のオプションにフォーカスを移動し、選択状態をトグルします。</li> + <li><kbd>Shift + ↑（上矢印）</kbd>（オプション）: 前のオプションにフォーカスを移動し、選択状態をトグルします。</li> + <li><kbd>Shift + スペース</kbd>（オプション）: 直前に選択した項目からフォーカスされた項目までの連続した項目を選択します。</li> + <li><kbd>Ctrl + Shift + Home</kbd>（オプション）: フォーカスされたオプションから最初のオプションまでの全てのオプションを選択します。 必要に応じて、フォーカスを最初のオプションに移動します。</li> + <li><kbd>Ctrl + Shift + End</kbd> （オプション）: フォーカスされたオプションから最後のオプションまでの全てのオプションを選択します。 必要に応じて、フォーカスを最後のオプションに移動します。</li> + <li><kbd>Ctrl + A</kbd>（オプション）: リスト内の全てのオプションを選択します。 必要に応じて、全てのオプションが選択されている場合は、全てのオプションを非選択にすることもできます。</li> + </ul> + </li> + </ul> + </li> +</ul> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<h4 id="selecting_an_option_in_a_single_select_listbox" name="selecting_an_option_in_a_single_select_listbox">単一選択リストボックスでオプションを選択する</h4> + +<p>ユーザーがオプションを選択すると、以下が起こる必要があります。</p> + +<ol> + <li>前に選択したオプションを非選択にし、<code>aria-selected</code> を <code>false</code> に設定するか、属性を完全に削除して、新しく選択されなくなったオプションの外観を選択されていないように変更する。</li> + <li>新しく選択したオプションを選択し、オプションで <code>aria-selected="true"</code> と設定し、新しく選択されたオプションの外観を選択されているように変更する。</li> + <li>リストボックスの <code>aria-activedescendant</code> の値を、新しく選択したオプションの <code>id</code> に更新する。</li> + <li>オプションのぼかし、フォーカス、選択状態を視覚的に処理する。</li> +</ol> + +<h4 id="Toggling_the_state_of_an_option_in_a_multi_select_listbox" name="Toggling_the_state_of_an_option_in_a_multi_select_listbox">複数選択リストボックスでオプションの状態をトグルする</h4> + +<p>ユーザーがオプションをクリックするか、オプションにフォーカスを当てたときに<kbd>スペース</kbd>を押すか、その他でオプションの状態をトグルすると、以下が起こる必要があります。</p> + +<ol> + <li>現在選択されているオプションの <code>aria-selected</code> ステート（状態）をトグルし、選択されている <code>aria-selected</code> の状態を <code>false</code> なら <code>true</code> に、<code>true</code> なら <code>false</code> に変更する。</li> + <li>選択状態を反映するようにオプションの外観を変更する。</li> + <li>リストボックスの <code>aria-activedescendant</code> の値を、オプションが非選択へトグルされている場合でも、ユーザーが直前に対話したオプションの <code>id</code> に更新します。</li> +</ol> + +<div class="note"> +<p> ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 <code><option></code> 要素を子孫に持つ <code><select></code> 要素は、必要な全てのインタラクションをネイティブに処理します。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h4 class="p1" id="Example_1_A_single_select_listbox_that_uses_aria-activedescendant" name="Example_1_A_single_select_listbox_that_uses_aria-activedescendant">例 1: aria-activedescendant を使用する単一選択リストボックス</h4> + +<p class="p2">以下のスニペットは、<code>listbox</code> ロールが HTML ソースコードに直接どのように追加されるかを示しています。</p> + +<pre class="brush: html"><p id="listbox1label" role="label">色を選択:</p> +<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" + onclick="return listItemClick(event);" + onkeydown="return listItemKeyEvent(event);" + onkeypress="return listItemKeyEvent(event);" + aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected" aria-selected="true">緑</div> + <div role="option" id="listbox1-2">オレンジ</div> + <div role="option" id="listbox1-3">赤</div> + <div role="option" id="listbox1-4">青</div> + <div role="option" id="listbox1-5">紫</div> + <div role="option" id="listbox1-6">ペリウィンクル</div> +</div> +</pre> + +<p>これは、ネイティブの HTML の {{htmlelement("select")}} 要素と {{htmlelement("label")}} 要素でより簡単に処理できます。</p> + +<pre class="brush: html"><label for="listbox1">色を選択:</label> +<select id="listbox1"> + <option selected>緑</option> + <option>オレンジ</option> + <option>赤</option> + <option>青</option> + <option>紫</option> + <option>ペリウィンクル</option> +</select></pre> + +<h4 id="More_examples" name="More_examples">より多くの例</h4> + +<ul> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html">スクロール可能なリストボックスの例</a>: 1より大きい <code>size</code> 属性を持つ HTML の <code><select></code> と同様な、スクロールしてより多くのオプションを表示する単一選択リストボックス。（英語）</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html">折りたたみ可能なドロップダウンリストボックスの例</a>: 属性 <code>size="1"</code> を持つ HTML の <code><select></code> と同様な、アクティブにすると展開される単一選択の折りたたみ可能なリストボックス。（英語）</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html">並べ替え可能なオプションを持つリストボックスの例</a>: オプションの追加、移動、および削除が可能なツールバーが付属する、単一選択リストボックスと複数選択リストボックスの両方の例。（英語）</li> +</ul> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<ul class="ul1"> + <li class="li3">キーボードからアクセス可能にするには、作成者はこのロールの全ての子孫の<a href="https://www.w3.org/TR/wai-aria-1.1/#managingfocus">フォーカスを管理</a>する必要があります。</li> + <li class="li3">リストにフォーカスが当てられていない場合、作成者は選択に異なるスタイリングを使用することが推奨されます。 例えば、非アクティブな選択が、より明るい背景色で表示されることが多い。</li> + <li class="li3">リストボックスが別のウィジェットの一部でない場合は、<code>aria-labelledby</code> プロパティが設定されている必要があります。</li> + <li class="li3">1つ以上のエントリがリストボックスの DOM の子でない場合、追加の <code>aria-*</code> プロパティを設定する必要があります（<a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">ARIA のベストプラクティス</a>（英語）を参照）。</li> + <li class="li3">リストボックスを<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">展開</a>する正当な理由がある場合、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">combobox</a></code> ロールがより適切かもしれません。</li> +</ul> + +<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","#listbox","ARIA listbox role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML {{htmlelement("select")}} 要素</li> + <li>HTML {{htmlelement("label")}} 要素</li> + <li>HTML {{htmlelement("option")}} 要素</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">ARIA: <code>combobox</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Option_Role">ARIA: <code>option</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/list_Role">ARIA: <code>list</code> ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: <code>listitem</code> ロール</a></li> + <li class="li2"><a href="https://www.w3.org/TR/wai-aria-practices/#Listbox">ARIA のベストプラクティス — リストボックス</a>（英語）</li> + <li class="li2"><a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA のロールモデル — リストボックス</a>（英語）</li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/listitem_role/index.html b/files/ja/web/accessibility/aria/roles/listitem_role/index.html new file mode 100644 index 0000000000..02c85295f2 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/listitem_role/index.html @@ -0,0 +1,113 @@ +--- +title: 'ARIA: listitem ロール' +slug: Web/Accessibility/ARIA/Roles/Listitem_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Listitem_role +--- +<div>\{{ariaref}}</div> + +<p class="summary">ARIAの <code>listitem</code> ロールは、項目のリスト内の項目を識別するために使用できます。 これは、通常、リストコンテナを識別するために使用される <code>list</code> ロールとともに使用されます。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">リスト項目 1</div> + <div role="listitem">リスト項目 2</div> + <div role="listitem">リスト項目 3</div> +</section> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>外側のコンテナとその内側の要素のリストで構成されるコンテンツは、それぞれ <code>list</code> と <code>listitem</code> のコンテナを使用して支援技術で識別できます。</p> + +<p>リストとリスト項目をマークアップするためにどの要素を使用すべきかについて、鉄則はありませんが、リスト項目がリストのコンテキストで意味をなすようにするべきです。 例えば、買い物リスト、料理の手順、運転の指示。</p> + +<div class="warning"> +<p><strong>警告</strong>: 可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> とその <code>listitem</code>（{{htmlelement("ul")}} や {{htmlelement("ol")}} と {{htmlelement("li")}}）をマークアップする必要があります。 詳しくは、{{anch("Best practices","ベストプラクティス")}}を参照してください。</p> +</div> + +<h3 id="Associated WAI-ARIA Roles, States, and Properties" name="Associated WAI-ARIA Roles, States, and Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd> + <p>項目のリスト。 <code>list</code> ロールを持つ要素には、子として <code>listitem</code> ロールを持つ1つ以上の要素、<code>group</code> ロールを持つ1つ以上の要素が必要です。 <code>group</code> ロールを持つ要素は、子として listitem ロールを持つ1つ以上の要素を持ちます。</p> + </dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></dt> + <dd> + <p>リストにネストされたときにリスト項目に限定される関連オブジェクトのコレクションです。 ページの目次に独自の場所を持つほど重要ではありません。</p> + </dd> +</dl> + +<h3 id="Keyboard Interactions" name="Keyboard Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p> <a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara によるいくつかの有用な例と考え（英語）</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>例えば、HTML を制御できないが、JavaScript を使用した後でアクセシビリティを動的に向上させる必要がある場合など、<code>role="list"</code> と <code>role="listitem"</code> のみを使用する必要があります。</p> + +<p>可能な限り、適切な意味論の HTML 要素を使用して、<code>list</code> と <code>listitem</code>（{{htmlelement("ol")}} や {{htmlelement("ul")}} と {{htmlelement("li")}}）をマークアップする必要があります。 例えば、上記の例は次のように書き直すべきです。</p> + +<pre class="brush: html"><ul> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ul></pre> + +<p>リスト項目の順序が重要な場合は、順序付きリストを使用します。</p> + +<pre class="brush: html"><ol> + <li>リスト項目 1</li> + <li>リスト項目 2</li> + <li>リスト項目 3</li> +</ol></pre> + +<div class="note"> +<p><strong>注</strong>: ARIA の <code>list</code> ロールと <code>listitem</code> ロールでは、順序付きリストと順序無しリストを区別しません。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: タブ付きインターフェースとして機能する項目のリストをマークアップする場合は、代わりに <code>tab</code>、<code>tabpanel</code>、<code>tablist</code> ロールを使用するべきです。</p> +</div> + +<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","#listitem","listitem")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("li")}} 要素</li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("ul")}} 要素</li> + <li><span class="ILfuVd yZ8quc">HTML </span>{{htmlelement("ol")}} 要素</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">ARIA: group ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/main_role/index.html b/files/ja/web/accessibility/aria/roles/main_role/index.html new file mode 100644 index 0000000000..28d6448238 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/main_role/index.html @@ -0,0 +1,131 @@ +--- +title: 'ARIA: main ロール' +slug: Web/Accessibility/ARIA/Roles/Main_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Main_role +--- +<p>{{draft}}\{{ariaref}}</p> + +<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書の主要なコンテンツを示すために使用されます。 メインコンテンツ領域は、文書の中心的な話題と直接に関連したり発展させるコンテンツや、アプリケーションの中心的な機能のコンテンツで構成されます。</p> + +<pre class="brush: html"><div id="main" role="main"> + <h1>アボカド</h1> + <!-- メインセクションのコンテンツ --> +</div> +</pre> + +<p>これは、アボカドについて議論する文書のメインセクションです。 この文書のサブセクションでは、その歴史、品種の違い、栽培地域などを議論することができます。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>main</code> ロールは、文書のメイン（main）コンテンツを識別するナビゲーションに関する<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報をプログラムで表現することができます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 ランドマークロールを介してナビゲートする場合、<code>main</code> ロールは「メインコンテンツへスキップする」リンクの代わりです。 文書ごとに1つの <code>main</code> ランドマークロールがあるべきです。</p> + +<p>{{htmlelement("main")}} 要素は <code>main</code> ロールを持ちます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> + +<p>文書とアプリケーションは DOM にネストすることができます。 これにより、DOM の子孫として複数のメイン要素が存在する可能性があります。 このような場合は、<code>aria-owns</code> を組み込んで、文書やアプリケーションの祖先に対するメインの関係を識別します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre><span class="tag"><body> + <!-- </span>主要なナビゲーション<span class="tag"> --> + + <div role="main"> + <h1></span>第一次インドシナ戦争</<span class="tag">h1></span> + <!-- 記事のコンテンツ --> +<span class="pln"> </span></div> + + <!-- サイドバーとフッター --> +<span class="tag"></body></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<h3 id="Use_only_one_main_role_per_document" name="Use_only_one_main_role_per_document">文書ごとに1つの <code>main</code> ロールのみを使用する</h3> + +<p><code>main</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書ごとに1回のみ使用するべきです。</p> + +<p>文書に2つの <code>main</code> ロールが含まれている場合、JavaScript でトリガされたときにページコンテンツを更新するなどで、<code><a href="/ja/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 属性を切り替えるなどのテクニックによって、非アクティブな <code>main</code> ロールの存在を支援技術から取り除くべきです。</p> + +<pre><span class="tag"><main> + <h1></span>アクティブな<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1> + <!-- </span>コンテンツ<span class="tag"> --> +</main</span> + +<span class="tag"><main hidden> + <h1></span>隠された<span class="tag"> <code>main</code> </span>要素</<span class="tag">h1> + <!-- </span>コンテンツ<span class="tag"> --></span> +<span class="tag"></main></span> +</pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("main")}} 要素を使用すると自動的にセクションが <code>main</code> ロールを持つことを伝えます。 可能であれば、<code><main></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Skip_navigation" name="Skip_navigation">スキップナビゲーション</h3> + +<p>スキップナビゲーション（"skipnav" とも呼ばれる）は、支援技術のユーザーが繰返したコンテンツ（メインナビゲーション、情報バナーなど）の大きなセクションをすばやくバイパスすることを可能にするテクニックです。 これにより、ユーザーはページのメインコンテンツにすばやくアクセスできます。</p> + +<p><code>role="main"</code> という宣言を持つ要素に <code><a href="/ja/docs/Web/HTML/Global_attributes/id">id</a></code> 属性を追加すると、それをスキップナビゲーションリンクのターゲットにすることができます。</p> + +<pre><span class="tag"><body> + <a href="#main-content"></span>メインコンテンツへスキップする<span class="tag"></a> + + <!-- </span>ナビゲーションとヘッダーのコンテンツ<span class="tag"> --> + + <div id="main-content" role="main"> + <!-- </span>メインページのコンテンツ<span class="tag"> --> + </div> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> +</ul> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#main","ARIA Main Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_main","Main Landmark Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("main")}}: メイン要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#main">main (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="http://html5doctor.com/the-main-element/">The main element | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/navigation_role/index.html b/files/ja/web/accessibility/aria/roles/navigation_role/index.html new file mode 100644 index 0000000000..80bdc3d70a --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/navigation_role/index.html @@ -0,0 +1,151 @@ +--- +title: 'ARIA: navigation ロール' +slug: Web/Accessibility/ARIA/Roles/Navigation_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Navigation_Role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>navigation</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、ウェブサイトまたはページコンテンツをナビゲートするために使用される主要なリンクのグループを識別するために使用されます。</span></p> + +<pre class="brush: html"><div role="navigation" aria-label="メインナビゲーション"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> +</div> +</pre> + +<p>これはウェブサイトのメインナビゲーションです。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>navigation</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。 HTML の <code><nav></code> 要素と同様に、<code>navigation</code> ランドマークは、ウェブサイトまたはページコンテンツのナビゲーション（navigation）に使用するリンクのグループ（例えば、リスト）を識別する手段を提供します。 ページに複数の <code>navigation</code> ランドマークが含まれている場合は、それぞれが固有のラベルを持つべきです。 ページ上の2つ以上のナビゲーションに関するランドマークが同じリンクのセットを持つ場合は、それぞれに同じラベルを使用します。</p> + +<p><code>navigation</code> ランドマークを定義するには、HTML5 の {{htmlelement("nav")}} 要素を使用することをお勧めします。 HTML5 の <code><nav></code> 要素のテクニックが使用されていない場合は、<code>role="navigation"</code> 属性を使用して <code>navigation</code> ランドマークを定義します。</p> + +<div class="note"> +<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation </code>ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきです。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>ナビゲーションの目的を簡単に説明します。 スクリーンリーダーはロールとラベルの内容の両方を読むので、"navigation" という用語を省略します。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><div role="navigation" aria-label="顧客サービス"> + <ul> + <li><a href="#">ヘルプ</a></li> + <li><a href="#">注文追跡</a></li> + <li><a href="#">出荷と配達</a></li> + <li><a href="#">返品</a></li> + <li><a href="#">お問い合わせ</a></li> + <li><a href="#">お店を探す</a></li> + </ul> +</div> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("nav")}} 要素を使用すると、自動的にセクションが <code>navigation</code> ロールを持つことを伝えます。 可能であれば、<code><nav></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>navigation</code> ランドマークロールや {{htmlelement("nav")}} 要素がある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><div id="main-nav" role="navigation" aria-label="メイン"> + <!-- コンテンツ --> +</div> + +... + +<nav id="footer-nav" aria-label="フッター"> + <!-- コンテンツ --> +</nav> +</pre> + +<h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4> + +<p>文書内の <code>navigation</code> ランドマークロールまたは {{htmlelement("nav")}} 要素が文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でメインナビゲーションが繰り返されています。</p> + +<pre class="brush: html"><header> + <nav id="main-nav" aria-label="メイン"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> + </div> +</header> + +... + +<footer> + <nav id="footer-nav" aria-label="メイン"> + <!-- 主要なウェブサイトの場所へのリンクのリスト --> + </nav> +</footer> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="主要なナビゲーション"</code> の <code>role="navigation"</code> の宣言は、"navigation 主要なナビゲーション" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#navigation","ARIA Navigtion Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_navigation","Navigation Landmark Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("nav")}}: ナビゲーションセクション要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#navigation">navigation (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="http://html5doctor.com/nav-element/">Semantic navigation with the nav element | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/region_role/index.html b/files/ja/web/accessibility/aria/roles/region_role/index.html new file mode 100644 index 0000000000..d986fecb65 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/region_role/index.html @@ -0,0 +1,138 @@ +--- +title: 'ARIA: region ロール' +slug: Web/Accessibility/ARIA/Roles/Region_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Region_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>region</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書内で、著者が重要であると識別した領域を識別するために使用されます。 これは、他のランドマークロールのどれも適切でないときでも、汎用のランドマークを提供することで、人々が容易にナビゲートできるようにするために使用されます。</span></p> + +<pre class="brush: html"><div role="region" aria-label="例"> + <!-- リージョンのコンテンツ --> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>region</code> ロールは、ARIA の<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>です。 ランドマークロールは、ウェブページの構成と構造を識別する方法を提供します。 ページのセクションを分類およびラベル付けすることにより、レイアウトを通じて視覚的に伝達される構造情報がプログラム的に表されます。 スクリーンリーダーは、ランドマークロールを使用して、ページの重要なセクションにキーボードナビゲーションを提供します。</p> + +<p><code>region</code> ロールは、ユーザーがそのセクションに簡単にナビゲートし、ページの要約にリストされることを望むほど重要なコンテンツのセクションのために予約するべきです。 <code>region</code> ロールはより汎用の用語であり、識別が必要なセクションが、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code> などの他のランドマークロールのいずれかによって正確に説明できない場合に使用するべきです。</p> + +<p><code>region</code> ロールを持つすべての要素には、リージョン（region）内のコンテンツの目的を説明するラベルを含めるべきで、目に見えるヘッダーを参照する <code>aria-labelledby</code> を伴うのが好ましいです。 目に見える適切なヘッダーがない場合は、<code>aria-label</code> を使用するべきです。</p> + +<p><code>region</code> ランドマークロールのコンテンツは、文書のメインコンテンツから分離されている場合にも意味をなすべきです。</p> + +<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素（この場合は <code><section></code>）を常に使用するべきです。</p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><span class="highlight-span">aria-labeledby</span></dt> + <dd>リージョンにラベルを付けるには、この属性を使用します。 多くの場合、<code>aria-labeledby</code> 属性の値は、セクションのタイトルに使用される要素の ID になります。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><div role="region" aria-labeledby="region-heading"> + <h2 id="region-heading"></span>この見出しの <code>id</code> 属性は、このリージョンがアクセス可能な名前を持つのに役立ちます<span class="tag"></h2> + <!-- </span>リージョンのコンテンツ<span class="tag"> --> +</div></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p>控えめに使用してください！ <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<p>他の関連<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング要素</a>または<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>が当てはまらない場合にのみ、<code>region</code> ロールを使用してください。 ページ上に複数のリージョンが存在する場合は、そのページの全体構造を再検討する価値があります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("section")}} 要素を使用すると、アクセス可能な名前が与えられている場合、自動的にセクションが <code>region</code> ロールを持つことを伝えます。 可能であれば、<code><section></code> を代わりに使用することをお勧めします。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<p>文書に複数の <code>region</code> ランドマークロールがある場合は、それぞれにラベルを付けます。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><div role="region" aria-labeledby="heading"> + <h3 id="use-discretion">慎重に <code>region</code> ロールを使用してください</h3> + <!-- コンテンツ --> +</div> + +... + +<div role="region" aria-labeledby="please-reconsider"> + <h3 id="please-reconsider">文書構造を再検討してください</h3> + <!-- コンテンツ --> +</div> +</pre> + +<p>この例では、リージョンのラベルは <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labeledby</a></code> 属性によって作成されています。</p> + +<h3 id="Scrolling_content_areas_with_overflow_text" name="Scrolling_content_areas_with_overflow_text">オーバーフローテキストを含むコンテンツ領域のスクロール</h3> + +<p><code>tabindex="0"</code> のコンテンツ領域がある場合は、<code>role="region"</code> を追加して、汎用のリージョンであるとスクリーンリーダーのユーザーに伝えます。 これは、キーボードのみのユーザーがオーバーフローテキストを含むリージョンをスクロールできるようにするためです。</p> + +<h3 id="SVG" name="SVG">SVG</h3> + +<p><a href="/ja/docs/Web/SVG/Element/svg">SVG</a> の個々のセクションを説明できるようにするために、SVG の領域上に <code>role="region"</code> を <code>aria-label</code> とともに宣言することができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#region","ARIA Region Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_region","Region landmark role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p> </p> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("section")}}: 汎用セクション要素</li> + <li><a href="https://www.w3.org/TR/wai-aria/#region">region (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> + <li><a href="http://html5doctor.com/the-section-element/">The section element | HTML5 Doctor</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/role_img/index.html b/files/ja/web/accessibility/aria/roles/role_img/index.html new file mode 100644 index 0000000000..748b3e3f47 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/role_img/index.html @@ -0,0 +1,125 @@ +--- +title: 'ARIA: img ロール' +slug: Web/Accessibility/ARIA/Roles/Role_Img +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Role_Img +--- +<div>\{{ariaref}}</div> + +<p>ARIA の <code>img</code> ロールは、単一の画像とみなすべきページコンテンツ内の複数の要素を識別するために使用できます。 これらの要素は、画像、コードスニペット、テキスト、絵文字、または視覚的に情報を伝達するために組み合わせることができる他のコンテンツであってもよい。</p> + +<pre class="brush: html"><div role="img" aria-label="全体的な画像の説明"> + <img src="graphic1.png" alt=""> + <img src="graphic2.png"> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="img"</code> を使用すると、単一の画像（画像、動画、音声、コードスニペット、絵文字、その他のコンテンツを含む）として消費されるべきコンテンツの集合を識別できます。</p> + +<p>支援技術へのコンテキストを伝えるために個々の画像要素の代替テキストを数えるべきではありません。 ほとんどのスクリーンリーダーは、<code>role="img"</code> を持つ要素をブラックボックスのように見て、内部の個々の要素にはアクセスしません。 したがって、周囲のテキストのいずれか、または <code>aria-label</code> 属性を使用して画像の包括的な全体説明的な代替テキストを提供します。 画像が欠ける場合は、検索エンジンまたはサイトユーザーのためのオプションの <code>alt</code> 属性を使用してページに書きます。</p> + +<pre class="brush: html"><div role="img" aria-label="全体的な画像の説明"> + <img src="graphic1.png" alt=""> + <img src="graphic2.png"> +</div></pre> + +<p>ページに表示される画像にキャプションまたはラベルを追加する場合は、次の方法を使用できます。</p> + +<ul> + <li>テキストが簡潔なラベルの場合は、<code>aria-labelledby</code>。</li> + <li>テキストがより長い説明である場合は、<code>aria-describedby</code>。</li> +</ul> + +<p>例えば、</p> + +<pre class="brush: html"><div role="img" aria-labelledby="image-1"> + ... + <p id="image-1">画像のグループを説明するテキスト。</p> +</div<strong>></strong></pre> + +<h3 id="SVG_and_roleimg" name="SVG_and_roleimg">SVG と role="img"</h3> + +<p>ページに埋め込み SVG 画像を使用している場合は、外側の <code><svg></code> 要素で <code>role="img"</code> を設定し、ラベルを付けることをお勧めします。 これにより、スクリーンリーダーは全ての子ノードを読み出すのではなく、単一の実体とみなし、ラベルを使用して説明します。</p> + +<pre class="brush: html"><svg role="img" aria-label="SVG 画像の説明"> + <!-- SVG 画像の内容 --> +</svg></pre> + +<h3 id="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied" name="Using_roleimg_to_confer_meaning_that_is_obscured_or_implied">role="img" を使用して、不明瞭や暗黙なものに意味を付与する</h3> + +<p>場合によっては、支援技術ユーザーは、特定の方法で、特定のメディアを通して、または特定の方法で暗示された内容の意味を得ることができません。 これは画像の場合では直すのは明らかです（<code>alt</code> 属性を使うことができます）が、混在したコンテンツや他の特定の種類のコンテンツの場合はそれほど明白ではないので、<code>role="img"</code> が有効になります。</p> + +<p>例えば、テキストに絵文字を使用した場合、その意味は目の見えるユーザーにとっては明白かもしれませんが、スクリーンリーダーを使用している人は、絵文字はテキスト表現を全く持たないか、代替テキストが紛らわしく、使用されているコンテキストと一致しない可能性があります。 例えば、次のコードです。</p> + +<pre class="brush: html"><div role="img" aria-label="その猫はとても面白い"> + <p> + &#x1F408; &#x1F602; + </p> +</div></pre> + +<p>&#x1F408; &#x1F602; の絵文字の実体参照は「猫」と「涙が出るほど嬉しい顔」で読み上げられますが、これは必ずしも意味をなしません — 暗黙の意味はおそらく「その猫はとても面白い」で、それを <code>aria-label</code> で <code>role="img"</code> と一緒に指定します。</p> + +<p>これはブラウザーやスクリーンリーダーの組み合わせによっては正常に動作するように見えますが、その中にはラベルを2度読んでしまうものもあります。 慎重に使用し、十分にテストしてください。</p> + +<p>これが適している別の例は、伝説的な「ちゃぶ台返し」のような ASCII 絵文字の組み合わせを使用する場合です。</p> + +<pre class="brush: html"><div role="img" aria-label="ちゃぶ台返し"> + <p> + (╯°□°）╯︵ ┻━┻ + </p> +</div></pre> + +<p> </p> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt>aria-label</dt> + <dd>アクセス可能な名前が必要です。 aria-label 属性</dd> + <dd> </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p> </p> + +<p> </p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li><a href="https://codepen.io/svinkle/pen/oYjoNE">星評価、role="img"の例</a></li> +</ul> + +<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","#img","img")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/row_role/index.html b/files/ja/web/accessibility/aria/roles/row_role/index.html new file mode 100644 index 0000000000..8cb4b15f96 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/row_role/index.html @@ -0,0 +1,231 @@ +--- +title: 'ARIA: row ロール' +slug: Web/Accessibility/ARIA/Roles/Row_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Row_Role +--- +<div>\{{ariaref}}</div> + +<p><code>role="row"</code> の要素は、表形式の構造内のセルの行（row）です。 行には、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の1つ以上のセル、グリッドセル、列ヘッダー、場合によっては行ヘッダーが含まれます。 オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内にも含まれます。</p> + +<pre class="brush: html"><div role="table" aria-label="人口" aria-describedby="country_population_desc"> + <div id="country_population_desc">国別世界人口</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="descending">国</span> + <span role="columnheader"aria-sort="none">人口</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">フィンランド</span> + <span role="cell">550 万</span> + </div> + <div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="row"</code> を持つ要素は、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> 内の行で、オプションで <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code> 内の行です。 行は、静的な表構造内の1つ以上の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role"><code>gridcell</code></a>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role"><code>columnheader</code></a>、<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role"><code>rowheader</code></a> のコンテナです。 可能であれば、ネイティブな <a href="/ja/docs/Web/HTML/Element/tr">HTML <code><tr></code></a> 要素を使用することを強く推奨します。</p> + +<p>ARIA の行を作成するには、コンテナ要素に <code>role="row"</code> を追加します。 その行は、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内にネストするべきです。 行のグループは、<code>grid</code>、<code>table</code>、<code>treegrid</code> 内に直接ネストすることができますし、これらのコンテナ内の <code>rowgroup</code> 内に配置することもできます。 それぞれの行には子のセルが含まれています。 これらのセルは、列ヘッダーや行ヘッダーやグリッドセルや普通のセルの異なるタイプのセルにすることができます。</p> + +<p>行には、<code>aria-colindex</code>、<code>aria-level</code>、<code>aria-rowindex</code>、<code>aria-selected</code> など、行のロールを明確にする属性だけでなく、多くの属性を含めることができます。</p> + +<p>行が <code>treegrid</code> 内にある場合、現在の状態を示す属性を使用して行を展開可能にするため、行に <code>aria-expanded</code> 属性を含めることができます。 これは、<code>aria-expanded</code> 属性が存在しない通常の <code>table</code> や <code>grid</code> の場合には当てはまりません。</p> + +<p>表形式の構造を持つ対話型のウィジェットを作成するには、代わりに <code>grid</code> のパターンを使用します。 インタラクションが個々のセルの選択状態を提供する場合や、上下左右のナビゲーションが提供されている場合や、ユーザインタフェースがセル順序の再配置を許可する場合や、ドラッグアンドドロップなどで個々のセル順序の変更が可能な場合は、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code> や <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></code> を使用します。</p> + +<div class="note"> +<p>注: 可能であれば、表の行要素（<code><tr></code>）と共にネイティブな HTML 表要素（<code><table></code>）を使用することを強く推奨します。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>オプションのコンテキスト上の行の親で、子孫となる行との間に関係を確立します。 これは、HTML 表要素の <code>thead</code>、<code>tfoot</code>、<code>tbody</code> 要素と構造的に同等です。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd><code>grid</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd><code>table</code> と <code>treegrid</code> と共に行が見つかる3つの可能なコンテキストの1つで、行がネイティブな <code><table></code> HTML 要素と同様に、行と列に配置されたデータを含む非対話型の表構造の一部であることを識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridtree_Role">role="treegrid"</a></dt> + <dd><code>grid</code> に似ていますが、<code>tree</code> と同じ方法で展開や折りたたみができる行があります。</dd> +</dl> + +<h4 id="Descendant_Roles" name="Descendant_Roles">子孫のロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">role="cell"</a></dt> + <dd>表形式のコンテナ内の行内のセル。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">role="gridcell"</a></dt> + <dd><code>grid</code> 内または <code>treegrid</code> 内の行内のセル。</dd> + <dt>role="columnheader"</dt> + <dd>列スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>columnheader</code> ロールは、対応する列の全てのセルとの関係を確立します。</dd> + <dt>role="rowheader"</dt> + <dd>行スコープを持つ HTML <code><th></code> 要素と構造的に同等なヘッダーセル。 プレーンなセルとは異なり、<code>rowheader</code> ロールは、対応する行の全てのセルとの関係を確立します。</dd> +</dl> + +<h4 id="States_and_Properties" name="States_and_Properties">ステートとプロパティ</h4> + +<dl> + <dt>aria-expanded ステート</dt> + <dd> + <p>行の状態を定義する <code>aria-expanded</code> 属性は、次の3つの値のいずれかを取るか省略することができます。</p> + + <ul> + <li><code>aria-expanded="true</code>: 行は現在展開されています。</li> + <li><code>aria-expanded="false"</code>: 行は現在折りたたまれています。</li> + <li><code>aria-expended="undefined"</code>、または属性がない: 行は展開も折りたたみもできません。</li> + </ul> + + <p><code>aria-expanded</code> 属性を持つ要素が、要素が '所有していない' 別のグループ化コンテナの展開を制御する場合、<code>aria-controls</code> 属性を使用してコンテナを参照するべきです（SHOULD）。</p> + </dd> + <dt>aria-selected ステート</dt> + <dd><code>grid</code> や <code>treegrid</code> などの対話型のコンテナ内に行がある場合のみ関連し、行が <code>table</code> の行の場合は関連しません。 <code>aria-selected</code> 属性は、次の3つの値のいずれかを取るか省略することができます。 + <ul> + <li><code>aria-selected="true</code>: 行は現在選択されています。</li> + <li><code>aria-selected="false"</code>: 行は現在選択されていません。</li> + <li><code>aria-selected="undefined"</code>、または属性がない: 行は選択できません。</li> + </ul> + </dd> + <dt>aria-colindex 属性</dt> + <dd> + <p><code>aria-colindex</code> 属性は、列が DOM から隠されている場合にのみ必要であり、一般的に行に置くことができるときに表示される列が連続していない限り、行自体ではなく行の子に配置されます。<br> + <br> + この属性は、値として、1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全列数の間の整数をとります。 <code>aria-colindex</code> は、行に配置されると、行内の全列数に対する要素の列インデックスまたは位置を定義します。 たとえば、表内に 15 列あり、4、5、6 列のみが DOM にある場合、全ての行に <code>aria-colindex="4"</code> を設定できます。<br> + <br> + DOM に存在する列のセットが連続して<strong>いない</strong>場合や、複数の行や列にまたがるセルがある場合は、行自体ではなく各行の全ての子に <code>aria-colindex</code> を配置します。</p> + + <p>全ての列が DOM 内にある場合、この属性は必要ありません。</p> + </dd> + <dt>aria-rowindex 属性</dt> + <dd> + <p><code>aria-rowindex</code> 属性は、行が DOM から隠されている場合にのみ必要で、全行のリスト内のどの行が読み込まれているかを示します。 属性は、それぞれの行に一意の値が設定され、値として、1 と <code>table</code>、<code>grid</code>、<code>treegrid</code> 内の全行数の間の整数をとり、各行の位置またはインデックスを示します。 たとえば、テーブル内に 1,500 行があり、47 行目と 52 行目とヘッダーのみが DOM にある場合は、ヘッダー行に <code>aria-rowindex="1"</code> が設定され、47 行目と 52 行目にそれぞれ <code>aria-rowindex="47"</code> と <code>aria-rowindex="52"</code> が設定されます。</p> + + <p>全ての行が DOM に存在する場合、この属性は必要ありません。</p> + </dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>無し。 ソート可能な列については、<code>columnheader</code> ロールを参照してください。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを追加してアクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能であれば、ARIA の <code>table</code> ロールの代わりに HTML の <code><table></code> 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、DOM 内に 81 行のうち 5 行が存在する意味論的でない ARIA の表です。 表のヘッダー内に 1 行、表の本体内に 4 行あります。 ヘッダー行は、ヘッダーの <code>rowgroup</code> 内に単独であり、2 つの列ヘッダーを持ちます。 列はソート可能ですが、<code>aria-sort</code> プロパティで示されているように、現在はソートされていません。 表の本体は別の <code>rowgroup</code> にあり、現在 DOM 内に 4 行あります。 全ての行が DOM 内にあるわけではないため、全ての行に <code>aria-rowindex</code> プロパティを追加しました。</p> + +<p> </p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、<code>table</code>、<code>tbody</code>、<code>thead</code>、<code>tr</code>、<code>th</code>、<code>td</code> などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の <code>display</code> プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre class="brush: html"><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none">ARIA のロール</th> + <th role="columnheader" aria-sort="none">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row" aria-rowindex="11"> + <td role="cell">header</td> + <td role="cell">h1</td> + </tr> + <tr role="row" aria-rowindex="16"> + <td role="cell">header</td> + <td role="cell">h6</td> + </tr> + <tr role="row" aria-rowindex="18"> + <td role="cell">rowgroup</td> + <td role="cell">thead</td> + </tr> + <tr role="row" aria-rowindex="24"> + <td role="cell">term</td> + <td role="cell">dt</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns">display プロパティを flex または grid</a> に設定すると表の行が消されます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</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","#row","ARIA row role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#row","ARIA row role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/tr">HTML 表の行要素</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html new file mode 100644 index 0000000000..56fdbe4014 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/rowgroup_role/index.html @@ -0,0 +1,163 @@ +--- +title: 'ARIA: rowgroup ロール' +slug: Web/Accessibility/ARIA/Roles/Rowgroup_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Rowgroup_Role +--- +<div>\{{ariaref}}</div> + +<p>role="rowgroup" を持つ要素は、表構造内の行（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code>）のグループです。 行グループ（<code>rowgroup</code>）には、グリッド(<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>)、表（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>）、またはツリーグリッド（<code>treegrid</code>）内のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）、または行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）の1つ以上の行が含まれます。</p> + +<pre class="brush: html"><div role="table" aria-label="人口" aria-describedby="country_population_desc"> + <div id="country_population_desc">国別世界人口</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="descending">国</span> + <span role="columnheader" aria-sort="none">人口</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">フィンランド</span> + <span role="cell">550 万</span> + </div> + <div role="row"> + <span role="cell">フランス</span> + <span role="cell">6700 万</span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>行グループ（<code>rowgroup</code>）は、所有する行（row）の要素間の関係を確立し、HTML の表ヘッダー（{{htmlelement("thead")}}）、表フッター（{{htmlelement("tfoot")}}） 、および表本体（{{htmlelement("tbody")}}）の要素と構造的に同等です。 ただし、異なる種類の行グループを区別することはできません。 それらの要素は、表（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code>）またはグリッド（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>）のロールを持つ要素に含まれているか、またはそれらの要素によって所有されている必要があります。 可能な限り、ネイティブの {{htmlelement("thead")}}、{{htmlelement("tfoot")}} 、および {{htmlelement("tbody")}} HTML 要素を使用することを強くお勧めします。</p> + +<p>ARIA の表ヘッダー、表フッター、または表本体を作成するには、<code>role="rowgroup"</code> を要素に追加します。 その行グループは、1つ以上の行のグループを含むグリッド、表、またはツリーグリッド内にネストする必要があります。 各行には子セルが含まれています。 これらのセルは、列ヘッダーか行ヘッダーか、プレーンなセルかグリッドセルかによって、さまざまなタイプにすることができます。</p> + +<div class="note"> +<p><strong>注</strong>: 可能であれば、ネイティブの HTML 表要素（<code><table></code>）を表ヘッダー（<code><thead></code>）、表フッター（<code><tfoot></code>）、および表本体（<code><tbody></code>）の要素と共に使用することを強くお勧めします。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<h4 id="Context_Roles" name="Context_Roles">コンテキストロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">role="table"</a></dt> + <dd>行を見つけることができる3つのコンテキスト（グリッドとツリーグリッドを含む）の1つで、ネイティブの <code><table></code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">role="grid"</a></dt> + <dd>行を見つけることができる3つのコンテキスト（表とツリーグリッドを含む）の1つで、ネイティブの <code><table></code> HTML 要素と同様に、行と列に配列されたデータを含む非インタラクティブな表構造の一部として行を識別します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">role="treegrid"</a></dt> + <dd>グリッドと似ていますが、ツリーの場合と同じ方法で行を展開したり折りたたんだりすることができます。</dd> +</dl> + +<h4 id="Descendant_Roles" name="Descendant_Roles">子孫のロール</h4> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd>表構造内のセルの行。 行には、1つ以上のセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）、グリッドセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></code>）、または列ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code>）が含まれ、場合によっては行ヘッダー（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/rowheader_Role">rowheader</a></code>）も含まれます。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<p>無し。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを<strong>追加して</strong>アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code> ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は、表ヘッダーと表本体を持つ非意味論的な ARIA の表で、DOM には81行のうち5行が含まれています。 表ヘッダー内に1行、表本体内に4行あります。 ヘッダー行は、ヘッダーの行グループに単独であり、2つの列ヘッダーを持ちます。 <code>aria-sort</code> プロパティで示されるように、列はソート可能ですが、現在はソートされていません。 表本体は独立した行グループで、現在 DOM には4行あります。 すべての行が DOM 内にあるわけではないので、すべての行に <code>aria-rowindex</code> プロパティを含めました。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、{{htmlelement("table")}}、{{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の {{cssxref("display")}} プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<pre class="brush: html"><table role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <caption id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</caption> + <thead role="rowgroup"> + <tr role="row"> + <th role="columnheader" aria-sort="none">ARIA のロール</th> + <th role="columnheader" aria-sort="none">意味論的な要素</th> + </tr> + </thead> + <tbody role="rowgroup"> + <tr role="row" aria-rowindex="11"> + <td role="cell">header</td> + <td role="cell">h1</td> + </tr> + <tr role="row" aria-rowindex="16"> + <td role="cell">header</td> + <td role="cell">h6</td> + </tr> + </tbody> + </table></pre> + +<p>上記は表を書く意味論的な方法です。 ARIA のロールは、表のネイティブな意味論の場合にのみ必要です。 したがって、<a href="/ja/docs/Web/CSS/display#Accessibility_concerns"><code>display</code> プロパティを <code>flex</code> または <code>grid</code> に</a>設定すると表の行が消されます。<br> + </p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</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","#rowgroup","ARIA rowgroup role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/table">HTML の表</a></li> + <li><a href="/ja/docs/Web/HTML/Element/tbody">HTML の表本体</a></li> + <li><a href="/ja/docs/Web/HTML/Element/tfoot">HTML の表フッター</a></li> + <li><a href="/ja/docs/Web/HTML/Element/thead">HTML の表ヘッダー</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.html b/files/ja/web/accessibility/aria/roles/search_role/index.html new file mode 100644 index 0000000000..df6ac80cd3 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/search_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: search ロール' +slug: Web/Accessibility/ARIA/Roles/Search_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Search_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><code>search</code> <a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、ページ、サイト、またはサイトのコレクションを検索するために使用されるページのセクションを識別するために使用されます。</span></p> + +<pre class="brush: html"><form role="search"> + <!-- 検索入力 --> +</form> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>search</code> ロールは<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを迅速に識別してナビゲートすることができます。 <code>search</code> ロールは、全体として結合して検索（search）機能を作成するアイテムおよびオブジェクトを包含するコンテナ要素に追加します。 <code><form></code> が検索フォームの場合、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> ロールの代わりに <code>search</code> ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 <a href="/ja/docs/Web/HTML/Element/input/search"><code>search</code> 型の <code><input></code> 要素</a>があるなら、<code>search</code> ランドマークを定義する HTML 要素があります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre><span class="tag"><form id="search" role="search"> +</span> <label for="search-input">このサイトを検索</label> + <input type="search" id="search-input" name="search" spellcheck="false"> + <input value="検索する" type="submit"> +<span class="tag"></form></span> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティに関する懸念</h2> + +<p><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール</a>は、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<h3 id="Prefer_HTML" name="Prefer_HTML">好ましい HTML</h3> + +<p>{{htmlelement("form")}} 要素を <code>role="search"</code> の宣言とともに使用すると、最大限のサポートが得られます。</p> + +<h3 id="Labeling_landmarks" name="Labeling_landmarks">ランドマークのラベル付け</h3> + +<h4 id="Multiple_landmarks" name="Multiple_landmarks">複数のランドマーク</h4> + +<p>文書に複数の <code>search</code> ランドマークロールがある場合は、各ランドマークに対してラベルを指定します。 このラベルで、支援技術のユーザーがそれぞれのランドマークの目的をすばやく理解することができます。</p> + +<pre class="brush: html"><form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> +</form> + +... + +<form id="page-search" role="search" aria-label="このページ"> + <!-- 検索入力 --> +</form> +</pre> + +<h4 id="Repeated_landmarks" name="Repeated_landmarks">繰り返されるランドマーク</h4> + +<p>文書内の <code>search</code> ランドマークロールが文書内で繰り返され、両方のランドマークのコンテンツが同じ場合は、各ランドマークに同じラベルを使用します。 この例では、ページの上部と下部でサイト全体の検索が繰り返されています。</p> + +<pre class="brush: html"><header> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</header> + +... + +<footer> + <form id="site-search" role="search" aria-label="サイト全体"> + <!-- 検索入力 --> + </form> +</footer> +</pre> + +<h4 id="Redundant_descriptions" name="Redundant_descriptions">冗長な説明</h4> + +<p>スクリーンリーダーは、ランドマークロールの種類をアナウンスします。 このため、ラベルでランドマークが何であるかを説明する必要はありません。 例えば、<code>aria-label="サイト全体の検索"</code> の <code>role="search"</code> の宣言は、"search サイト全体の検索" として重複してアナウンスすることができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>ブラウザー拡張などの特定の技術は、ページ上に存在する全てのランドマークロールのリストを生成することができ、非スクリーンリーダーユーザーは文書の大きなセクションを素早く識別してナビゲートできます。</p> + +<ul> + <li><a href="http://matatk.agrip.org.uk/landmarks/">ランドマークブラウザー拡張</a>（英語）</li> +</ul> + +<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","#search","ARIA search role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#aria_lh_search","ARIA search role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support" name="Screen_reader_support">スクリーンリーダーのサポート</h2> + +<p>TBD</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("form")}}: フォーム要素</li> + <li><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></li> + <li><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">HTML5 ドキュメントのセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマークロール: ARIA を使用する: ロール、ステート、プロパティ</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013 | The Paciello Group</a></li> + <li><a href="https://www.scottohara.me/blog/2018/03/03/landmarks.html">Accessible Landmarks | scottohara.me</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/switch_role/index.html b/files/ja/web/accessibility/aria/roles/switch_role/index.html new file mode 100644 index 0000000000..ea926c66ec --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/switch_role/index.html @@ -0,0 +1,187 @@ +--- +title: 'ARIA: switch ロール' +slug: Web/Accessibility/ARIA/Roles/Switch_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Switch_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary">ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと機能的に同じですが、"checked" と "unchecked" の状態を表す代わりに、その意味ではかなり一般的なもので、<code>switch</code> ロールは、「オン」と「オフ」の状態を表します。</span></p> + +<p>この例では、ウィジェットを作成し、ARIA の <code>switch</code> ロールを割り当てます。</p> + +<pre><button role="switch" aria-checked="true" + id="speakerPower" class="switch"> + <span>オフ</span> + <span>オン</span> + </button> + <label for="speakerPower" class="switch">スピーカー電源</label></pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>ARIA の <code>switch</code> ロールは、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> ロールと同じですが、"checked" や "unchecked" ではなく、「オン」と「オフ」のどちらかです。 <code>checkbox</code> ロールと同様に、<code>aria-checked</code> 属性が必要です。 可能な2つの値は <code>true</code> と <code>false</code> です。 <code><checkbox></code> や <code>role="checkbox"</code> とは異なり、不確定な状態（<code>indeterminate</code>）や混在した状態（<code>mixed</code>）はありません。 <code>switch</code> ロールは、<code>aria-checked</code> 属性に <code>mixed</code> の値をサポートしていません。 <code>switch</code> に <code>mixed</code> の値を割り当てると、代わりに値を <code>false</code> に設定します。</p> + +<p>支援技術は、オン/オフスイッチの概念を反映するために、スイッチウィジェットを専門化したプレゼンテーションで表現することを選択することができます。</p> + +<p>スイッチはインタラクティブなコントロールなので、フォーカス可能でキーボードによりアクセス可能でなければなりません。 ロールがフォーカス可能でない要素に適用されている場合は、<code>tabindex</code> 属性を使用してこれを変更します。 スイッチの値を切り替えるために必要なキーボードショートカットは<kbd>スペース</kbd>キーです。 開発者は、スイッチがトグルされたときに、<code>aria-checked</code> 属性の値を動的に変更する必要があります。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties" name="Associated_ARIA_roles_states_and_properties">関連する ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><code>aria-checked</code> 属性</dt> + <dd><code>aria-checked</code> 属性は、<code>switch</code> ロールを使用する場合に<strong>必要</strong>です。 これは、<code>switch</code> ロールが適用されているウィジェットの現在の状態を表すためです。 <code>true</code> の値は「オン」状態を表します。 <code>false</code> の値は「オフ」状態を表します。 <code>mixed</code> の値は <code>switch</code> ロールでサポートされておらず、<code>false</code> として扱われます。 デフォルト値は <code>false</code> です。</dd> + <dt><code>aria-readonly</code> 属性</dt> + <dd><code>aria-readonly</code> 属性は、<code>switch</code> ロールでサポートされています。 ウィジェットの状態がユーザーによって編集可能かどうかを示します。 <code>false</code> の値は、ユーザーがウィジェットの状態を変更できることを意味します。 <code>true</code> の値は、ユーザーがウィジェットの状態を変更できないことを意味します。 デフォルト値は <code>false</code> です。</dd> +</dl> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> + <dt><code>click</code> イベントのハンドラ</dt> + <dd>ユーザーがスイッチウィジェットをクリックすると、<a href="/ja/docs/Web/Reference/Events/click"><code>click</code> イベント</a>が発生します。 これは、ウィジェットの状態を変更するために処理する必要があります。</dd> + <dt><code>aria-checked</code> 属性の変更</dt> + <dd>スイッチウィジェットで <code>click</code> イベントが発生した場合、ハンドラは <code>aria-checked</code> 属性の値を <code>true</code> から <code>false</code> やその逆に変更する必要があります。</dd> +</dl> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p><code>switch</code> ロールが要素に追加されると、{{Glossary("user agent","ユーザーエージェント")}}は次のようにそれを処理します。</p> + +<ul> + <li>要素は、<code>switch</code> ロールを持つものとしてシステムのアクセシビリティインフラストラクチャに公開されます。</li> + <li><code>aria-checked</code> 属性の値が変更されると、アクセス可能なイベントが使用可能で、<code>switch</code> ロールをサポートしている場合、アクセス可能なイベントがシステムのアクセシビリティ API を使用して起動されます。</li> + <li>switch ロールが適用された要素の子孫であるすべての要素には、ロールのプレゼンテーションが自動的に割り当てられます。 これにより、スイッチを構築するために使用する要素が、支援技術によって個別に相互作用するのを防ぎます。 これらの要素のテキストは、{{cssxref("display", "display: none")}} または aria-hidden="true" を使用して明示的に隠されていない限り、ユーザーエージェントに表示されたままになり、ユーザーが読んだり、別の方法で届けられる可能性があります。</li> +</ul> + +<p>支援技術は、<code>switch</code> ロールをサポートしている場合は、次のように応えます。</p> + +<ul> + <li>スクリーンリーダーは、要素をスイッチとしてアナウンスする必要があります。 オプションでスイッチをアクティブにする方法についての指示を提供します。</li> +</ul> + +<div class="note"> +<p>支援技術がこのロールをどのように処理すべきかについて、さまざまな意見があります。 上記は推奨される方法であり、他の情報源とは異なる場合があります。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、<code>switch</code> ロールを適用して使用する方法を理解するのに役立ちます。</p> + +<h3 id="Adding_the_switch_role_in_ARIA" name="Adding_the_switch_role_in_ARIA">ARIA で switch ロールを追加する</h3> + +<p>この単純な例では、ウィジェットを作成して ARIA の <code>switch</code> ロールを割り当てます。 このボタンは、オン/オフの電源スイッチを連想させるような外観になっています。</p> + +<h4 id="HTML" name="HTML">HTML</h4> + +<p>HTML はここではかなり簡単です。 スイッチは {{HTMLElement("button")}} 要素として実装され、最初に <code>aria-checked</code> 属性が <code>"true"</code> に設定されているかどうかチェックされます。 スイッチには、"off" と "on" のラベルを含む2つの子要素があり、スイッチを識別する {{HTMLElement("label")}} が続きます。</p> + +<pre class="brush: html"><button role="switch" aria-checked="true" + id="speakerPower" class="switch"> + <span>off</span> + <span>on</span> +</button> +<label for="speakerPower" class="switch">Speaker power</label> +</pre> + +<h4 id="JavaScript" name="JavaScript">JavaScript</h4> + +<p>この JavaScript コードは、スイッチウィジェットの <code>click</code> イベントを処理する関数を定義して適用します。 この関数は、<code>aria-checked</code> 属性を <code>true</code> から <code>false</code> やその逆に変更します。</p> + +<pre class="brush: js">document.querySelectorAll(".switch").forEach(function(theSwitch) { + theSwitch.addEventListener("click", handleClickEvent, false); +}); + +function handleClickEvent(evt) { + let el = evt.target; + + if (el.getAttribute("aria-checked") == "true") { + el.setAttribute("aria-checked", "false"); + } else { + el.setAttribute("aria-checked", "true"); + } +}</pre> + +<h4 id="CSS" name="CSS">CSS</h4> + +<p>CSS の目的は、電源スイッチのパラダイムを思い起こさせるスイッチのルックアンドフィールを確立することです。</p> + +<pre class="brush: css">button.switch { + margin: 0; + padding: 0; + width: 60px; + height: 26px; + border: 2px solid black; + display: inline-block; + margin-right: 0.25em; + line-height: 20px; + vertical-align: middle; + text-align: center; + font: 12px "Open Sans", "Arial", serif; +} + +button.switch span { + padding: 0 4px;} + +[role="switch"][aria-checked="false"] :first-child, +[role="switch"][aria-checked="true"] :last-child { + background: #262; + color: #eef; +} + +[role="switch"][aria-checked="false"] :last-child, +[role="switch"][aria-checked="true"] :first-child { + color: #bbd; +} + +label.switch { + font: 16px "Open Sans", "Arial", sans-serif; + line-height: 20px; + user-select: none; + vertical-align: middle; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +}</pre> + +<p>最も興味深いのは、おそらく属性セレクタと {{cssxref(":first-child")}} と {{cssxref(":last-child")}} の擬似クラスを使用して、スイッチのオン/オフに応じてスイッチの外観を変えるということです。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Adding_the_switch_role_in_ARIA", 600, 40)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ARIA', '#switch')}}</td> + <td>{{Spec2('ARIA')}}</td> + <td>一般的に ARIA をすべてのロール、プロパティなどとともに定義します。</td> + </tr> + <tr> + <td>{{SpecName('ARIA in HTML', '#index-aria-switch')}}</td> + <td>{{Spec2('ARIA in HTML')}}</td> + <td>ARIA の機能を HTML に統合する方法について説明します。</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">ARIA: checkbox ロール</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/table_role/index.html b/files/ja/web/accessibility/aria/roles/table_role/index.html new file mode 100644 index 0000000000..4d98392f80 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/table_role/index.html @@ -0,0 +1,154 @@ +--- +title: 'ARIA: table ロール' +slug: Web/Accessibility/ARIA/Roles/Table_Role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/Table_Role +--- +<div>\{{ariaref}}</div> + +<p>ARIA の role 属性の table 値は、このロールを含む要素を、ネイティブの {{htmlelement("table")}} HTML 要素と同様に、行と列に配置されたデータを含む非インタラクティブな表構造を持つものとして識別します。</p> + +<pre class="brush: html"><div role="table" aria-label="意味論的な表の要素" aria-describedby="semantic_table_desc"> + <div id="semantic_table_desc">ARIA の table ロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader">ARIA の table ロール</span> + <span role="columnheader">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row"> + <span role="cell">table</span> + <span role="cell">table</span> + </div> + <div role="row"> + <span role="cell">rowgroup</span> + <span role="cell">thead, tbody, or tfoot </span> + </div> + </div> +</div> +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>role="table"</code> を持つ要素はセルを含む行を持つ静的な表構造です。 表の個々のセル内のウィジェットはインタラクティブになることがありますが、セルはフォーカス可能または選択可能ではありません。 可能な限りネイティブの HTML {{htmlelement("table")}} 要素を使用することを強くお勧めします。</p> + +<div class="warning"> +<p>表が選択状態を維持している場合、2次元ナビゲーションを使用している場合、またはユーザーがセルの順序を並べ替えることができる場合は、代わりにグリッド（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code>）またはツリーグリッド（<code><a href="/ja/docs/">treegrid</a></code>）を使用します。</p> +</div> + +<p>ARIA の表を作成するには、<code>role="table"</code> をコンテナ要素に追加します。 そのコンテナ内では、各行に <code>role="row"</code> を設定し、子セルを含ませます。 各セルには、列ヘッダー（<code>columnheader</code>）、行ヘッダー（<code>rowheader</code>）、または単なるセル（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code>）のいずれかのロールがあります。 行は、表の子になることも、行グループ（<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code>）内になることもあります。</p> + +<p>表のキャプションは、<code>aria-labelledby</code>、<code>aria-label</code>、または <code>aria-describeby</code> によって定義できます。 {{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} など、他のすべての意味論的な表の要素は、<code>rowgroup</code>、<code>row</code>、<code>columnheader</code>、<code>cell</code> などの関連するロールを介して追加する必要があります。</p> + +<p>表にソート可能な列または行が含まれる場合は、<code>aria-sort</code> 属性をヘッダーのセル要素に追加する必要があります（表自体ではありません）。 ある行または列が隠されている場合は、それぞれのセルの <code>aria-colindex</code> または <code>aria-rowindex</code> とともに、それぞれ列または行の総数を示す <code>aria-colcount</code> または <code>aria-rowcount</code> を含める必要があります。 <code>aria-colindex</code> または <code>aria-rowindex</code> は、それぞれ行または列内のセルの位置に設定します。 表に複数行または複数列にわたるセルが含まれる場合は、<code>aria-rowspan</code> または <code>aria-colspan</code> も含める必要があります。 すべての支援技術でサポートされているすべての関連する意味論的な要素および属性と共に、{{htmlelement("table")}} 要素を単純に使用する方がはるかに簡単です。</p> + +<p>表構造を持つインタラクティブなウィジェットを作成するには、代わりにグリッドパターンを使用してください。 インタラクションが個々のセルの選択状態を提供する場合、左から右へ、上から下へのナビゲーションを提供する場合、またはユーザーインターフェイスでセルの順序の並べ替えやドラッグアンドドロップなどの個々のセルの順序の変更を許可する場合、代わりに <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a></code> または <code><a href="/ja/docs/">treegrid</a></code> を使用してください。</p> + +<div class="note"> +<p><strong>注</strong>: 可能な限りネイティブの <a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML の表要素</a>を使用することを強くお勧めします。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties" name="Associated_WAI-ARIA_Roles_States_and_Properties">関連する WAI-ARIA のロール、ステート、プロパティ</h3> + +<dl> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">role="rowgroup"</a></dt> + <dd>表のオプションの子である行グループは、{{htmlelement("thead")}}、{{htmlelement("tbody")}}、および {{htmlelement("tfoot")}} と同様に、行のグループをカプセル化します。</dd> + <dt><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">role="row"</a></dt> + <dd>表内の行、およびオプションで行グループ（<code>rowgroup</code>）内の行、つまり1つ以上のセル（<code>cell</code>）、列ヘッダー（<code>columnheader</code>）、または行ヘッダー（<code>rowheader</code>）のコンテナです。</dd> + <dt>aria-describedby 属性</dt> + <dd>値として、表のキャプションとして機能する要素の <code>id</code> を取ります。</dd> + <dt>aria-label 属性</dt> + <dd><code>aria-label</code> は、表にアクセス可能な名前を提供します。</dd> + <dt>aria-colcount 属性</dt> + <dd> + <p>この属性は、ある列が常に DOM に存在しない場合にのみ必要です。 全表の列数を明示的に示します。 値を全表の列の総数に設定します。 不明な場合は、<code>aria-colcount="-1"</code> を設定してください。</p> + </dd> + <dt>aria-rowcount 属性</dt> + <dd>この属性は、DOM ノードの数を最小限に抑えるために行を再利用するスクロール可能な表など、ある行が常に DOM に存在しない場合にのみ必要です。 全表の行数を明示的に示します。 値を全表の行の総数に設定します。 不明な場合は、<code>aria-rowcount="-1"</code> を設定してください。</dd> +</dl> + +<h3 id="Keyboard_Interactions" name="Keyboard_Interactions">キーボードインタラクション</h3> + +<p>無し</p> + +<h3 id="Required_JavaScript_features" name="Required_JavaScript_features">必要な JavaScript 機能</h3> + +<dl> +</dl> + +<p>無し。 ソート可能な列については、 <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">columnheader</a></code> ロールを参照してください。</p> + +<div class="note"> +<p>ARIA の最初のルールは、要素を再定義し、ARIA のロール、ステート、プロパティを<strong>追加して</strong>アクセス可能にするのではなく、すでに組み込まれている意味論と挙動を持つネイティブな機能を使用できることです。 可能な限り、ARIA の <code>table</code> ロールの代わりに HTML の {{htmlelement("table")}} 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><div role="table" aria-label="意味論的な要素" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> + <div id="semantic_elements_table_desc">ARIA のロールの代わりに使用する意味論的な要素</div> + <div role="rowgroup"> + <div role="row"> + <span role="columnheader" aria-sort="none">ARIA のロール</span> + <span role="columnheader" aria-sort="none">意味論的な要素</span> + </div> + </div> + <div role="rowgroup"> + <div role="row" aria-rowindex="11"> + <span role="cell">header</span> + <span role="cell">h1</span> + </div> + <div role="row" aria-rowindex="16"> + <span role="cell">header</span> + <span role="cell">h6</span> + </div> + <div role="row" aria-rowindex="18"> + <span role="cell">rowgroup</span> + <span role="cell">thead</span> + </div> + <div role="row" aria-rowindex="24"> + <span role="cell">term</span> + <span role="cell">dt</span> + </div> + </div> +</div> +</pre> + +<p>上記は表の一部です。 <code>aria-rowcount</code> プロパティで示されるように、全表には81のエントリがありますが、現在表示されているのは4つだけです。 列ヘッダーの <code>aria-sort</code> プロパティで示されるように、列はソート可能ですが、現在はソートされていません。</p> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>データ表構造には、{{htmlelement("table")}}、{{htmlelement("tbody")}}、{{htmlelement("thead")}}、{{htmlelement("tr")}}、{{htmlelement("th")}}、{{htmlelement("td")}} などのみを使用します。 アクセシビリティを確保するために ARIA のロールを追加し、例えば CSS で表のネイティブな意味論を削除するべきです。 ARIA の <code>table</code> ロールの関連するユースケースは、<code>display: grid</code> など、CSS の {{cssxref("display")}} プロパティによって表のネイティブな意味論がオーバーライドされる場合です。 この場合、ARIA の <code>table</code> ロールを使用して意味論を戻すことができます。</p> + +<h3 id="Added_benefits" name="Added_benefits">追加された利点</h3> + +<p>無し</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","#table","ARIA Table Role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#table","ARIA Table Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML の表要素</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Grid_Role">ARIA: grid ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/roles/textbox_role/index.html b/files/ja/web/accessibility/aria/roles/textbox_role/index.html new file mode 100644 index 0000000000..6597033574 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/textbox_role/index.html @@ -0,0 +1,130 @@ +--- +title: 'ARIA: textbox ロール' +slug: Web/Accessibility/ARIA/Roles/textbox_role +tags: + - ARIA + - ARIA Role + - Accessibility +translation_of: Web/Accessibility/ARIA/Roles/textbox_role +--- +<p>\{{ariaref}}<span class="seoSummary"><code>textbox</code> ロールは、自由形式テキストの入力を可能にする要素を識別するために使用されます。</span> 可能であれば、このロールを使用するのではなく、単一行入力の場合は <code><a href="/ja/docs/Web/HTML/Element/input/text">type="text"</a></code> の {{HTMLElement("input")}} 要素を使用し、複数行入力の場合は {{HTMLElement("textarea")}} 要素を使用してください。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p class="p2">要素に <code>textbox</code> ロールがある場合、ブラウザーはアクセス可能なテキストボックスイベントを支援技術に送信し、ユーザーにそのことを通知できます。</p> + +<p class="p2">デフォルトは単一行入力で、<kbd>Return</kbd> や <kbd>Enter</kbd> はフォームを送信します。 この場合、 <code>type="text"</code> の HTML の {{HTMLElement("input")}} を使用することをお勧めします。 HTML の {{HTMLElement("textarea")}} のように改行をサポートする複数行のテキストボックスを作成するには、<code>aria-multiline="true"</code> を設定します。 HTML の <code>contenteditable</code> 属性を含めると、テキストノードが確実に編集可能になります。</p> + +<pre class="brush: html"><!-- 単純なテキスト入力フィールド --> +<div id="txtboxLabel">5桁の郵便番号を入力してください</div> +<div role="textbox" contenteditable="true" aria-placholder="5-digit zipcode" aria-labeledby="txtboxLabel"></div> + +<!-- 複数行のテキスト領域 --> +<div id="txtboxMultilineLabel">記事のタグを入力してください</div> +<div role="textbox" contenteditable="true" aria-multiline="true" + aria-labeledby="txtboxMultilineLabel" aria-required="true"></div> </pre> + +<p>意味論的な要素はより簡潔であり、テキストボックス機能をサポートするために JavaScript を必要としません。</p> + +<p> </p> + +<pre class="brush: html"><label for="txtbox">5桁の郵便番号を入力してください</label> +<input type="text" placholder="5-digit zipcode" id="txtbox"/> + +<!-- 複数行のテキスト領域 --> +<label for="txtboxMultiline">記事のタグを入力してください</lable> +<textarea id="txtboxMultiline" required></textarea> </pre> + +<p> </p> + +<p class="p2">テキストフィールドが読み取り専用の場合、要素に対して <code>aria-readonly="true"</code> と設定することでこれを示します。</p> + +<dl> +</dl> + +<h3 id="Associated_ARIA_properties" name="Associated_ARIA_properties">関連する ARIA のプロパティ</h3> + +<dl> + <dt><code>aria-activedescendent</code> 属性</dt> + <dd>その値として、ID は DOM のフォーカスを持つ要素の子孫であるか、または <code>aria-owns</code> 属性で指定された論理的子孫であり、<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/combobox">combobox</a></code> などの複合ウィジェットの一部であるときに、その要素にフォーカスがあるときを示します。 たとえば、コンボボックスでは、テキストボックスにフォーカスが残ることがありますが、<code>textbox</code> 要素の <code>aria-activedescendant</code> の値は、テキストボックスによって制御されるポップアップリストボックスの子孫を参照します。 この属性は、フォーカスが変更されるとプログラムで更新する必要があります。</dd> + <dt><code>aria-autocomplete</code> 属性</dt> + <dd>フィールドへのユーザーの入力が、意図した値の予測の表示をトリガーできるかどうか、およびその方法を示します。 これは以下の値をサポートしています。 + <ul> + <li><code>inline</code>: 予測されたテキストがキャレットの後に挿入されます。</li> + <li><code>list</code>: 予測されたテキストは、値の集まりとして提示されます。</li> + <li><code>both</code>: 予測されたテキストは、値の集まりとして提示され、補完に必要なテキストの1つの値がキャレットの後に挿入されます。</li> + <li><code>none</code>（デフォルト）: 予測されたテキストは提供されません。</li> + </ul> + + <p><code>list</code> または <code>both</code> が設定されている場合は、<code>aria-controls</code> 属性と<code> aria-haspopup</code> 属性も含める必要があります。 <code>aria-controls</code> の値は、提案値のリストを含む要素の ID です。 さらに、テキストボックスまたは <code>combobox</code> ロールを含む包含要素のいずれかに、提案値のリストを含む要素のロールに一致する <code>aria-haspopup</code> の値を持ちます。</p> + </dd> + <dt><code>aria-multiline</code> 属性</dt> + <dd><code>aria-multiline="true"</code> が設定されている場合、支援技術は、テキストボックスが複数行入力をサポートしていることをユーザーに知らせます。 <kbd>Enter</kbd> や <kbd>Return</kbd> はフォームを送信するのではなく改行を作成します。 ARIA は要素の動作を変更しません。 むしろ、この機能は開発者によって制御されなければなりません。 <code>false</code> が設定されている場合、または属性が省略されていて <code>false</code> がデフォルトの場合、ユーザーはコントロールが単一行のテキストボックスであり、<kbd>Enter</kbd> や <kbd>Return</kbd> がフォームを送信することを期待しています。</dd> + <dt><code>aria-placeholder</code> 属性</dt> + <dd>テキストフィールドに何を入力するかについてのヒント（単語またはフレーズ）をユーザーに示します。 ヒントは、サンプル値または期待されるフォーマットの簡単な説明であるべきです。 この情報は、ラベルの代用として使用するべきではありません。 ラベルはフォーカス可能で永続的で、どのような情報が期待されているかを示し、プレースホルダーのテキストは期待値を一時的に示唆しているだけで、誤って実装するとアクセシビリティが低下する可能性があります。 プレースホルダーは、コントロールが最初にフォーカスを受け取ったときやユーザーが以前に入力した値を削除したときなど、コントロールの値が空の文字列のときに表示するべきです。 <code>aria-placeholder</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>placeholder</code> 属性を使用します。</dd> + <dt><code>aria-readonly</code> 属性</dt> + <dd>ユーザーがテキストフィールドの値を変更できないことを示します。 <code>aria-readonly</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>readonly</code> 属性を使用します。</dd> + <dt><code>aria-required</code> 属性</dt> + <dd>フィールドが送信される前にフィールドに値を指定する必要があることを示します。 <code>aria-required</code> を使用する代わりに、意味論的な <code><input type="text"></code> や <code><textarea></code> に <code>required</code> 属性を使用します。</dd> +</dl> + +<h3 id="Keyboard_interactions" name="Keyboard_interactions">キーボードインタラクション</h3> + +<p>単一行での使用（<code>aria-multiline</code> が <code>false</code> または使用されていない場合）では、<kbd>Return</kbd> キーや <kbd>Enter</kbd> キーがフォームを送信します。 複数行での使用（<code>aria-multiline</code> が <code>true</code> の場合）では、<kbd>Return</kbd> キーや <kbd>Enter</kbd> キーを押すと改行が挿入されます。</p> + +<h3 id="JavaScript_features" name="JavaScript_features">必要な JavaScript 機能</h3> + +<p>すべてのプロパティとステートに関連するすべての機能を維持する必要があります。 また、単一行のテキストボックスにおいて <kbd>Enter</kbd> や <kbd>Return</kbd> でフォームを送信する必要があります。</p> + +<dl> + <dt>フォーカスイベントハンドラと aria-activedescendent 属性</dt> + <dd>テキストボックスとリストボックスで構成されるコンボボックスなどの複合ウィジェットを実装する場合は、ハンドラを使用して <code>aria-activedescendent</code> 属性を管理する必要があります。 この手法を使用する前に、ターゲットとするブラウザーが現在サポートしていることを確認してください。 詳細については、<a href="https://www.w3.org/TR/wai-aria/#aria-activedescendant">aria-descendent の仕様</a>（英語）を参照してください。</dd> +</dl> + +<div class="note"> +<p>ARIA の <code>textbox</code> ロールの代わりに <code>type="text"</code> の {{HTMLElement("input")}} 要素、または {{HTMLElement("textarea")}} 要素を使用する方が良い方法です。 どちらの意味論的な要素を使用する場合でも、ARIA の <code>textbox</code> ロールは必要ありません。 <a href="https://www.w3.org/TR/aria-in-html/">HTML で ARIA を使用する場合の注意</a>（英語）を参照してください。</p> +</div> + +<h2 id="Possible_effects_on_user_agents_and_assistive_technology" name="Possible_effects_on_user_agents_and_assistive_technology">ユーザーエージェントと支援技術への影響</h2> + +<p class="p1"><code>textbox</code> ロールが要素に追加されるか、そのような要素が可視になると、ユーザーエージェントは以下を行うべきです。</p> + +<ul class="ul1"> + <li class="li2">オペレーティングシステムのアクセシビリティ API で <code>textbox</code> ロールを持つものとして要素を公開します。</li> + <li class="li2">オペレーティングシステムのアクセシビリティ API をサポートしている場合は、アクセシビリティ API を使用してアクセス可能なテキストボックスイベントを発生させます。</li> +</ul> + +<p class="p1">支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するするべきです。</p> + +<ul class="ul1"> + <li class="li2">スクリーンリーダーは、フォーカスが最初にテキストボックスに着くと、そのラベルとロールをアナウンスするべきです。 コンテンツも含まれている場合は、これを通常のテキストボックスの場合と同様にアナウンスするべきです。</li> + <li class="li2">スクリーン拡大鏡でテキストボックスが拡大されることがあります。</li> +</ul> + +<div class="note"><strong>注</strong>: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Adding_the_role_in_the_HTML_code_for_single_line_input" name="Example_1_Adding_the_role_in_the_HTML_code_for_single_line_input">例 1: 単一行入力の HTML コードにロールを追加する</h3> + +<p class="p2">以下のスニペットは、<code>textbox</code> ロールが HTML ソースコードにどのように直接追加されるかを示しています。</p> + +<pre class="brush: html"><div role="textbox" contenteditable="true"></div></pre> + +<h3 class="p1" id="Example_2_Adding_the_role_in_the_HTML_code_for_multi-line_input" name="Example_2_Adding_the_role_in_the_HTML_code_for_multi-line_input">例 2: 複数行入力の HTML コードにロールを追加する</h3> + +<p class="p2">以下のスニペットは、<code>textbox</code> ロールが HTML ソースコードにどのように直接追加されるかを示しています。</p> + +<pre class="brush: html"><div role="textbox" contenteditable="true" aria-multiline="true"></div></pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<ul> + <li class="li1"> このロールが適用される HTML 要素に <code>contenteditable="true"</code> 属性を必ず追加してください。 <code>aria-readonly</code> を <code>true</code> に設定した場合でもそうします。 このようにして、読み取り専用でない場合は、コンテンツを編集可能にすることを通知します。</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/searchbox">ARIA: search ロール</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/ja/web/accessibility/aria/web_applications_and_aria_faq/index.html new file mode 100644 index 0000000000..bc71bf3ba0 --- /dev/null +++ b/files/ja/web/accessibility/aria/web_applications_and_aria_faq/index.html @@ -0,0 +1,302 @@ +--- +title: Web アプリケーションと ARIA の FAQ +slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +tags: + - ARIA + - Accessibility + - Guide +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +<h2 id="What_is_ARIA" name="What_is_ARIA">ARIA とは何か?</h2> + +<p>WAI-ARIA は、<a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> の <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> による、<a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">{{原語併記("アクセシブルなリッチインターネットアプリケーション", "Accessible Rich Internet Applications")}}</a> の仕様です。ARIA は Web アプリケーションやウィジェットを、スクリーンリーダーや拡大鏡といった支援技術を使用するユーザを含む幅広いユーザに対してアクセシブルにする手段を提供します。</p> + +<p>ARIA はメニュー、スライダー、ツリー、ダイアログといった多くの一般的なユーザインターフェイスの役割、状態、機能性を示す付加的な意味を与えます。また作者がページ上の目印、部分、グリッドを設定することを支援する、付加的な構造情報も与えます。ARIA は動的で JavaScript 駆動のアプリケーションやウィジェットを、さまざまなデスクトップベースの支援技術と対話可能にします。</p> + +<p>ARIA でアクセシブルなウィジェットを作成する方法について詳しくは、<a href="/ja/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="Accessibility/An overview of accessible web applications and widgets">アクセシブルな Web アプリケーションやウィジェットの概要</a>をご覧ください。</p> + +<h2 id="Where_is_ARIA_Supported" name="Where_is_ARIA_Supported">ARIA はどこでサポートされていますか?</h2> + +<p>ARIA は比較的新しい仕様ですが、サポートは進んでいます。多種多様なよく使用されるブラウザ、支援技術、JavaScript ツールキットやアプリケーションが ARIAをサポートしています。しかし、多くのユーザはいまだにこれらの古いバージョンを使用しているでしょう。古いブラウザや支援技術を良好にサポートするために、先進的な拡張方法 (例えばマークアップに直接ではなく JavaScript を使用して ARIA を追加する) を使用して ARIA を実装したいと考えるでしょう。</p> + +<h3 id="Browsers" name="Browsers">ブラウザ</h3> + +<p>ARIA は以下のブラウザでサポートされています:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>ブラウザ</th> + <th>最低バージョン</th> + <th>備考</th> + </tr> + <tr> + <td>Firefox</td> + <td>3.0 以降</td> + <td>NVDA、JAWS 10 以降、Orca で動作</td> + </tr> + <tr> + <td><a href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> + <td>最新</td> + <td>Chrome 15 現在、スクリーンリーダーは試験にサポート</td> + </tr> + <tr> + <td>Safari</td> + <td>4 以降</td> + <td>Safari 5 のサポートはとても向上しています。<br> + Live region のサポートは、iOS5 または OS X Lion の VoiceOver と Safari 5 が必要です。</td> + </tr> + <tr> + <td><a href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> + <td>9.5 以降</td> + <td>OS X では VoiceOver が必要です。TBD: 現在の状況はどうでしょうか?</td> + </tr> + <tr> + <td><a href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td> + <td>8 以降</td> + <td>JAWS 10 以降や NVDA で動作します。NVDA では live region をサポートしません。<br> + IE9 のサポートはとても向上しています。</td> + </tr> + </tbody> +</table> + +<p>以前のバージョンでは ARIA の一部の機能しかサポートしない場合があります。より詳しいブラウザ実装状況の表を、複数の情報源から得られます:</p> + +<ul> + <li><a href="http://caniuse.com/wai-aria" title="http://caniuse.com/wai-aria">caniuse.com</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/" title="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/">The Paciello Group</a></li> +</ul> + +<h3 id="Assistive_Technologies" name="Assistive_Technologies">支援技術</h3> + +<p>支援技術は ARIA を順次採用しています。それらが搭載しているものは:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>支援技術</th> + <th>基本的な ARIA の最低バージョン</th> + <th>live region および alert サポートの最低バージョン</th> + </tr> + <tr> + <td>NVDA</td> + <td>2010.2<br> + (NVDA のアップグレードは常に無償です)</td> + <td>Firefox 向けは 2011.1 でサポートしました。2011.2 の時点で IE の live region サポートはありません。</td> + </tr> + <tr> + <td>Orca</td> + <td>? (TBD)</td> + <td>? (TBD)</td> + </tr> + <tr> + <td>VoiceOver</td> + <td>OSX 10.5,<br> + iOS 4</td> + <td>OS X 10.7<br> + iOS 5</td> + </tr> + <tr> + <td>JAWS</td> + <td>8</td> + <td>10</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>7</td> + <td>現在 live region はサポートしていません。</td> + </tr> + <tr> + <td>ZoomText</td> + <td>?</td> + <td>現在 live region はサポートしていません。</td> + </tr> + </tbody> +</table> + +<p>注記: これらツールの過去のバージョンは、ARIA の実装が部分的あるいはバグがある場合があります。</p> + +<p>JAWS 10 時点の、JAWS の ARIA サポートに関する注記については、Paciello Group による記事をご覧ください: <a href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>。</p> + +<h3 id="JavaScript_Toolkits" name="JavaScript_Toolkits">JavaScript ツールキット</h3> + +<p>ARIA のロール、ステート、プロパティは、以下のような多くのポピュラーな JavaScript ユーザインターフェイスツールキットに追加されています:</p> + +<ul> + <li>Dojo/Dijit</li> + <li>jQuery UI</li> + <li>Fluid Infusion</li> + <li>Google Closure</li> + <li>Google Web Toolkit</li> + <li>BBC Glow</li> + <li>Yahoo!User Interface Library (YUI)</li> +</ul> + +<p>JavaScript ツールキットのアクセシビリティに関する詳細情報:</p> + +<ul> + <li>Steve Faulkner 氏による <a href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">WAI-ARIA Implementation in JavaScript UI Libraries</a></li> +</ul> + +<h2 id="Can_you_show_me_an_example_of_ARIA_in_action" name="Can_you_show_me_an_example_of_ARIA_in_action">ARIA の実例を見せていただけますか?</h2> + +<p>はい。こちらがプログレスバーのウィジェットのマークアップです:</p> + +<pre class="brush:html;"><div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /></pre> + +<p>このプログレスバーは <code><div></code> を使用して作られており、あまり説明的ではありません。残念ながら HTML 4 で開発者が使用できる、より意味があるタグはありませんので、ARIA のロールやプロパティを含めることが必要です。これらは、要素に属性を追加することによって指定します。この例では <code>role="progressbar"</code> 属性で、要素が実際は JavaScript で動作するプログレスバーウィジェットであることをブラウザに伝えます。<strong>aria-valuemin</strong> 属性や <strong>aria-valuemax</strong> 属性はプログレスバーの最小値と最大値を、<strong>aria-valuenow</strong> 属性は現在の状態を示します。</p> + +<p>ARIA の属性はマークアップ内に直接置くほかに、以下のような JavaScript コードを使用して要素へ追加および動的な更新を行うこともできます:</p> + +<pre class="brush: javascript" id="line96">// DOM でプログレスバーである <div> を探します。 +var progressBar = document.getElementById("percent-loaded"); + +// どのようなウィジェットであるかを支援技術がわかるように、ARIA のロールやステートを設定します。 +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); + +// プログレスバーの値を更新するたびに呼び出すことが可能な関数を作成します。 +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +} +</pre> + +<h2 id="ARIA_を追加するとページのスタイルや動作が変わりますか">ARIA を追加するとページのスタイルや動作が変わりますか?</h2> + +<p>いいえ。ARIA は支援技術の API を使用可能にするだけであり、DOM やスタイルに関するブラウザのネイティブ機能には影響を与えません。ブラウザから見ると、ネイティブな HTML は要素のセマンティックな意味や動作を定義するものであり、ARIA の属性は AT API のサポートを支援するレイヤーとして機能します。ARIA の属性は他の HTML 属性と同様にスタイルを変更しませんが、CSS は要素のセレクタとして ARIA の属性を活用できます。これは、ARIA が有効なウィジェットにスタイルを設定するうえで便利な仕組みです。</p> + +<pre class="brush: css">.tab-panel[aria-hidden="true"] { + display: none; + } + +.tab-panel[aria-hidden="false"] { + display: block; + } +</pre> + +<h2 id="What_about_validation" name="What_about_validation">検証はどうなりますか?</h2> + +<p><strong>role</strong> 属性や <strong>aria-</strong> 接頭辞がついた属性のような、ARIA で導入された新たな属性は、HTML 4 や XHTML 4 の正式な一部分ではありません。その結果、ARIA を含むページは <a href="http://validator.w3.org/" title="http://validator.w3.org/">W3C の Markup Validator</a> のようなツールで検証してはいけません。</p> + +<p>第一にこの問題の解決策になり得ることは、ARIA のロールやステートをマークアップ内に直接置くのを避けることです。代わりに、前出の <a href="#Can_you_show_me_an_example_of_ARIA_in_action" title="#Can_you_show_me_an_example_of_ARIA_in_action">ARIA の実例を見せていただけますか?</a> への回答で示したように、JavaScript を使用してページへ動的に ARIA を追加してください。それでも理論上、ページは妥当ではありませんが、すべての静的な検証は正しく合格するでしょう。</p> + +<p>別の代案は HTML5 の doctype を使用することで、これは ARIA のサポートが組み込まれています。W3C の HTML5 validator は、あなたの HTML5 ページにおける ARIA の誤った使い方も発見するでしょう。</p> + +<h2 id="How_does_HTML5_relate_to_ARIA" name="How_does_HTML5_relate_to_ARIA">HTML5 と ARIA との関係は?</h2> + +<p>HTML5 では、役に立つ多くのセマンティックなタグを HTML に導入しました。新たな <code><progress></code> 要素のようにいくつかのタグは、ARIA で使用可能なロールと正に重複します。ARIA にも存在する HTML5 タグをブラウザがサポートする場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。詳細情報として、Steve Faulkner 氏が <a href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" title="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">HTML5 と ARIA の関係について良い概説</a>を記述しました。</p> + +<h4 id="Degrading_Gracefully_from_HTML5_to_ARIA" name="Degrading_Gracefully_from_HTML5_to_ARIA">HTML5 から ARIA への円滑な退行</h4> + +<p>HTML5 を理解しないブラウザにコンテンツを提供するときに、必要なところで ARIA の使用へ円滑に退行したいと考えるでしょう。よってプログレスバーの例で言うと、<code><progressbar></code> タグがサポートされていない場合は <code>role="progressbar"</code> へ円滑に退行できます。</p> + +<p>こちらが、HTML5 のプログレスバーを使用するマークアップの例です:</p> + +<pre class="brush: html" id="line96"><!DOCTYPE html> +<html> + <head><title>Gracefully degrading progress bar</title></head> + <body> + <progress id="progress-bar" value="0" max="100">0% complete</progress> + <button id="update-button">Update</button> + </body> +</html> +</pre> + +<p>そして、こちらが古いブラウザでもプログレスバーが動作するようにする JavaScript コードです:</p> + +<pre class="brush: javascript" id="line96">var progressBar = document.getElementById("progress-bar"); + +// ブラウザが HTML5 の <progress> タグをサポートするかを確認します。 +var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); + +function setupProgress() { + if (!supportsHTML5Progress) { + // HTML5 の <progress> がブラウザでサポートされていないので、 + // ARIA のロールやステートを要素に追加します。 + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + } +} + +function updateProgress(percentComplete) { + if (!supportsHTML5Progress) { + // HTML5 の <progress> がブラウザでサポートされていないので、 + // aria-valuenow 属性の更新が必要です。 + progressBar.setAttribute("aria-valuenow", percentComplete); + } else { + // HTML5 の <progress> がサポートされているので、代わりに value 属性を更新します。 + progressBar.setAttribute("value", percentComplete); + } + + progressBar.textContent = percentComplete + "% complete"; +} + +function initDemo() { + setupProgress(); // プログレスバーの設定。 + + // click ハンドラをボタンに割り当てます。これはプログレスバーを 75% に更新します。 + document.getElementById("update-button").addEventListener("click", function (e) { + updateProgress(75); + e.preventDefault(); + }, false); +} +initDemo(); +</pre> + +<h2 id="How_do_assistive_technologies_work" name="How_do_assistive_technologies_work">支援技術はどのように動作しますか?</h2> + +<p>支援技術は、アプリケーションのユーザインターフェイスのロール、ステート、構造を表すよう特に設計された、各オペレーティングシステムに組み込まれた API を使用します。例えば、スクリーンリーダーはテキスト読み上げエンジンでユーザインターフェイスを読むために、拡大鏡はスクリーンで重要またはアクティブな領域を強調するために、オンスクリーンキーボードはそのときの状況や UI コントロールに対してもっとも効率的なキーボードレイアウトを提供するために、この API を使用します。さらに支援技術はたいてい、ページのセマンティクスや属性を理解するために、この API を通してページの DOM にアクセスします。</p> + +<p>ARIA は DOM の世界とデスクトップの世界との間を橋渡しします。ブラウザは ARIA が有効な要素を、ネイティブなウィジェットであるかのように支援技術の API に公開します。その結果ユーザは潜在的により一貫したユーザ体験を得て、そこでは Web の動的な JavaScript で動作するウィジェットが、デスクトップで同等のウィジェットに匹敵します。</p> + +<h2 id="How_do_I_test_my_use_of_ARIA_Are_there_any_tools_available_for_free" name="How_do_I_test_my_use_of_ARIA_Are_there_any_tools_available_for_free">私の ARIA の使い方の確認方法は? 自由に使用できるツールはありますか?</h2> + +<p>動作中の ARIA のテストを支援する、調査ツールやデバッグツールがいくつかあります:</p> + +<ul> + <li>Windows で Object Inspector</li> + <li>OS X で Accessibility Inspector</li> + <li>Linux で AccProbe</li> + <li>Firebug の DOM Inspector</li> + <li><a href="http://code.google.com/p/ainspector/" title="http://code.google.com/p/ainspector/">Accessibility Inspector for Firebug</a></li> +</ul> + +<p>ARIA の実践的なテストに使用できる、フリーまたはオープンソースのスクリーンリーダーもいくつかあります。以下のようなものです:</p> + +<ul> + <li>Linux 向けの <a href="http://live.gnome.org/Orca" title="http://live.gnome.org/Orca">Orca</a></li> + <li>Windows 向けの <a href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">NVDA</a></li> + <li>OS X 内蔵の <a href="http://www.apple.com/accessibility/voiceover/" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li> +</ul> + +<p>スクリーンリーダーでテストを行うときは、2 つのポイントを覚えておいてください:</p> + +<ol> + <li>スクリーンリーダーのユーザとの軽いテストでは、実際のユーザのフィードバック、テスト、および支援の代替にはなりません。</li> + <li>スクリーンリーダーのサポートだけがアクセシビリティではありません。さまざまなユーザビリティやアクセシビリティの手法を試しましょう。</li> +</ol> + +<p>ARIA が有効なアプリケーションやウィジェット向けの、その他の有用なテストツールや手法です:</p> + +<ul> + <li><a href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" title="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a></li> + <li>Fluid Project の <a href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" title="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a></li> +</ul> + +<h2 id="Where_do_ARIA_discussions_happen" name="Where_do_ARIA_discussions_happen">ARIA の議論はどこで行われていますか?</h2> + +<ul> + <li><a href="http://lists.w3.org/Archives/Public/wai-xtech/" title="http://lists.w3.org/Archives/Public/wai-xtech/">Wai-xtech mailing list</a> -- ARIA 仕様の議論を保持しています。</li> + <li><a href="http://groups.google.com/group/free-aria" title="http://groups.google.com/group/free-aria">Free-ARIA google group</a> -- フリーなツールやリソースの開発者およびユーザ向けです。</li> +</ul> + +<h2 id="Where_can_I_learn_more_about_ARIA" name="Where_can_I_learn_more_about_ARIA">ARIA についてより詳しく学ぶには?</h2> + +<ul> + <li><a href="/ja/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="Accessibility/An overview of accessible web applications and widgets">アクセシブルな Web アプリケーションやウィジェットの概要</a></li> + <li><a href="/ja/docs/Accessibility/Accessible_forms" title="Accessibility/Accessible forms">Accessible forms</a></li> + <li>W3C の <a href="http://www.w3.org/WAI/aria/faq" title="http://www.w3.org/WAI/aria/faq">WAI-ARIA Frequently Asked Questions</a></li> + <li>WebAIM の <a href="http://webaim.org/techniques/aria/" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a></li> +</ul> diff --git a/files/ja/web/accessibility/aria/widgets/index.html b/files/ja/web/accessibility/aria/widgets/index.html new file mode 100644 index 0000000000..136aecae2e --- /dev/null +++ b/files/ja/web/accessibility/aria/widgets/index.html @@ -0,0 +1,10 @@ +--- +title: widgets +slug: Web/Accessibility/ARIA/widgets +tags: + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/widgets +--- +<p>This page was auto-generated because a user created a sub-page to this page.</p> diff --git a/files/ja/web/accessibility/aria/widgets/overview/index.html b/files/ja/web/accessibility/aria/widgets/overview/index.html new file mode 100644 index 0000000000..c49401a24b --- /dev/null +++ b/files/ja/web/accessibility/aria/widgets/overview/index.html @@ -0,0 +1,72 @@ +--- +title: 概観 +slug: Web/Accessibility/ARIA/widgets/overview +tags: + - Accessibility + - JavaScript + - Landing + - NeedsUpdate +translation_of: Web/Accessibility/ARIA/widgets/overview +--- +<div class="warning">Warning: needs updating</div> + +<h2 id="Introduction_2" name="Introduction_2"><span class="mw-headline" id="Introduction">入門</span></h2> + +<p>ここでは、動作する例とアクセシブルなJavaScript ウィジェットを作るベストプラクティスを見ていきます。</p> + +<h2 id="General_Resources_2" name="General_Resources_2"><span class="mw-headline" id="General_Resources">一般リソース</span></h2> + +<ul> + <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">DHTML Style Guide</a> にはキーボードインタラクションのお勧めがあります。</li> + <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">WAI-ARIA Authoring Practices Guide</a></li> +</ul> + +<h2 id="Checkbox" name="Checkbox">チェックボックス</h2> + +<ul> + <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">ARIA Toggle Button and Tri-state Checkbox examples</a> (from "The Paciello Group Blog")</li> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox" rel="nofollow">ARIA Example Checkbox Widgets from the University of Illinois</a></li> +</ul> + +<h2 id="Menu_2" name="Menu_2"><span class="mw-headline" id="Menu">メニュー</span></h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Using WAI-ARIA Roles and States with the YUI Menu Control</a></li> +</ul> + +<h2 id="Slider_2" name="Slider_2"><span class="mw-headline" id="Slider">スライダー</span></h2> + +<ul> + <li>From the Paciello Group Blog: ARIA Slider, <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">part one</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">part two</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">part threet</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">example</a>)</li> + <li><a class="external text" href="http://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/" rel="nofollow">Creating an Accessible, Internationalized Dojo Rating Widget</a></li> +</ul> + +<h2 id="Tabs_2" name="Tabs_2"><span class="mw-headline" id="Tabs">タブ</span></h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Enhancing TabView Accessibility with WAI-ARIA Roles and States</a>, from the YUI blog</li> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Enhancing the jQuery UI Tabs accordingly to WCAG 2.0 and ARIA</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Tab panel example here on CodeTalks</a></li> +</ul> + +<h2 id="Lightbox_2" name="Lightbox_2"><span class="mw-headline" id="Lightbox">ライトボックス</span></h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 and ARIA-</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conformant</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow"> lightbox application</a></li> + <li><a class="external free" href="http://majx-js.digissime.net/js/popin/" rel="nofollow">http://majx-js.digissime.net/js/popin/</a></li> +</ul> + +<h2 id="Form_Validation_2" name="Form_Validation_2"><span class="mw-headline" id="Form_Validation">フォーム検証</span></h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">WCAG 2.0 and ARIA-conformant live form validation</a></li> +</ul> + +<h2 id="Tables" name="Tables"><span class="mw-headline" id="Table">表</span></h2> + +<ul> + <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">German tutorial on creating an accessible form</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Simple grid example at CodeTalks</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Date picker grid at CodeTalks</a></li> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">WCAG 2.0 and ARIA-conformant sortable tables</a></li> +</ul> |