アクセシビリティ

公共サービス、教育、 e コマースサイト、エンターテイメントなどのウェブコンテンツにアクセスすることは、人間として正しい行為です。障碍、人種、地理的条件、または他にも人間としての特性を理由に、誰一人として排除されるべきではありません。このモジュールでは、ウェブサイトを可能な限りアクセシビリティの高いものにするために学ぶべき最善の手法やテクニックについて解説します。

前提知識

このモジュールを始める前に、 HTML, CSS, JavaScript を理解しておいてください。

メモ: 自分のファイルを作れないコンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を JSBin や Glitch などのオンラインコーディングプログラム内で試すことができます。

チュートリアルと課題

アクセシビリティとは: この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発の作業フローに取り組む方法が含まれます。
Accessibility tooling and assistive technology: 次に、アクセシビリティツールに目を向け、アクセシビリティの課題解決を手伝っていただくために使用できるツールの種類や、ウェブを閲覧する際に障碍者が使用する支援技術に関する情報を指定します。これらのツールは、次の記事でも使用します。
HTML: アクセシビリティの良き基本: ウェブコンテンツをアクセシビリティ高くすることの多くの部分は、どんなときも正しい HTML 要素を正しい目的で使うことです。この記事ではアクセシビリティを最大化するためにどう HTML が使われるかの詳細を見ていきます。
CSS と JavaScript のアクセシビリティのベストプラクティス: CSS と JavaScript も、適切に使うと、アクセシビリティの高いウェブ体験を可能にする力を持っていますが、誤用されると目立ってアクセシビリティを害することもあります。この記事では、複雑なコンテンツでもなるべくアクセシビリティ高める CSS と JavaScript のいくつかの成功事例をざっと見ます。
WAI-ARIA の基本: 前の記事に続いて、複雑な UI に非セマンティックな HTML や動的な JavaScript-更新コンテンツを作ることは難しいかもしれません。WAI-ARIA は、そうした問題をブラウザーと補助技術が認識できるセマンティクスを追加することで補助し、ユーザーに何が起きているのかを知らせるのに使うテクノロジーです。ここではアクセシビリティを改善する基本レベルの使用方法を示します。
アクセシブルなマルチメディア: アクセシビリティの問題を起こす可能性がある他のカテゴリーは、マルチメディアです。ビデオ、オーディオ、およびイメージのコンテンツには、補助技術とユーザーが理解できるような、適切な代替テキストを付与する必要があります。どのように表示されるべきか分かるように。
モバイルのアクセシビリティ: モバイル端末でのウェブへのアクセスが増えるとともに、アクセシビリティのツールが本格的に提供されている iOS や Android のような一般的なプラットフォームが普及しています。これらのプラットフォームでのあなたのウェブコンテンツのアクセシビリティを考えることが重要です。モバイル特有のアクセシビリティについて検討しましょう。
アクセシビリティのトラブルシューティング: このモジュールの評価では、分析と修正が必要な多くのアクセシビリティの問題があるシンプルなサイトを紹介します。

前提知識

チュートリアルと課題

関連情報