《メディアコンテンツの伝え方 Vol.6》代替テキストのケーススタディ：アイコンや罫線の指定方法

今回からは、代替テキストのさまざまな指定例を紹介していきます。本来であれば、原稿を用意する著者や編集者が代替テキストを考えるのが理想です。しかし、実際にはそうでないケースもあるでしょう。たとえば、原稿をもとにHTMLを記述する人や、CMSに登録する担当者が、代替テキストを用意する場面もあるかもしれません。そうした際に、どのような視点で代替テキストを指定すればよいか、その参考になるような事例を紹介していきます。

なお、以前にも触れたように、代替テキストは画像が使われる場所や目的によって最適な内容が変わります。ここで取り上げるのは、あくまで「ひとつの例」に過ぎません。また、「画像があるからといって、必ずしも代替テキストを用意すべき」とも限りません。状況によっては、画像を使わずに他の表現に置き換えたほうが適切な場合もあります。

装飾目的の罫線

まずは、装飾目的の罫線についてです。たとえ文中に登場する画像であっても、罫線のように視覚的な装飾を目的としたもので、情報としての意味を持たない場合には、代替テキストを指定する必要はありません。

<img src="separator.png" alt="">

これでも構いませんが、罫線をimg要素としてHTML上に配置したくない場合は、div要素やspan要素など、意味を持たない要素を使用して、CSSのbackground-imageプロパティで画像を指定します。

<div class="separator"></div>

.separator {
  width: 100%;
  height: 1px;
  margin-block: 30px;
  background-image: url("separator.png");
}

記事ページなどでは、見出しの上に区切りを示す画像を置く場合があります。CodeGridの記事ページでは、見出しの上に区切りを示す画像があります。

これも装飾目的の画像です。ですので、h2要素の::before疑似要素を使い、そのbackground-imageプロパティでSVG画像を指定しています。

h2:before {
  display: block;
  content: url(data:image/svg+xml,<svg width="50" height="30" viewBox="0 0 50 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M25 10C27.7614 10 30 7.76142 30 5C30 2.23858 27.7614 0 25 0C22.2386 0 20 2.23858 20 5C20 7.76142 22.2386 10 25 10Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M45 10C47.7614 10 50 7.76142 50 5C50 2.23858 47.7614 0 45 0C42.2386 0 40 2.23858 40 5C40 7.76142 42.2386 10 45 10Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z" fill="black"/></svg>);
  height: 12px;
  margin-bottom: 50px;
}

装飾目的ではない罫線

一方で、罫線が単なる装飾ではなく、内容の区切りとして意味を持つ場合には、使用するHTMLの要素も変わってきます。

意味のある区切りとして罫線を用いる場合には、hr要素を使用するのが適切です。hr要素は、文脈上の場面転換や話題の切り替えといった、段落レベルでのテーマの区切りを示す意味を持っています。

<hr>

hr {
  width: 100%;
  height: 1px;
  margin-block: 30px;
  border: 0;
  background-image: url(罫線.png);
}

文と文の間に線を引きたい場合に、それは意味があるのか意味がないのか、しっかり考えてから適切な要素を使用しましょう。

装飾目的のアイコン

次に装飾目的のアイコンを考えてみましょう。そのアイコンが消えても意味が変わらない、あくまで装飾のみで意味を持たない場合は、img要素の場合はalt属性値を空にします。

<span class="Tag"><img src="path/to/file-icon.png" alt="">html</span>

svg要素の場合は、svg要素に aria-hidden=”true” を付与します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" aria-hidden="true"><!-- 省略 --></svg>

OS標準の絵文字を利用する場合には注意が必要です。

OS標準の絵文字は代替テキストが設定されています。手のひらをあわせて合掌をするジェスチャーの絵文字🙏は、感謝の意味で使われることがあります。ですが、macOSのスクリーンリーダーでは「ごめんなさい」と読み上げられます。この絵文字は、お願い、祈り、お詫びといったいくつかの意味を持ちます。国によってはハイタッチを表現します。

その絵文字が意味を持たない場合は、span要素などで囲い、 aria-hidden=”true” を付与します。

<p>色々とありがとうございます<span aria-hidden="true">🙏</span></p>

装飾目的で使用されており、特に意味を持たない場合には、絵文字にも aria-hidden=”true” を付与して、スクリーンリーダーなどによる読み上げの対象から外しておくとよいでしょう。そうすることで、不要な情報を読み上げてしまうことで生じる誤解を避けることができます。

装飾目的ではないアイコン

罫線と同様に、アイコンについても装飾目的ではないケースを考えてみましょう。ここで言う「装飾目的ではないアイコン」とは、そのアイコンが表示されないと文章の意味が変わってしまうようなものを指します。

次の例では、文章中に絵文字アイコンが使われていますが、アイコンが表示されないと内容の解釈が変わってしまいます。そのため、このような場合には、適切な代替テキストを設定する必要があります。

<p>
私のお気に入りのSlackの絵文字は<img src="path/to/hatching_chick.png" alt="孵化したひよこ">です。
</p>

アイコンを配置する際に、svg要素を使用する場合は、次のようrole属性・aria-label属性・title要素を使用します。

<li>
  <a href="/list/">商品一覧 <svg role="img" aria-labelledby="list-new-label"><title id="list-new-label">New!</title><!-- 省略 --></svg></a>
</li>

ここまでのまとめ

今回のポイントをまとめると、次の通りです。

• 装飾目的の罫線 → 罫線としての意味を持たない場合は代替テキスト不要
• 装飾目的ではない罫線 → 罫線としての意味を持つならを使う
• 装飾目的のアイコン → 消えても意味が変わらないは alt=”” や aria-hidden=”true” を使う
• 装飾目的ではないアイコン → 消えると意味が変わる場合は代替テキストを必ず付ける

どの例においても、基本的に考え方は同じです。画像として表示されているものが「どんな意味を持っているのか」を考え、その意味を適切に代替テキストとして指定します。

ただし、画像があってもなくても文章の意味が変わらないような、純粋に装飾目的のものであれば、代替テキストを指定する必要はありません。

おまけ：確認クイズ

記事の内容を理解できたかどうか、簡単なクイズでチェックしてみましょう。次のうち、代替テキストを「空（alt=””）」にするのが適切なのはどれでしょうか？

• ページのデザイン上の区切り線として入れている罫線の画像
• カートに入れた商品ページへのリンクである「カート」アイコン
• フッターにある「X（旧Twitter）」へのリンクアイコン

回答と解説は、次回の記事でご紹介します。どれが適切なのか、考えてみましょう。

執筆

＜過去記事はこちら＞

• 《Vol.1》 その画像、ちゃんと伝わっている？　コンテンツ運用におけるアクセシビリティの考え方
• 《Vol.2》 Webサイトやアプリにおける画像の代替テキスト
• 《Vol.3》 Web以外での画像の代替テキスト
• 《Vol.4》代替テキストを指定する
• 《Vol.5》代替テキストはどう書けばいい？　具体例とAI活用のヒント