ユニバーサルウェブデザインで人気のある間違い-jsチュートリアル-php.cn

ユニバーサルウェブデザインで人気のある間違い

今日のおしゃれで競争力のある「Web 2.0」とソーシャルメディアの世界、ユニバーサルデザインにより何度も忘れられています。普遍的な設計慣行をサポートする多くの社会的、技術的、財政的、および法的理由がある理由については、当惑しています。今日のウェブサイトでより一般的な問題のいくつかと、それらが主要なユニバーサルデザインの原則とどのように関係するかについて説明しましょう。

キーテイクアウト

普遍的なWebデザインは、その社会的、技術的、財政的、法的利益にもかかわらず、しばしば見落とされます。一般的な間違いには、読み取りが困難なテキスト、不明確なテキストリンク、過度の視覚ノイズ、キーボードアクセスの欠如、画像の代替テキストの欠落が含まれます。
キーボードアクセスは、ユニバーサルデザインに不可欠です。多くのWebサイトはこれを提供できず、ユーザーに障壁を作成します。優れた実践には、次の場合、CSSでフォーカス状態を提供することが含まれます：Hover Pseudoクラスが使用されている場合、およびマウスイベントが設計されている場合、キーボードの平等アクセスが提供されるようにします。画像に代替テキストを提供することは、ユニバーサルデザインのもう1つの重要な側面です。画像が関連するコンテンツを提供する場合、視覚障害やインターネット接続の遅いユーザーを含むすべてのユーザーのアクセシビリティを確保するために、代替テキストを添付する必要があります。
原則
まず、Web関連の例を含む7つのユニバーサルデザインの原則を確認しましょう。もちろん、これらの原則は、土木工学（建物、通路）、エンターテイメント（映画館、テーマパーク）、輸送（バス、電車）など、コンピューターやウェブ以外の多くの業界に適用されていることに留意してください。
1. 公平な使用：多様な能力を持つ人々にとって有用で市場性があります。
  例：地方自治体のウェブサイトは、スクリーンリーダーなどの支援技術を使用している人がアクセスできるように設計されています。
2. 例：航空会社のウェブサイトの設計は、さまざまなコンピューターディスプレイサイズの視覚的な美学を維持しています。
  シンプルで直感的：ユーザーのエクスペリエンス、知識、言語スキル、または現在の集中レベルに関係なく、理解しやすい。
3. 知覚可能な情報：周囲の条件やユーザーの感覚能力に関係なく、必要な情報をユーザーに効果的に伝えます。
  例：キャプション付きの教育ビデオは、リスニングに加えて対話を読むオプションを提供します。
4. 例：フォームを送信するときの技術的エラーは、継続する方法の明確な説明とオプションを提供します。
  低い身体的努力：効率的かつ快適に使用でき、最小限の疲労で使用できます。
5. 例：マウスを使用できない物理的に障害のあるユーザーが、キーボード（または画面上のキーボード）ですべてのコンテンツにアクセスできるように設計されています。
原則に精通しているので、いくつかの関連するWebデザインの問題を調べてみましょう。
読むのが難しいユニバーサルデザインの最初の一般的な間違いは、テキストコンテンツであり、そのデザインのために多くの人が読むことは困難です。これは、原則1、公平な使用に関連しています。 6、低い身体的努力、特に目のひずみ。
認知読み取り難易度は、この記事の範囲内ではない別の問題であることに注意してください。優れた読みやすさにより、ウェブサイトがより使いやすく、審美的に楽しいものになります。ちなみに、Super Easy ReadingのためにReadability.com Webアプリケーションをご覧ください。では、問題は何ですか？小型のテキストと低色のコントラストは、Webタイポグラフィを読みにくくする2つの重要な問題です。以下の例では、主なテキストコンテンツは、明るさの違いが> テストの違いの違いに失敗する黒い背景の上の灰色です。テキストサイズは12ピクセルに設定されており、私自身を含む多くのユーザーにとってかなり小さいです。 cssからテキストサイズを削除すると、ブラウザには、わずかに大きく、読みやすいデフォルトサイズが表示されます。したがって、デフォルトのテキストを12pxまたは.75emに設定する代わりに、16pxまたは.95emのように少し高く試してください。テキストに関連するもう1つのベストプラクティスは、CSSで相対的なサイジングを使用することです（EMSまたはパーセンテージ）固定サイズ（ピクセルまたはポイント）ではなく、ユーザーが必要に応じてブラウザのテキストを変更し、テキストにレイアウトスケールを確保できるようにします。ユーザーフレンドリーな見出しや十分なライン間隔を提供するなど、その他の優れたガイドライン。
テキストリンクを決定するのは困難
デフォルトでは、ハイパーリンクされたテキストは下線でレンダリングされます。これは、Webブラウジングの長年のコンベンションです。この条約を削除すると、ユーザーの期待が壊れるだけでなく、色覚異常または低視力のある人にリンクがアクセスできない可能性があります。多くの場合、この問題を悪化させるのは、リンクが黒いテキストの中で暗い色で定義される場合です。上記の問題と同様に、これは原則1および6に関連しています。私の検眼医は、40歳頃から、男性の視力が色を区別する能力を失い始めたと言っています。そして、少年は正しいです！多くのウェブサイトには、下線のないダークブルーのリンクがあり、テキストリンクを決定するために目を引く必要があります。以下の例は、ニュース記事からのものです。テキストリンクが見えますか？私にとっては非常に難しいです。

