画像や色の代替コンテンツのサンプル

画像の代替コンテンツの実装のサンプル

alt属性を利用する例

地図PDF

CSSで表現する例

この例には、画像が無効な環境などで代替テキスト(「PDF」)が画面に表示されない問題があります。

地図PDF

アイコンフォントの例

この例には、アイコンフォントのダウンロードに失敗した場合などに代替テキスト(「PDF」)が画面に表示されない問題があります。

地図

この例では、アイコンフォントにFont Awesomeを利用しています。

リガチャアイコンフォントの例

地図PDF

この例では、リガチャーアイコンフォントの作成にIcoMoonを利用しています。

SVGの例

地図 PDF

色だけで情報を伝えないのサンプル

色のみで情報を伝える例

この例は色の区別ができない、区別がつきづらいユーザー・環境で必須の項目を把握できない問題があります。

赤字の項目は必須です。

色とテキストで情報を伝える例

この例では色の区別ができない、区別がつきづらいユーザー・環境でも必須の項目を把握できます。