アルトタグ
アルトタグ（アクセシビリティ）
意味 画像の代替テキスト
アルトタグとは？
アルトタグは、HTML上で画像を表示する<img>要素の属性の一つです。画像が表示できない場合や、スクリーンリーダーを使用している場合に、その画像の内容や機能を説明するテキストを提供します。これにより、視覚障害者を含むすべてのユーザーに画像の情報を伝えることができます。
アルトタグの具体的な使い方
「このバナー画像にはアルトタグを追加して、『春の新商品セール』という説明を入れておいてね。」ウェブページ上の特定の画像に対してアルトタグを適用する指示をしている場面です。画像の内容や目的を簡潔に説明するテキストを追加することで、視覚的に画像を見られない人々にも情報を伝えようとしています。
アルトタグに関するよくある質問
Q.アルトタグは空でもいいの？
A.装飾的な画像や、周囲のコンテキストから十分に理解できる画像の場合、アルトタグを空（alt=""）にすることがあります。ただし、アルトタグを完全に省略するのではなく、空の値を設定することが重要です。これにより、スクリーンリーダーはその画像を無視し、ユーザー体験を向上させることができます。
Q.アルトタグの最適な長さは？
A.アルトタグの最適な長さは、一般的に125文字以下とされています。これは多くのスクリーンリーダーが一度に読み上げる文字数の制限に基づいています。ただし、画像の内容を簡潔かつ正確に説明することが最も重要で、必要に応じてこの長さを超えることもあります。
Q.SVG画像にもアルトタグが必要？
A.SVG画像には直接アルトタグ（alt属性）を付けることはできませんが、アクセシビリティを確保するための方法があります：
1. SVGをインラインで使用する場合、<title>要素と<desc>要素を追加して説明を提供
2. <img>タグでSVGを参照する場合、通常の画像と同様にalt属性を使用
3. SVGに意味がある場合、aria-labelledbyやaria-label属性を使用して説明を提供
マーケ単はアプリでも学べます！
デザイン単語帳がアプリになりました！デザイン倫理とインクルージョンはもちろん、デザイン業界でよく使う単語をスマホで学習できます。
いつでも、どこでも、隙間時間を有効活用して、デザイン用語を効率的に学べるので、ぜひダウンロードしてみてください。