ニュースWebサイトは、際立った英国のサイトThe Telegraphからであっても、削除された下線で青いリンクを使用することで有名なようです。解決するには、下線を返して障壁を単に削除します。 Nomensaブログは良い例です。オプションで、色付きの背景などのテキストリンクには、太字のテキストまたは別の視覚的な表示を使用します。

視覚ノイズ
散在したレイアウトとコンテンツの過負荷は視覚的に魅力的ではなく、非常に使いやすくもアクセスもできません。これは、シンプルで直感的な原則3に直接関係しています。以下に示すカリフォルニアの地方自治体のWebページには、多数のナビゲーションエリア、2つの大きなサブセクションバナー画像、および組織化されていない散在する外観だけがあります。その結果、メインコンテンツはページの「折りたたみ」まで開始されません。これは明らかに理想的ではありません。また、焦点も視覚的な階層がなく、ユーザーが必要なものをページを必死に検索する可能性がさらに高くなります。

対照的に、オーストラリア政府とUSA.GOV Webサイトをご覧ください。はるかに広々として整理されているため、より使いやすい体験が生まれます。「視覚的ノイズ」を作成するより多くの例は次のとおりです。
- ナビゲーション：ページ上のナビゲーションのセクションが多すぎます（上記の例のように）。ナビゲーションのレベルが多すぎると、デザインの悪夢と同様に混乱を招く可能性があります。
- 無意味な画像：コンテンツに値がある場合にのみ画像を使用します。テキストコンテンツに重要な意味を伝える必要があります
- キーボードへのアクセスなし
が本質的にキーボードアクセス可能であるため、キーボードユーザーに障壁を作成します。マウスイベントに設計する場合は、キーボードに平等にアクセスできるようにしてください。これにより、デバイス独立が作成されます。それは良いことです！この問題は、原則1、公平な使用に関連しています。および2、使用中の柔軟性。 Webサイトをコーディングするとき、考慮すべきいくつかの良い実践があります。 css
では、：Hover Pseudoクラスが使用されている場合は、A：フォーカス状態も提供されていることを確認してください。また、アンカー要素のアウトライン、つまり{outline：0}を削除しないでください。（警戒してください：ほとんどのCSS
リセットスタイルシートはアンカーのアウトラインを削除します - 必ず自分のCSSに追加してください！）。絶対に必要な場合は、ある種の視覚効果を置き換える必要があります。 JavaScriptでは、キーボードがこの動作を実行できないため、ダブルクリックハンドラー（ondblclick）を使用しないでください。オンマウスオーバーおよびオンマウスアウトJavaScriptハンドラーを使用する場合、キーボードアクセスを可能にするために、オンフォーカスおよびオンブルルイベントも実装する必要があります。
画像の代替テキストがありません画像が関連するコンテンツを提供する場合、代替テキストを添付する必要があります。画像が見えない場合（ブラインドユーザー、低帯域ユーザー、および壊れた画像リンクの場合のように、画像の「コンテンツ」にアクセスする必要があります。上記のように、この問題は原則1および2に関連しています。代替テキストを提供する最も一般的な方法は、Image ElementのALT属性にテキストを入力することです。 Web上のグラフィカルチャート、漫画、インフォグラフィックなどの多くの画像は、ALTテキストに「長い説明」を提供していないため、コンテンツの多くのユーザーをブロックします。 Web AXブログは、シリーズ「Fixing Alt」のいくつかの例を修正しています。長い説明の詳細については、私の2部構成の記事Longdescとその他の長い画像説明ソリューションをご覧ください。

