スキルテスト: WAI-ARIA

このスキルテストの目的は、あなたがWAI-ARIA の基本の記事を理解したかどうかを評価することです。

メモ: 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePenjsFiddleGlitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。

行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。

WAI-ARIA 1

最初の ARIA の課題では、明らかにリストであることを意味している、意味づけされていないマークアップの節を表示します。使用する要素を変更することができないと想定して、スクリーンリーダーのユーザーにこれをリストとして認識させるにはどうすればよいでしょうか。

以下のライブコードを更新して、完成例を再現してみてください。

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

WAI-ARIA 2

2 つ目の WAI-ARIA の課題では、単純な検索形式を表示していますが、アクセシビリティを改善するためにいくつかの WAI-ARIA の機能を追加してください。

  1. 検索フォームをスクリーンリーダーによってページに別個のランドマークとして呼び出されるようにし、簡単に見つけられるようにするにはどうすればよいでしょうか。
  2. DOM に目に見えるテキストラベルを明示的に追加することなく、検索入力に適切なラベルを付けるにはどうすればよいでしょうか。

以下のライブコードを更新して、完成例を再現してみてください。

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

WAI-ARIA 3

最後の WAI-ARIA の課題では、前回の CSS と JavaScript のスキルテストで見た例を返します。前回と同様に、動物の名前のリストを表示する単純なアプリがあります。動物の名前を 1 つクリックすると、その動物の詳細な説明がリスト以下のボックスに現れます。ここでは、マウスとキーボードでアクセスできるバージョンから始めています。

ここでの問題は、 DOM が新しい説明を表示させるために変更されたとき、スクリーンリーダーは何が変更されたのかわからないということです。説明の変更がスクリーンリーダーによってアナウンスされるように更新することはできますか。

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。