デザイナーは、ユーザーをつまずかせる 100 万もの大きな落とし穴を排除して、障害物のない Web ブラウジング エクスペリエンスをどのように作成できるでしょうか? _html/css_WEB-ITnose

Web アクセシビリティに関する W3C の説明によると、インターネットは障害を持つ人々に対して、テクノロジーを通じて前例のない方法を提供し、コンテンツや情報からテキスト、音声、または画像を受信できるようにします。ユニークな機会を象徴しています。教育、政府機関、医療、エンターテイメントなどのオンライン サービスが爆発的に増加する中、アクセシビリティに優れた Web デザインが、障害のある人々が同じように利用する権利 (私たちが当たり前だと思っているサービス) を有するかどうかを決定する重要な鍵となることは間違いありません。 。

アクセシブルな Web ページを提供する理由は、法的規制に関連している場合があります。例: 多くの法律や規制では、米国連邦政府によって開発または委託された Web サイトは、すべてのユーザーが平等に使用できるようにアクセス可能な環境を提供する必要があります。国連（UN）も同様の規範を策定しました。さらに、一部の Web サイトでは裁判所の要件により ADA (米国障害者法) が施行されており、すべての教育機関もアクセシブルな Web サイトを提供することが推奨されています。

Web テクノロジーの発展により、障害のある人々が恩恵を受けることがより可能になりましたが、同時に Web サイトが特定の最低限のアクセシビリティ基準を満たしていないことによる影響にも直面する可能性があるため、W3C を含む多くの組織は、すべての Web サイト訪問者がプラットフォームの情報と機能に完全にアクセスできることを保証するために、設計者が適用できる一連の標準を開発しました。

• アクセシブルな Web ページを作成するためのヒント

障害を持つ人々は、Web サイトの閲覧を支援するためにテクノロジーをよく使用します。アクセシブルな Web サイトは、支援技術を使用して適切に機能するように設計されており、訪問するすべてのユーザーが Web サイトの基本情報と機能にアクセスできます。

色覚異常など、支援技術を適用できない場合もあります。したがって、アクセシブルな Web ページをデザインするときは、このグループの状況を考慮して、より適切な視覚要素を使用することになります。

つまり、W3C によれば、「アクセシブルな Web サイトとは、さまざまな能力を持つユーザーが Web ページによって提供される情報やサービスを簡単に使用できることを意味します。」これは、WCAG 2.0 (W3C によって開発および推奨され、現在受け入れられているガイドライン) の目標でもあります。

