2.4 KiB
2.4 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d774c367417b2b2512a9c | 視覚障害者のアクセシビリティのために画像の代替テキストを追加する | 0 | https://scrimba.com/c/cPp7VfD | 16628 | add-a-text-alternative-to-images-for-visually-impaired-accessibility |
--description--
他のチャレンジで、img タグに alt 属性があるのを見たことがあるでしょう。 alt テキストは画像の内容を説明するもので、画像に対する代替テキストを提供します。 alt 属性は、画像の読み込みに失敗したり、ユーザーがそれを見ることができない場合に役立ちます。 また、検索エンジンが検索結果の画像に含まれているものを理解するためにも使用されます。 例:
<img src="importantLogo.jpeg" alt="Company logo">
視覚障害を持つ人々は、ウェブコンテンツをオーディオインターフェースへ変換するためにスクリーンリーダーを利用しています。 視覚的にしか表示されていない場合、彼らは情報を取得できません。 画像の場合、核心となる情報を伝えるために、スクリーンリーダーは alt 属性にアクセスしてその内容を読み上げることができます。
良い alt テキストは、画像の簡単な説明を読者に提供します。 画像には alt 属性を常に含めるようにしましょう。 HTML5 仕様では、これは必須と考えられています。
--instructions--
Camper Cat はコーディング忍者かつ実際の忍者でもあり、その知識を共有するためにウェブサイトを作成しています。 彼が使用したいプロフィール画像は彼のスキルを表すものなので、すべてのサイト訪問者に認識されるべきです。 img タグに alt 属性を追加し、Camper Cat が空手をしている様子だと説明してください。 (画像の src は実際のファイルにリンクされていないため、alt テキストが表示されることが確認できるでしょう。)
--hints--
img タグは空ではない alt 属性を持つ必要があります。
assert($('img').attr('alt'));
--seed--
--seed-contents--
<img src="doingKarateWow.jpeg">
--solutions--
<img src="doingKarateWow.jpeg" alt="Someone doing karate">