画像や色の代替コンテンツのサンプル
画像の代替コンテンツの実装のサンプル
alt属性を利用する例
CSSで表現する例
この例には、画像が無効な環境などで代替テキスト(「PDF」)が画面に表示されない問題があります。
アイコンフォントの例
この例には、アイコンフォントのダウンロードに失敗した場合などに代替テキスト(「PDF」)が画面に表示されない問題があります。
この例では、アイコンフォントにFont Awesomeを利用しています。
リガチャアイコンフォントの例
この例では、リガチャーアイコンフォントの作成にIcoMoonを利用しています。
SVGの例
色だけで情報を伝えないのサンプル
色のみで情報を伝える例
この例は色の区別ができない、区別がつきづらいユーザー・環境で必須の項目を把握できない問題があります。
赤字の項目は必須です。
色とテキストで情報を伝える例
この例では色の区別ができない、区別がつきづらいユーザー・環境でも必須の項目を把握できます。