代替テキストのガイドラインは次のとおりです。
- テキストが画像に埋め込まれている場合は、ALT属性に追加します。
- リンクを持つ画像にコンテンツが含まれている場合、代替テキストは画像自体ではなくリンクの機能を説明する必要があります。
- テイクアウト
さらに読み取り

Webアプリケーション用のユニバーサルデザイン（O’Reilly Media）by Wendy Chisholm、Matt May。
ユニバーサルユーザビリティ、サラホートンによるオンラインブック。
- 普遍的な指導設計、ワシントン大学DO-ITプログラム。
- ユニバーサルデザインファイル：あらゆる年齢と能力の人々のためのデザイン（ジャーナル）、モリーストーリー、ジェームズミューラー、ロンメイス。
- ユニバーサルWebデザインに関するよくある質問
- ユニバーサルWebデザインとは何ですか？なぜ重要なのか？障害のある人を含むすべての人がWebコンテンツに効果的にアクセスして使用できるようにすることができるため、重要です。また、ユーザーエクスペリエンス全体を改善し、ウェブサイトをよりユーザーフレンドリーでナビゲートしやすくします。一方、Universal Web Designは、障害のあるユーザーを含むすべてのユーザーの多様なニーズを考慮しています。アクセシビリティ、使いやすさ、包括性を強調し、使用する能力やデバイスに関係なく、すべての人がWebコンテンツにアクセスしやすく使用できるようにします。 Webアクセシビリティガイドラインと標準に従わない。これらの間違いは、ユーザーエクスペリエンスの低下につながり、ウェブサイトのアクセシビリティと使いやすさを制限する可能性があります。
  どのようにして、自分のウェブサイトをよりアクセスしやすくユーザーフレンドリーにするにはどうすればよいですか？
  
  あなたのウェブサイトをよりアクセスしやすくユーザーフレンドリーにする方法はいくつかあります。これらには、明確でシンプルな言語の使用、画像の代替テキストの提供、Webサイトがキーボードでナビゲートできるようにし、論理的で一貫したレイアウトを使用し、ビデオのキャプションを提供することが含まれます。また、さまざまなデバイスとブラウザでウェブサイトをテストして、すべてのユーザーに適していることを確認することも重要です。さまざまなブラウザーがWebコンテンツを異なる方法で解釈して表示する可能性があるため、ユニバーサルWebデザインに影響します。したがって、さまざまなブラウザでウェブサイトをテストして、それがうまく機能し、それらすべてに優れていることを確認することが重要です。これらの機能により、障害のある人を含むすべてのユーザーがウェブサイトにアクセスしやすく使用可能になります。ウェブサイトをよりアクセスしやすくユーザーフレンドリーにすることで、企業は障害のある人を含むより多くの聴衆にリーチできます。これにより、トラフィックの増加、コンバージョン率の向上、顧客ロイヤルティが改善されます。これらには、オンラインチュートリアル、ウェビナー、本、コースが含まれます。ユニバーサルWebデザインにリソースを提供するいくつかの評判の良い組織には、World Wide Web Consortium（W3C）、Web Accessibility Initiative（WAI）、および障害と教育へのアクセスに関する全国センター（NCDAE）が含まれます。これには、画像の代替テキストの追加、Webサイトのキーボードでナビゲート可能になり、論理的で一貫したレイアウトを使用し、ビデオのキャプションを提供することが含まれます。また、さまざまなデバイスとブラウザでWebサイトをテストして、変更がユーザーエクスペリエンスを改善するようにすることも重要です。
  
  ユニバーサルWebデザインの未来は何ですか？
  
  ユニバーサルWebデザインの未来は、すべてのユーザーがWebサイトにアクセスできるようにすることの重要性を認識しているため、アクセシビリティと包括性をより重視する可能性があります。人工知能や機械学習などのテクノロジーの進歩も、ウェブサイトをよりアクセスしやすくユーザーフレンドリーにする役割を果たす可能性があります。さらに、ウェブサイトが誰でもアクセス可能で使用可能になることを保証するためのより多くの規制と基準があるかもしれません。