ウェブのアクセシビリティ

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

アクセシビリティとは

この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発の作業フローに取り組む方法が含まれます。

アクセシビリティツールと支援技術

次に、アクセシビリティツールに目を向け、アクセシビリティの課題解決を手伝っていただくために使用できるツールの種類や、ウェブを閲覧する際に障碍者が使用する支援技術に関する情報を指定します。 これらのツールは、次の記事でも使用します。

HTML: アクセシビリティの良き基本

ウェブコンテンツをアクセシビリティ高くすることの多くの部分は、どんなときも正しい HTML 要素を正しい目的で使うことです。 この記事ではアクセシビリティを最大化するためにどう HTML が使われるかの詳細を見ていきます。

CSS と JavaScript のアクセシビリティのベストプラクティス

CSS と JavaScript も、適切に使うと、アクセシビリティの高いウェブ体験を可能にする力を持っていますが、誤用されると目立ってアクセシビリティを害することもあります。この記事では、複雑なコンテンツでもなるべくアクセシビリティ高める CSS と JavaScript のいくつかの成功事例をざっと見ます。

WAI-ARIA の基本

前の記事に続いて、複雑な UI に非セマンティックな HTML や動的な JavaScript-更新コンテンツを作ることは難しいかもしれません。WAI-ARIA は、そうした問題をブラウザーと補助技術が認識できるセマンティクスを追加することで補助し、ユーザーに何が起きているのかを知らせるのに使うテクノロジーです。ここではアクセシビリティを改善する基本レベルの使用方法を示します。

アクセシブルなマルチメディア

アクセシビリティの問題を起こす可能性がある他のカテゴリーは、マルチメディアです。ビデオ、オーディオ、およびイメージのコンテンツには、補助技術とユーザーが理解できるような、適切な代替テキストを付与する必要があります。どのように表示されるべきか分かるように。

モバイルのアクセシビリティ

モバイル端末でのウェブへのアクセスが増えるとともに、アクセシビリティのツールが本格的に提供されている iOS や Android のような一般的なプラットフォームが普及しています。これらのプラットフォームでのあなたのウェブコンテンツのアクセシビリティを考えることが重要です。モバイル特有のアクセシビリティについて検討しましょう。

アクセシビリティのトラブルシューティング

このモジュールの評価では、分析と修正が必要な多くのアクセシビリティの問題があるシンプルなサイトを紹介します。

Start Building Accessible Web Applications Today

Marcy Sutton によるすばらしい動画チュートリアル。

Deque University resources

コードサンプルやスクリーンリーダーリファレンスやその他の役立つリソースを含む。

WebAIM resources

ガイド、チェックリスト、ツールなどを含む。

Web Accessibility Evaluation Tools List

ウェブアクセシビリティ評価ツールの一覧を含む。

Learn Accessible Web Design ^{MDN カリキュラムパートナー}

Scrimba の Learn Accessible Web Design コースでは、対話型のコーディング課題を解き、現実のウェブサイトを修正することで、アクセシビリティの高い HTML の書き方を学びます。

• Overview: コア学習モジュール
• 次のページ