スライド制御のボタンを持つ自動回転イメージカルーセルの例
+スライドコントロールのボタンを持つ自動回転画像カルーセルの例
この例について
- 以下のカルーセルのパターンの実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。 - 例えば、ユーザーがカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、ユーザーは前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。 + 以下のカルーセル パターンの実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。 + 例えば、利用者がカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、利用者は前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。 例の後に続くアクセシビリティの特徴のセクションでは、これらの特徴を詳しく説明しています。
-類似の例には以下があります:
+類似の例には以下があります:
-
-
- タブでスライドを制御する自動回転イメージカルーセル: ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティの特徴を示し、ユーザーがタブのセットで表示するスライドを選択できるようにするイメージカルーセル。 +
- スライドコントロールのタブを持つ自動回転画像カルーセル: ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す画像カルーセルです。また、一連のタブで表示するスライドを利用者が選択できるようにしています。
例のオプション
画像の外にコントロールとキャプションを表示 -このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、キャプションは背後に回転する画像なしで読みやすくなるからです。
+このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、背後に回転する画像がなくキャプションは読みやすくなるからです。
このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生しているかを制御します。 - 一時停止オプションは、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、ユーザーが開始/停止ボタンを使用して自動回転を開始できるようにします。
-注:ユーザーがシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。
+ 一時停止オプションは、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、利用者が開始/停止ボタンを使用して自動回転を開始できるようにします。 +注記: 利用者がシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。
- このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のあるユーザーや自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。 - ユーザーは前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。 + このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。 + 利用者は前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。
@@ -113,7 +113,7 @@例
アクセシビリティ機能
自動スライド回転の制御
- ユーザーはスライドの回転を停止し、再開することができ、これはさまざまな障害を持つ人々にとってカルーセルのアクセシビリティの重要な側面です。 - 低視力者や視覚処理や読書に影響を及ぼす認知障害を持つ人々は、スライドの内容を探索するのに十分な時間を持つためにスライドの回転を制御できることから利益を得ます。 - 同様に、スクリーンリーダーのユーザーが自動回転を知覚できないため、ページの読み取りが混乱し、方向を失うことがあります。 - 例えば、スライドが自動的に回転しているとき、スクリーンリーダーのユーザーはスライド1の要素を読み、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド1の次の要素を聞く代わりに、完全に新しいコンテキストからの要素を知らずにスライド2からの要素を聞くことになります。 + 利用者はスライドの回転を停止及び開始することができます。これは、障害を持つ様々な人々にとって、カルーセルのアクセシビリティの不可欠な側面です。 + ロービジョンや、視覚処理や読解に影響を及ぼす認知障害のある人にとって、スライドの回転を制御できることは、スライドの内容を探索するのに十分な時間を確保できることになり、利益を得られます。 + 同様に、スクリーンリーダーの利用者は自動的な回転を知覚できないため、ページを読むことが混乱しやすく、方向感を失わせることがあります。 + 例えば、スライドが自動的に回転しているとき、スクリーンリーダーの利用者はスライド 1 の要素を読んで、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド 1 の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド 2 の要素を聞くことになり得ます。
-この例には、ユーザーがスライドの回転を制御するための以下の機能が含まれています:
+この例には、利用者がスライドの回転を制御するための以下の機能が含まれています:
- オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。
- - カルーセルの任意のコンテンツにマウスをホバーすると、自動回転が一時停止します。 + カルーセルのいずれかのコンテンツにマウスをホバーすると、自動回転が一時停止します。 マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
- - キーボードのフォーカスをカルーセルの任意のコンテンツ、次や前のスライドの要素を含むものに移動すると、自動回転が一時停止します。 + キーボードのフォーカスをカルーセルの任意のコンテンツ (次や前のスライドの要素を含む) に移動すると、自動回転が一時停止します。 キーボードのフォーカスがカルーセルのコンテンツから移動すると、マウスのホバーなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
-
- カルーセルには、自動回転を停止し、再開することができる回転制御ボタンも含まれています。
+ カルーセルには、自動回転を停止及び再開することができる回転制御ボタンも含まれています。
- 回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。 -
- 回転制御ボタンは常に表示されているため、マウス、キーボード、補助技術、またはタッチを介して対話しているすべてのユーザーに利用できます。 -
- カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダーユーザーに通知するとともに、変更を停止する方法を提供します。 +
- 回転制御ボタンは常に表示されているため、マウス、キーボード、支援技術、又はタッチを介して操作しているすべての利用者に利用できます。 +
- カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダー利用者に通知するとともに、変更を停止する方法を提供します。
- カルーセルが回転していない場合、ボタンのアクセシブルな名前は「自動スライドショーを開始」となります。
- - ユーザーが回転制御ボタンを活性化して回転を開始する場合、ユーザーが自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカスや/およびホバーの状態は無視されます。 - 回転は、再び回転制御ボタンが活性化されるまで停止することはありません。 + 利用者が回転制御ボタンを活性化して回転を開始する場合、利用者が自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカス及び/又はホバーの状態は無視されます。 + 回転は、再び回転制御ボタンが押下されるまで停止することはありません。
- この例には、自動スライド回転を完全に無効にするオプションが含まれています。 - このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次および前のボタンの活性化を通じてのみ回転することができます。 + このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次及び前のボタンの活性化を通じてのみ回転することができます。
テキストと回転制御の色のコントラスト
このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。 - しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1の色のコントラスト要件を満たしています: + しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1 の色のコントラスト要件を満たしています:
- - 回転制御、次のスライド、および前のスライドのボタンが画像内にレンダリングされる場合、ボタンにはWCAG 2.1の色のコントラスト要件を満たす前景色と背景色があります。 - さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにするSVG画像を使用しています。 + 回転制御、次のスライド、及び前のスライドのボタンが画像内にレンダリングされる場合、ボタンには WCAG 2.1 の色のコントラスト要件を満たす前景色と背景色があります。 + さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにする SVG 画像を使用しています。 -
- キャプションエリアの透明度が減少しているため、キャプションテキストはWCAG 2.1の色のコントラスト要件を満たしています。 +
- キャプションエリアの透明度が減少しているため、キャプションテキストは WCAG 2.1 の色のコントラスト要件を満たしています。
- 画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する1つの方法は、コントロールを画像の外に配置することです。 + 画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。 コントロールとテキストを固定背景に表示することで、色のコントラストを制御するのが簡単になります。 - 1つのビューオプションは、この技術の例を提供しています。 + 一つのビューオプションは、この技術の例を提供しています。
-スライドの変更のスクリーンリーダーのアナウンスメント
+スライドの変更のスクリーンリーダーの読み上げ
自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。 - これにより、スクリーンリーダーのユーザーがカルーセルのスライドをスキャンするのが簡単になります。 - スクリーンリーダーのユーザーが次または前のスライドボタンを活性化すると、新しいスライドのコンテンツがアナウンスされ、コンテンツと対話するかどうかを判断するための即時のフィードバックが与えられます。 + これにより、スクリーンリーダーの利用者がカルーセルのスライドをスキャンするのが簡単になります。 + スクリーンリーダーの利用者が次又は前のスライドボタンを押下すると、新しいスライドのコンテンツが読み上げられ、コンテンツを操作するかどうかを判断するための即時のフィードバックが与えられます。 非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。 - そうでなければ、継続的に変更されるコンテンツのアナウンスメントが他のユーザーが読んでいるものを常に中断するため、ページが使用できなくなります。 + そうでなければ、継続的に変更されるコンテンツの読み上げが利用者が読んでいる他のものを毎回中断するため、ページが使用できなくなります。
@@ -328,7 +328,7 @@回転制御ボタン
回転制御ボタン
次および前のスライドボタン
+次及び前のスライドボタン
Enter Space |
- カルーセル内の次または前のスライドを表示します。 | +カルーセル内の次又は前のスライドを表示します。 |
---|
次および前のスライドボタン
ロール、プロパティ、ステート、およびtabindex属性
+ロール、プロパティ、ステート、及び tabindex 属性
|
|||
- aria-roledescription="carousel"
+ aria-roledescription="カルーセル"
|
section
|
|
|
@@ -434,8 +434,8 @@
|
@@ -450,7 +450,7 @@
|
@@ -466,7 +466,7 @@
|
@@ -496,7 +496,7 @@
button
|
- 一時停止自動回転ボタンおよび次および前のスライドボタンのアクセス可能な名前を定義します。 | +自動回転の一時停止ボタン及び次/前のスライドボタンのアクセス可能な名前を明示します。 |
---|---|---|---|
@@ -508,8 +508,8 @@ |
|