web-dev-qa-db-ja.com

視差のスクロールとアクセシビリティ

私はこの質問に答えていただけです 視差スクロールを使用しているWebサイトに関する実際のデータはありますか? そして、視差スクロールについてもっと読むと、コンテンツが変化し続け、ユーザーが短い注意スパンは、サイトを使用するのに苦労するかもしれません。また、背景と前景のコンテンツの違いにより、スクリーンリーダーを使用しているユーザーが混乱する可能性があります。

視差スクロールにアクセスできるかどうか、および視差スクロールを使用してアクセシビリティに準拠することの欠点があるかどうかに関する調査はありますか?

また、視差サイトにアクセスできるようにするためのベストプラクティスはありますか?

13
Mervin

アクセシビリティに関するいくつかの懸念がすぐに思い浮かびますが、それぞれが優れた設計と開発で克服できる問題だと思います。一般的に言えば、機能的に健全でグラフィック的に魅力的な製品は、ボンネットの下にいくつかの深刻なアクセシビリティの問題を抱えている可能性があり、これらの認知的に重い開発プロセスへの不均衡な焦点は、アクセシビリティの無視につながる可能性があります。

査読済みの調査は見つかりませんでしたが、信頼できる情報源と常識的な推論からの記事をバックアップして、いくつかのポイントをまとめました。

色のコントラストの問題。背景がテキストとは独立して動くと、識別が困難な2色、または目を傷つけるような方法で干渉する2色が重なるリスクがあります。この問題は、複雑なグラフィック背景によって悪化します。カラーブラインドユーザーはフラットサイトよりも大きな問題が発生し、すべてのスクロール位置を完全にチェックして、コンテンツが読みにくい場所に表示されていないことを確認する必要があります

コンテンツの位置と要素は、キーボードフォーカスやスクリーンリーダーなどに影響します。複雑な背景にあるすべての装飾画像がスクリーンリーダーに存在することを知らせたり、キーボードを使用するユーザーが任意の要素をタブで移動できないようにしたりしたくありません。

ナビゲーションは、コンテンツの深さ/幅を考慮すると、パララックスサイトではよりトリッキーになります。ナビゲーションアイテムがクリックされたときに自動的にスクロールするのは素晴らしいJavaScriptソリューションですが、他のナビゲーション方法を提供して、すべてのユーザーがサイトを簡単に閲覧できるようにすることが重要です。スクリーンリーダー用の控えめなアンカータグ、および古いまたは無効な手でのスクロール疲労を回避するための固定ナビゲーションは、適切なオプションです。

関連する動きも問題です。多くのパララックスサイトはかなり奇妙な方法でスクロールし、ぎくしゃくしたように見え、スクロール中に見るのは実際には非常に困難です。何かを動かすことは簡単ですが、多くのコンテキストでスムーズに何かを動かすことは非常に困難です。 要素へのフォーカスも、要素が移動する場合はより困難になり、要素が一貫した場所にない場合は、「ページ」からページへのフォーカスがより困難になります。 UXアイトラッキング調査はこれを証明します。リンクされたものは、目がWebサイトのコンテンツを一般的に追跡する方法を示しています。

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

ブラウザの互換性とモバイルの問題も考慮する必要があります。大きなページサイズと携帯電話でパララックスサイトを使用できないことは、この件に関する多くの記事で報告されています。

http://www.omobono.com/blog/powerful-storytelling-one-page-websites-and-parallax-scrollinghttps://uxmag.com/articles/the- hypnotic-effect-of-parallax-scrolling-and-how-it-impacts-user-experience

重要なのは、パララックスデザインパターンは、UXに重点を置いたデザインパターンと同じように使用できるわけではなく、アクセス可能な方法で提供するために慎重な検討が必要なテクニックに適しています。したがって、特に追加の開発コストや設計コストを考慮する場合、必ずしも無効になっているわけではないが、Webサイトで何らかのアクセシビリティの問題を抱えている多数のユーザーを無視するのは簡単です。

9
Toni Leigh

「アクセシビリティコンプライアンス」とは何かをよく理解することで、質問に最もよく答えられると思います。 http://www.w3.org/TR/wai-aria-practices/#presentation_role のオーサリングガイドを参照してください。特に、視覚効果に適用できるいくつかのテキストは

