ユーザー補助学習へようこそ

デジタル アクセシビリティ(a11y と略される)は、障がいのあるユーザーが有意義かつ同等の方法で操作できるウェブサイトやウェブアプリを設計、構築するものです。

このコースは、ウェブ デベロッパーの初級および上級を対象としています。 このシリーズを最初から最後まで通じて、ユーザー補助機能の実践とテストに関する一般的な理解を得ることができます。また、特定の科目のリファレンスとして使用することもできます。馴染みのない用語については、用語集をご覧ください。ウェブ開発全般についてあまり詳しくない方は、マークアップの基礎については HTML を学ぶコース、スタイル設定の基礎については CSS について学ぶの各コースをご覧ください。

これは完全なリファレンスではありません。各セクションでは、セクションのトピックを紹介し、背景情報と例を提供します。MDNWCAG の仕様などのトピック リファレンス、およびその他の web.dev の記事へのリンクも記載されています。各セクションには 理解度を確認するための 簡単な理解度チェックがあります

ユーザー補助に関するおすすめの方法は、対処する障がいによって異なります。ユーザーを理解し、障がいのあるユーザーの意見に耳を傾けることが大切です。

皆様からのご意見やご感想をお待ちしております。Google が対処できるように、GitHub の問題を開き、できるだけ多くの情報を提供してください。

次の内容を学習します。

デジタル アクセシビリティとは何か、なぜ重要なのか

障がいのあるユーザーが有意義かつ同等の方法で操作できるウェブサイトやウェブアプリを設計、構築する。これらの選択がビジネスや法律に及ぼす影響をご確認ください。

ARIA と HTML

ARIA と HTML の使い分け

コンテンツの構造

アクセス可能なコンテンツにセマンティック HTML、ランドマーク、テーブルを使用します。

ドキュメント

誰にとっても使いやすいウェブサイトやウェブアプリを作成する際に考慮すべき、その他の HTML 要素です。

キーボード フォーカス

キーボード ナビゲーションの順序とスタイルを理解し、改善します。

JavaScript

アクセス可能なトリガー イベント、ページタイトル、動的コンテンツなどを記述します。

画像

アクセス可能なイメージを作成する。

色とコントラスト

適切なコントラストで、アクセシビリティの高いカラーパレットを作成します。

アニメーションとモーション

あらゆる種類の動きによる障害を持つ人をサポートします。

タイポグラフィ

適切な書体とフォントサイズを選び、アクセシビリティの高いレイアウトで文章を構成しましょう。

映像と音声

動画と音声にアクセスできるようにする代替メディアタイプ。

フォーム

アクセス可能なフォームを作成する。

デザインとユーザー エクスペリエンス

誰にとっても使いやすいデザインを作成し、ユーザー エクスペリエンスを評価します。

ユーザー補助機能の自動テスト

自動化されたユーザー補助テストを実行する方法

手動のユーザー補助機能テスト

ユーザー補助機能を手動でテストする方法

支援技術のテスト

支援技術(AT)によるテスト方法

まとめと次のステップ

次のステップに進むのに役立つその他のリソース。

用語集

ユーザー補助に関する一般的な用語と概念をご確認ください。

それでは、ユーザー補助について学びましょう。それでは始めましょう