(画像出典: http://www.wcag2madeeasy.com/index_es.html)

• アクセシビリティ プロジェクトを「中心」から始めましょう

アクセシブルな Web サイトを構築するための最初のステップは、障害を持つ人々が Web サイトをどのように利用するかを理解することです。 W3C は、実際の Web ユーザーのストーリー、さまざまな Web ユーザー グループの調査、ユーザーが Web ページをどのように操作するかについての議論など、関連リソースをまとめています。 この情報を確認すると、障害のある人々が Web とどのようにやり取りするかを完全に把握できます。

アクセシブルな Web ページのコンポーネントについて考えることも重要です。デザイナーは、アクセシビリティを高めるためにデザインする視覚要素を制限しようとするかもしれませんが、他の関連情報、特にアクセシビリティを向上させるために使用される支援技術やソフトウェアを Web デザインにどのように伝えるべきかを理解することが重要です。

(画像出典: http://www.w3c.hu/forditasok/WAI/intro/components.html)

プロジェクト開始時とWebページが選択されています ツールを編集するときは、アクセシビリティ ガイドラインに必ず留意してください。ただし、すべての Web 要素が同じレベルのアクセシビリティを提供するわけではありません。アクセシブルな Web サイトを構築するためのこれらのツールは、開発者が編集ツールを選択するときに考慮する基準の 1 つである必要があります。

最後に、プロジェクトを開始する前に、WCAG 2.0 によって作成された推奨事項を確認してください。これらのドキュメントの推奨事項に従うことで、Web サイトのコンテンツが検出可能で、実用的で、理解しやすく、健全であることが保証されます。

• 正しい HTML 構造

アクセシブルな Web サイトを構築する際に注意すべき重要な点の 1 つは、HTML のセマンティクスを適切に使用する必要があるということです。これを簡単にするためのヒントをいくつか紹介します。

1. 画像の代替テキストを提供します。スクリーン リーダーが代替テキストを読み上げるときに意味のあるものにします。テキストは画像と同じ意味を伝える必要があります。

2. タイトル タグを正しく使用する: スクリーン リーダーは、これらのタイトル タグを重要な情報への手がかりとして、また Web サイトのコンテンツを構成する基礎として認識します。無視したり、読み飛ばしたり、無計画に使用したりしないでください。

3. アクセシビリティ対応のフォームを作成します。各入力フィールドで説明と適切なラベルを使用し、ラベル タグまたは ARIA 属性を使用してラベルを入力フィールドに関連付けます。

4. アクセシブルなテーブルを使用する: 以前は、レイアウトにテーブルを使用することが非常に一般的でした。ただし、スクリーン リーダーは、テーブルの本当の目的 (データの表示または純粋な書式設定) を区別できません。したがって、テーブルを不適切に使用すると、スクリーン リーダーのユーザーに不必要な複雑さと混乱を引き起こす可能性があります。

画像ソース: http://www-03.ibm.com/able/news/html5.html

• 視覚コンテンツを使用する

視覚障害のあるユーザーがアクセシビリティを損なわないよう、視覚要素を慎重に検討する必要があります。このようなユーザーは、Web の閲覧時に視覚的な障害を取り除くために、ハイコントラストのブラウザーやスクリーン リーダーを使用したり、CSS スタイルを削除するための設定ルールを使用したりするなど、特別な方法を使用することがよくあります。視覚障害のあるユーザーに最大限の寛容性を提供する Web サイトを作成するには、次の提案を検討してください:

情報を伝える手段としてのみ「色」を使用しないでください

フォームでのみ使用する場合列としての色 ビットの違い。色盲やスクリーン リーダーのユーザーに影響を与える可能性がありますが、他のユーザーにとっては非常に役立ちます。したがって、色要素を使用する必要がありますが、重要なメッセージを伝える方法として他の要素も提供する必要があります。

重要な情報を伝達または表示するために CSS を使用しないでください

一部のブラウザでは、CSS スタイルをカスタマイズするオプションがユーザーに提供されているため、カスタマイズされた CSS は元のプリセットのデザイン スタイルを上書きします。 Web ページをデザインするときは、すべての重要な情報と機能の CSS を元のファイルから分離する必要があることに留意することが重要です。レンダリングされるコンテンツでより多くの CSS が使用される場合は?これは障害のある人々にとっても困難を増大させます。 知らせ！革新的なデザインは一部のユーザーを放っておくことはありません。

画像や音声以外のファイルを提供する

今日の Web ページは、ポッドキャストやビデオなどのマルチメディア アプリケーションに大きく依存しています。このタイプのコンテンツを使用する場合は、視覚障害や聴覚障害を持つ視聴者のためにテキストの代替手段を提供してください。つまり、作成するテキストはビデオとオーディオの両方のコンテンツに適しており、タイトルはすべてのビデオに適している必要があります。

説明的なテキスト リンクを使用する

スクリーン リーダーで Web サイトを閲覧する場合、ユーザーはプレーン テキスト リンクを使用してリンク先を決定します。その理由は、一部のユーザーにとって、R続きを読むやalt記述のない画像などのリンクは、リンク先が分からず邪魔になるためです。テキストリンクでは、「続きを読む」よりも「会社概要を読む」のような、簡潔で強力な説明文を使用する必要があります。このようにすると、リンクが理解しやすくなるだけでなく、音声認識ソフトウェアを使用している人にとっても覚えやすく、繰り返し再生しやすくなります。

動的コンテンツを使用する場合は注意してください

実際、現在すべての Web サイトでは、双方向性と機能性を向上させるために JavaScript およびその他のテクノロジーが使用されています。ただし、動的コンテンツはスクリーン リーダーで問題を引き起こし、キーボードのみのユーザーがサイトを閲覧するのを妨げる可能性があります。開発段階で「アクセシビリティ」を考慮していないと、いつでも突然別の問題が発生する可能性があります。 (注: スクリーン リーダーは、ページ全体をリロードしない一部のアクション (ライトボックス、ポップアップなど) などの動的コンテンツを読み取ることができません。)

ARIA の役割を学習して理解します

WAI-ARIA (The Web Accessibility Initiative Accessible Rich Internet Applications) の推奨コンテンツは、Web 開発者がより「バリアフリー」な動的コンテンツを作成できるように支援することを目的として、W3C 仕様に基づいて設計されています。 ARIA 仕様全体は開発者による真剣な研究に値します。また、HTML を作成する人は、HTML 要素に追加できる新しいロールと aria-label 属性についても時間をかけて学ぶ必要があります。これらの属性は、障害のある人が動的な Web サイトをナビゲートするのを支援するのに役立ちます。

キーボードのみのユーザー向けに機能を予約します

運動に問題がある人は、必要なタスクを実行するためにマウスを効率的かつ正確に操作できないことがよくあります。したがって、Web ページの閲覧や操作には特別なキーボードが使用されます。しかし、複雑なメニュー、スライドショー、ポップアップ、またはマウスホバーによってトリガーする必要があるインタラクションなど、現在 Web サイトで使用されている要素は、これらのユーザーにとってはすべて不親切です。このような状況を避けるために、開発者は、Web サイトで必要なインタラクションを設計する際に、キーボードのみを使用するユーザーを考慮する必要があります。

• Web サイトのアクセシビリティを確認する

市場には、Web サイトのアクセシビリティを評価できるツールやリソースが多数あります。 W3C が提供する Easy Checks が良いスタートになるかもしれません。この Web サイトのリストには、代替テキストのない画像、タイトル (h1、h2...) がない、または順序が間違っている、色のコントラストが近すぎるなど、最も一般的な問題がリストされています。

Easy Checks による最初の検査の後、Web サイト上のアクセシビリティ関連の問題をさらに検出するために、無料または有料のツールの使用を検討する必要があります。 W3C は、いくつかの有用なアクセシビリティ テスト ツールのリストを作成しました。また、「アクセシビリティ評価リソース」ページを参照して、アクセシビリティのテストの詳細を学ぶこともできます。このページには、Web アクセシビリティの評価とテストに役立つ追加のリソースが多数あります。

• その他の追加リソース

Web アクセシビリティについてまだ十分に理解していない場合は、ここで追加の概念教育、教育、ツール、その他の関連リソースを多数提供します。すべての訪問者が Web サイトにアクセスできるようにするためのモデルとして、次の組織を推奨します。

W3C Accessibility Initiative は、アクセシビリティの標準とガイドラインを確立する組織の 1 つです。読者は公式 Web サイトを参照して詳細を学ぶことができ、完全に無料のアクセシビリティ デザイン チュートリアルも提供されており、アクセシビリティ Web サイトの改善前後の例も見ることができます。

Google では、無料の Web アクセシビリティ入門コースも提供しています。このコースでは、基本的なアクセシビリティ対応 Web サイトの構築方法と、Chrome ブラウザでのアクセシビリティ テスト ツールの使用方法を学びます。

ワシントン大学は、必要なときに印刷して参照として使用できる 30 の Web アクセシビリティに関するヒントを PDF リストにまとめました。このチェックリストは、アクセシブルな Web サイトを構築するための基本的なガイドラインをすべて網羅しており、元のアクセシブルな Web サイトのデザインを思い出すのに最適な方法です。

WebAIM は、Web の利用を容易にすることを目的とした別の組織です。WebAIM は、次のツールやシミュレーターなど、さまざまな障害について学ぶためのリソースを多数提供しています。

1. セクション 508。チェックリスト – これは、設計がセクション 508 の要件に準拠していることを確認するのに役立つチェックリストです。

2. WCAG 2.0 チェックリスト – 目標が WCAG 2.0 に準拠することである場合、このチェックリストは、設計が基準を満たしているかどうかを確認するのに役立ちます。

3. カラー コントラスト チェッカー – フォントと背景の色を入力するだけで、2 つのコントラストが WCAG 標準を満たしているかどうかを判断できます。

4. スクリーン リーダーのシミュレーション – このシミュレーターを通じてスクリーン リーダーの使用体験を体験します。

5. ロービジョン シミュレーション – このシミュレーターを使用すると、緑内障、白内障、黄斑変性症など、さまざまな視覚障害のある Web サイト閲覧の影響をシミュレートできます。

6. ディスレクシアのシミュレーション – この簡単な演習により、ディスレクシアの人が本を読むのがどのような感じかを体験できます。このため、Web ページのナビゲーションに影響を受ける閲覧者からの評価がさらに高まります。

7. 気晴らしシミュレーション – このシミュレーションは、気が散ることによる苦痛を感じさせます。そうすることで、気を散らす要素を減らすという核となる価値を持つ Web サイトを高く評価するようになります。

(この記事は「Design Big Tongue」の許可を得て転載しています、原題は「Creating an Accessible Website」、著者/Tara Senn、翻訳/Jeremy、画像出典: y.accesslab CC Licensed、許可なし 許可なく転載しないでください)