アクセシビリティ

あるサイトが「アクセシビリティがある」と記述されている場合、それは、ユーザーがどのようにウェブにアクセスしているかにかかわらず、すべてのユーザーがその機能やコンテンツを使用することができることを意味しています。

• ウェブサイトは、キーボード、マウス、タッチ画面のユーザー、そしてスクリーンリーダーや Alexa や Google Home のような音声アシスタントを含む、ユーザーがウェブにアクセスする他のどんな方法でもアクセス可能であるべきです。
• アプリケーションは、聴覚、視覚、身体、認知能力に関係なく、理解しやすく、利用しやすいものでなければなりません。
• また、ウェブサイトは害を発生させるものであってはなりません。動きのようなウェブ機能は、片頭痛やてんかん発作を引き起こす可能性があります。

既定では、HTML は正しく使用すればアクセシブルです。 ウェブアクセシビリティには、誰が、どのようにウェブにアクセスするかに関係なく、コンテンツがアクセシブルであり続けることを保証することが含まれます。

Firefox のアクセシビリティインスペクターは、ウェブページのアクセシビリティの課題を調べるのにとても有益なツールです。以下の動画は、このツールの素晴らしい紹介です。

このモジュールの大半の理解には、少なくとも HTML, CSS, JavaScript の最初の 2 モジュールを通して読むのが良いでしょうし、 たぶんもっと良いのは、関連するテクノロジートピックを進めるにつれて、関連するアクセシビリティの部分を進めるのが良いでしょう。

アクセシビリティとは

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

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 — ガイド、チェックリスト、ツールなどを含む