著者はWebページの外観にかなりの労力を費やしていますが、これはスクリプト化されたWebアプリケーションの場合に特に当てはまります。この目的のために、著者は純粋に視覚的な表現のためにさまざまな要素を採用しています。たとえば、<img>要素は間隔と装飾に使用されます。および<table>は、列ベースのレイアウトを作成するために使用されます。プレゼンテーションに厳密に使用される要素は、意味的に中立であり、アクセシビリティの観点からは無関係です。ユーザーエージェントによって作成されたアクセス可能なツリーに表示されないように、そのような要素をプレゼンテーションとしてマークする必要があります。

簡単に言うと、視差スクロールでアクセスできる2つの同等に実現可能な方法

  1. スクロールされた要素は、適切なアクセシビリティツリーを形成します(視覚的な表示に関係なく)。つまり、画面からスクロールされた項目は、画面で読み取ることができます。
  2. スクロールされた要素は「プレゼンテーション」としてマークされ、コントロールの2次セットは必要なARIAオブジェクトを提供します。

したがって、1つの視差スクロールサイトは完全にアクセス可能で、もう1つはまったくアクセスできません。 ARIAの要件が基本的に考慮されていない場合、アクセシビリティのtestを行うことは信頼できるとは言えません。また、ARIAはあらゆる種類の障害をサポートしていることにも注意してください。つまり、動的で非常に視覚的なサイトの単純な静的な大きなテキストレンダリング。

2
Jason A.

これは必ずしもパララックス固有の回答ではなく、アクセシビリティとモーションに関するものであり、IMOはパララックス効果によってどのように影響を受け、それによって改善することさえできます...

人口の85.5%だけが、「通常のビジョン」と考えられるものを持っています。残りは、プロタノピーから重水素化、完全な色盲までさまざまな程度で構成されています。

視差効果を利用するときは、オーバーラップするように選択する画像またはカラーブロックは、視聴者の15%にとって有用であるように十分に高いコントラストである必要があることに留意する必要があります。

良いニュースは、適切に実行すると、アクセシビリティに影響しないだけでなく、影響を受ける人々が色覚異常のために他の方法では気づかない可能性があるサイトの領域に注意を向けます。

正しく使用すると、Motionはサイトで非常に便利なツールになります。1990年代のように使用するときだけではありません;)


編集:具体的に視覚コントラストについてさらに読み、それらを正常に使用するには(視差を使用してコンテンツをより視覚的に識別可能にするために視差を使用することを提案するときに参照するものです)、チェックアウト...

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

...それは、それがいかに重要であるか、そしてそれを効果的に使用するための実践のトピックに深く入ります。繰り返しになりますが、特にパララックスを扱っていませんが、概念は同じように適用されます。

2
oucil

視差効果、特にスクロールが遅いまたは静止している背景の写真の上でテキストと背景の実線をスクロールすると、目の中でカクテルが揺れるように感じられます。この効果は、ページを表示してから約1時間続きます。それはおそらくあなたが人々にあなたのウェブサイトを覚えて欲しい方法ではありません。

アクセシビリティ標準の問題の1つは、時代遅れになることです。米国の第508条またはWCAG 2.0が視差スクロールに直接対応しているとは思いません。ただし、アニメーションコンテンツも非アニメーションで利用できるようにする必要があるという概念は、関連性があるようです。

つまり、視差スクロールが技術的に準拠しているからといって、ユーザーがWebサイトに安全にアクセスできるとは限りません。

2
Charles Belov

視差をアニメーションの一種と考えるなら、ニールソンの投稿 ウェブ上のマルチメディアのガイドライン があなたの質問に答えると思います。

大まかに言うと、ページを使用する適切な方法がありますが、ページ上の動きが多すぎると、ページへのアクセスと使用が困難になります。

限られた方法で視差を使用して、重要なアクションまたはコンテキストの変更に注意を引くことは、上記のニールソンの研究に照らして妥当であると思われます。装飾のためだけにページの複数の背景に視差を使用すると、コンテンツやその他のアクションからユーザーの注意をそらす可能性があります。

0
Lily Dart

この調査 http://uxpajournal.org/the-effects-of-parallax-scrolling-on-user-experience-in-web-design/ PSテストグループの2人のユーザーが視差サイトを使用したときに乗り物酔いを感じると報告しました。 1人のユーザーが非常に吐き気を覚え、サイトの使用時間を短縮する必要がありました。このことを念頭に置いて、視差スクロールサイトを作成するときは、ユーザーに害が及ばないようにするために、広範なテストを実行することをお勧めします。また、前庭障害( http://vestibular.org/understanding-vestibular-disorder )が視差スクロールを利用したサイトを使用すると問題が発生する可能性があることも考慮する必要があります。

0
Kerry Butters