画像に説明文を付ける(画像にalt属性を追加する)
概要
記事内の画像に説明文を付けるには、画像のHTMLタグにalt属性を追加してください。
Widget内に画像を追加してHTMLを直接編集することでalt属性を追加いただけます。
操作手順(Widget内の画像を編集する)
- 管理画面で対象ページに画像が追加可能な任意のWidgetを追加します。(例:Widget名:左右余白なし(全幅表示、画像/動画))
- 該当WidgetでHTML編集を選び、HTML内の<img>タグにalt属性を追加します。
- 「更新ボタン」を押下して内容を確認します。
コード例
基本的な記述例:
<img src="https://example.com/image.jpg" alt="商品の正面写真(白い背景、サイズはXXcm)">
<img src="/img/decorative.png" alt="">
表示への影響とアクセシビリティ上の注意点
- 画像の意味を端的に伝える短い文章を入れてください。
- alt属性は通常の表示には影響しませんが、画像が読み込めないときに代替テキストとして表示され、スクリーンリーダーが読み上げます。
- 装飾目的のみで内容を伝えない画像は、alt=""(空文字)を使用してください。
関連FAQ
この記事は役に立ちましたか?
フィードバックありがとうございます。