スキルテスト: HTML アクセシビリティ

この課題では、テキストの意味付けと、なぜそれがアクセシビリティによいのかについての理解をテストします。指定されたテキストはアクションボタン付きの単純な情報パネルですが、 HTML は実にひどいものです。

適切な意味づけを使用した HTML に更新してください。テキストの意味付けさえしっかりしていれば、全く同じ見てくれを再現したり、テキストのサイズを変更したりすることについて、あまり心配する必要はありません。

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

2 つ目の課題では、 3 つの入力フィールドを含むフォームがあります。必要なことは次の通りです。

• 入力フィールドとそのラベルを意味づけしてください。
• これらの入力フィールドはより大きな形式の一部になることを想定し、それらをすべて単一の関連グループとして関連付ける要素で囲んでください。
• グループに、個人データとしての情報をすべて要約する説明/タイトルを設定してください。

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

この課題では、段落内の情報リンクをすべてアクセシビリティのある良いリンクに変えてください。

• 最初の 2 つのリンクは、通常のウェブページへのリンクです。
• 3 つ目は PDF へのリンクで、 8MB と大きいものです。
• 4 番目のリンクは Word 文書に飛ぶので、ユーザーはそれを処理する何らかのアプリケーションをインストールする必要があります。

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

最後の HTML アクセシビリティ課題では、アクセシビリティ上の問題がある単純な画像ギャラリーがあります。修正することができますか？

• ヘッダー画像はアクセシビリティの課題があり、ギャラリー画像も同様です。
• ヘッダー画像をさらに改善させ、 CSS を使用して実装することで、間違いなくアクセシビリティを向上させることができます。なぜその方が良いのでしょうか？また、その解決策はどのようなものでしょうか？

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