スキルテスト: WAI-ARIA

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

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

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

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

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

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

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