Webアクセシビリティデザインの基本についてのデザイナーのガイド

Webは、誰もが世界中のどこからでも同じコンテンツにアクセスできる場所であるべきです。レスポンシブテクニックは、 デバイスにとらわれない設計. しかし、どうですか アクセシビリティにとらわれないデザイン?

Webのアクセシビリティは何年も前からありますが、その実装には技術とWeb開発における新しい進歩が必要です。多くの開発者が手助けを望んでいますが、アクセシビリティを考慮して設計する方法を理解するのは難しいです。これには、コントラストの高いテキスト、視覚障害者用のオーディオページ、最適化されたメディア、およびJS / CSS以外のブラウザ用のフォールバックが含まれます。.

この記事では、アクセシビリティ・デザインの基本、それが何であるか、それが解決することを目指していること、そして始めるためにあなたがとることができるステップをカバーします。注意してください、これは非常に詳細な主題であり、それを完全に理解するのに数カ月または数年の練習が必要になります。しかし、その利点は努力に値するものであり、あなたのすべてのWebプロジェクトはすべての訪問者にアクセス可能なコンテンツの永続的な印象を与えるでしょう。.

アクセシビリティ入門

一般的に言って、アクセシビリティとはコンテンツを構築するという考え方です。 それは誰でも消費することができます. これには、読むことができない盲目の人々や、マウスやキーボードを操作できない身体障害のある人々（またはそのいずれか）が含まれることがあります。.

しかしそれはまたを持つ人々を含むことができます わずかな欠陥 ビジョンの中で。それには 失読症または読解問題. 実際のところ、 “ウェブアクセシビリティ” 含む 誰かがWebサイトと対話したりWebサイトを利用したりする方法に影響を与える可能性のあるあらゆる障害.

ウィキペディアの定義で説明されているように、おそらくもっと重要なのは、Webアクセシビリティが提供できるものです。

それでも、Anne Gibsonは、彼女のList Apartの記事で、Wikipediaの定義は曖昧過ぎると主張していますが、そうではありません。ただ障害者についてそれは本当に みんな ウェブ上で世界中から インターネットへの最適なアクセスがない可能性があります.

多くの開発者は、アクセシビリティは読むことができない盲目の人々のためだけのものだと考えています。しかし、実際にはWebアクセシビリティには4つの主要なカテゴリがあります。

ビジュアル - 弱視または視力不良/視力なし
聴覚 - 聴覚障害者または聴覚障害者
認知 - 情報の理解または消費に関する問題
モーター - キーボードや音声コマンドプログラムのような特別な入力装置を必要とするかもしれない物理的なアクセシビリティ問題

これらのカテゴリにはそれぞれ、広範なテクニックがあります。 Web標準と同じくらい急速に変化する. しかし、WCAG（Web Content Accessibility Guidelines）に批准されているこれらの標準には安定感があります。.

ようないくつかのウェブサイト、 政府機関はこれらのガイドラインに従うことを法律で義務付けられています. 彼らはW3Cを通じて国際的に適用されます.

Webアクセシビリティの背後にある官僚主義を見て、次にいくつかの適用可能な設計のヒントに飛び込みましょう。.

W3Cとアクセシブルデザイン

かなりの数があります ウェブのアクセシビリティに関連する頭字語. あなたがその主題に真新しくないならば、これらは複雑であるかもしれません、しかし、一旦単純化されるならば、私は彼らがもっと理にかなっていることを望みます.

W3C （World Wide Webコンソーシアム） - プロトコル、言語、および規制に関するWeb標準を定義する国際的なグループ。公式のアクセシビリティガイドラインはすべてこの組織に属します.
WAI （Webアクセシビリティイニシアチブ） - アクセシビリティに関するすべてを網羅する公式プログラム。この包括的な用語には、現代のアクセシビリティのためのすべての規則、ガイドライン、および技法が含まれています.
WCAG （Webコンテンツアクセシビリティガイドライン） - アクセシビリティのレベルに基づいてデザイナーがウェブサイトを格付けするのを助けるための標準と規則のグループ.
アリア （アクセス可能なリッチインターネットアプリケーション） - JavaScript / Ajaxおよび類似のテクノロジに依存する、アクセシブルでリッチなアプリケーションを構築する方法を定義した特定の規格。 Anna Monusによるこの投稿で、これについてもっと読む.

他にも、WAIの傘下にガイドラインがあります。 UAAG ユーザーエージェント用 そして ATAG Webオーサリングツール用. 今のところ、あなたはWAIによってなされた提案とWCAGの名の下にWAIのルールセットによって出されたガイドラインに最も興味があるべきです.

より多くを学ぶための素晴らしいリソースは、障害者がインターネットにアクセスする方法の話を共有する、障害に関するW3Cからのこの投稿です。すべての複雑な問題を理解するのは難しいかもしれませんが、それらを解決する方法を理解するのはもちろんです。しかし 最良の情報源は、毎日これらの問題に直面している人々からのものです。.

あなたが理解するべきもう一つの重要な主題はWCAG適合性です。これは Webサイトのアクセシビリティレベル さまざまな要因を網羅しています。レベルはへの準拠に基づいています A、AA、AAAの評価システム. これはWebのアクセシビリティチェックツールで確認できます。最高得点はAAAです.

これらのガイドラインについてもっと学ぶために、W3CのIntroduction to Understanding WCAG 2.0の記事をチェックしてください。詳細については、これらの関連リンクもご覧ください。

