先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで画像やアイコンを使うとき、文字の説明って必要なんですか？そもそもパソコンを触ったことがなくて…」

先生

「必要です。画像やアイコンは目で見る人だけでなく、音声で読み上げる人にも伝える必要があります。」

生徒

「音声で読むってどういうことですか？」

先生

「画面を見られない人が使う読み上げ機能です。画像に説明がないと、何が表示されているか分からなくなります。」

生徒

「じゃあ、全部の画像に説明を書けばいいんですか？」

先生

「実は、説明が必要な画像と、不要な装飾用画像があるんです。」

1. Bootstrapにおけるアクセシビリティとは何か

アクセシビリティとは、年齢や障がいの有無、パソコン操作の得意・不得意に関係なく、誰でも同じようにWebページを使えるようにする考え方です。 Bootstrapでは、このアクセシビリティをとても大切にしています。

たとえば、目が見えにくい人は画面を音声で読み上げる機能を使います。このとき、画像やアイコンに文字での説明がないと、「ここに何があるのか」が分かりません。そのため、画像には代替テキストという説明文を用意します。

これは専門的な話に聞こえるかもしれませんが、例えるなら「写真にキャプションを付ける」ようなものです。写真だけでは伝わらない情報を、文字で補足してあげるイメージです。

2. 画像の代替テキストとは何か

代替テキストとは、画像の代わりに読み上げられる説明文のことです。主にimgタグで使われ、画像が見えないときに役割を果たします。

たとえば、商品の写真がある場合、その画像が何を表しているのかを文字で説明します。これは検索エンジンにも理解されやすく、 SEO対策としても非常に重要です。

Bootstrapを使ったサイトでも、この代替テキストを正しく設定することで、「アクセシビリティが高いサイト」として評価されやすくなります。初心者のうちから意識することが大切です。


<img src="/img/sample150-100.jpg"  alt="パソコンを操作している">

ブラウザ表示

このように、画像の内容をそのまま言葉にするのが基本です。難しく考えず、「人に説明するとしたら何と言うか」を意識してください。

すべての画像に説明が必要なわけではありません。背景模様や区切り線のように、情報として意味を持たない画像は装飾用画像と呼ばれます。

装飾用画像まで読み上げてしまうと、音声を聞く人にとっては逆に邪魔になります。例えるなら、文章を読むたびに「ここに飾りがあります」と言われるようなものです。

そのため、装飾用画像は「説明しない」と明確に伝えることが大切です。これもアクセシビリティのベストプラクティスの一つです。


<img src="/img/sample150-100.jpg"  alt="">

ブラウザ表示

説明文を空にすることで、読み上げ機能はこの画像を無視します。これが正しい装飾用の扱いです。

Bootstrapでは、アイコンとしてSVGがよく使われます。 SVGとは、文字のように拡大縮小できる画像形式です。ぼやけず、デザインが崩れないのが特徴です。

SVGアイコンも、意味を持つ場合と、単なる飾りの場合があります。たとえば「検索」や「削除」を表すアイコンは意味を持ちます。

意味を持つSVGには、必ず内容が伝わるように配慮します。一方、装飾だけのSVGは読み上げないようにします。この使い分けがとても重要です。


<svg role="img" aria-label="検索">
    <circle cx="10" cy="10" r="8"></circle>
</svg>

ブラウザ表示

このように、SVGが何を表しているかを文字で伝えることで、画像が見えなくても意味が理解できます。

Bootstrapには、見た目を整えるための便利なclassがたくさん用意されています。しかし、アクセシビリティに関しては、「Bootstrapのclassを付けていれば自動で完璧になる」というわけではありません。ここは初心者の方が特に勘違いしやすいポイントです。

まず知っておいてほしいのは、 Bootstrapのclassは見た目を整えるための補助が中心だということです。たとえば、画像をレスポンシブ対応にするための img-fluid、角を丸くする rounded といったclassはありますが、画像の意味を説明する機能はありません。

そのため、情報を持つ画像には、 Bootstrapのclassとは別に、人に伝えるための説明文を必ず用意します。これは「見た目の装飾」と「情報の伝達」をきちんと分けて考える、という意味でもあります。

一方で、背景や区切りとして使う装飾用の画像やアイコンは、読み上げの対象にしないのが正解です。 Bootstrapアイコンを使う場合でも、単なる飾りであれば、意味を持たせないように意識します。

初心者のうちは、次のように考えると分かりやすいです。「この画像やアイコンは、なくなると内容が伝わらなくなるか？」もし答えが「はい」なら説明が必要、「いいえ」なら装飾として扱います。

この考え方は、Bootstrapを使ったWeb制作だけでなく、すべてのWebサイトに共通する基本です。アクセシビリティを意識したページは、誰にとっても分かりやすく、検索エンジンからも評価されやすくなります。初心者の段階から、この意識を持つことがとても大切です。