WCAG 2.0の簡略化
セクション508 WCAGパフォーマンス

アクセシブルデザインへのステップ

実用的なアクセシビリティのヒントについては、A11YプロジェクトのWebサイトにアクセスすることを強くお勧めします。 A11Y（これもまた名字です）はGitHubでホストされている無料のオープンソースプロジェクトです。, アクセシブルなWebデザインのためのテクニックを提供する.

アクセシビリティ項目のチェックリスト、またはドロップダウン、タブ、アコーディオン、ボタン、モーダルウィンドウ（その他の項目のような）などの要素のデザインパターンの集まりさえも閲覧できます。.

これらすべてを学び、それを同時に実装することは困難です。一歩一歩それを取り、あなたが混乱した場合はより多くの研究に喜んでである.

A11Yのハウツーと始めるための簡単なヒントをチェックしてください。コンテンツへのリンクへのリンクやコントラストの高いカラースキームなど、具体的な提案にぶつかるでしょう。これらのテクニックはそれぞれ独自の詳細レベルを持っているので、実装は主にどのように機能するかを確認するためのテストです。.

自動コンテンツリーダーを使用している可能性のある盲目のユーザーを検討してください。彼らはまた、オーディオトランスレータ、あるいはマウスではなくキーでウェブをナビゲートするための特別なキーボードさえ持っているかもしれません。これが理由です 適切なセマンティックHTML （この記事を見てください）のようなプロパティでとても重要です tabindex そして アクセスキー.

もしあなたがダイビングしたいのなら、アクセシビリティ対応のテーマを選ぶことを検討してください。あなたは自分のプロジェクトに合うようにアーキテクチャを研究しデザインをカスタマイズすることができます。.

アクセシビリティテストツール

あなたが始めたいのなら、アクセシビリティの分野を選び、それを試してみてください。それからあなたは成功のあなたのレベルを測るためにテストツールを使うことができます.

このプロセスは言及する価値があります イライラすることができます. 考慮すべきことがたくさんあり、WCAGのガイドラインでは、情報過多に陥る可能性があることを理解するのは非常に難しいです。.

重要なことはただ動き続けることです。アクセシビリティの1つの分野を選び、それをあなたの焦点にします。その後、これらのツールを使用して作業を調整し、改善します。.

例えば、あなたはWCAGのコントラストスペックを使って、 読みやすさを向上させる. あなたがあなたの色を選んだら、彼らが一緒に働くかどうか見るためにちょうどこの自由なコントラスト比チェッカーを使ってください.

残念ながら、WCAG 2.0のガイドラインは非常に分かりにくいので、要件を理解するのは難しいかもしれません。しかし、あなたがより多く試みるほど、あなたはより学び、より理解するでしょう。.

既にオンラインになっているサイトをテストするには、WAVEをチェックしてください。それは 無料ビジュアルチェッカー エラー、警告、コントラストの問題、その他のWebサイトの詳細が表示されます。サイドバーにビジュアルビューと問題のリストが表示されます。.

することができますシンシア言うウェブサイト上で別の無料アプリがあります A、AA、AAAのWCAG成功評価のためにウェブサイトをチェックしてください, そして 政府のコンプライアンスに関するセクション508.

そして、あなたがオープンソースに興味があるなら、これらを見てください。 GitHubの無料アクセシビリティテストツール.

HTML CodeSniffer
自動アクセシビリティテストツール
WCAGバリデータ

ブラウザアドオン

ブラウザアドオンは、アクセシビリティテストのための最も早くて簡単な方法を提供する可能性があります。あなたは本当に有用な結果を得るために任意のウェブサイト上の任意のコンピュータからこれらを実行することができます.

Firefox用AInspectorは、アクセシビリティにとって必須のものと見なされています。これはすべてをチェックします、そしてそれはWAVEテスターよりはるかに徹底的です。.

Mozillaユーザーは無料のアドオンでもあるWCAG Contrast Checkerを好むかもしれません.

ChromeユーザーにはAInspectorはありませんが、Googleが正式に作成したAccessibility Developer Toolsがあります。これにより、アクセシビリティガイドラインをチェックするための追加のツールがインスペクタウィンドウに追加されます。.

Chromeユーザーには、色のコントラストの明度チェッカー、およびその他の無料の拡張機能もあります。.

残念ながら、Safariユーザーにはそれほど多くは見つかりませんでしたが、WCAG 2.0への準拠をチェックするOpera用の拡張機能が1つ見つかりました。 Googleを十分に検索するつもりなら、他にもツールがあるかもしれません。.

参考文献

ウェブのアクセシビリティを学ぶことに真剣に取り組んでいるなら、長い道のりに備えてください。それは簡単ではありませんが、それは非常に充実しています.

Webアクセシビリティの実際の定義、それが存在する理由、および開発者が自分のWebサイトを改善するために何をすることが期待されているかについての詳細については、もう少し詳しく理解する必要があります。次のステップは、これらの原則をワークフローに取り入れるためのさらなる調査と実践です。.

詳細については、以下の投稿をチェックしてください。また、情報源から直接知識を得たい場合は、WCAGガイドラインを必ず参照してください。.

マークアップを使用してHTMLテーブルのアクセシビリティを向上させる方法
障害のあるユーザーのためのアクセシブルデザイン
ウェブサイトのアクセシビリティを向上させるための6つのヒント
あなたのサイトが視覚障害者にとってアクセス可能であることを確認する