Day 3・実践 — AI生成のHTML/CSSを読んで直す

アクセシビリティの基本

画像のalt・見出しの順序・色のコントラスト。作ったページを全員に届ける。

せっかく作ったページは、目の見えにくい人、色の区別がつきにくい人、音声で読み上げて使う人にも届いてほしいですよね。それを支える考え方が(アクセシビリティ)です。難しく聞こえますが、初心者がまず押さえるのは三つだけです。

なぜ大事なのか

アクセシビリティは特別な人のためだけの機能ではありません。スマホを日差しの下で見るとき、片手がふさがっているとき、誰もが一時的に『見えにくい・使いにくい』状態になります。全員に届くページは、結果として全員にとって使いやすいページです。

1. 画像には alt(代替テキスト)を書く

img タグのである alt には、その画像が何かを言葉で書きます。画像が表示できないときや、読み上げソフトを使う人に、内容を伝えるためです。AIは alt を空っぽにしがちなので、あなたが埋めるポイントです。

内容が伝わらない

altが空。読み上げソフトでは何の画像か分からず飛ばされる。

HTML

<img src="cake.jpg" alt="">

内容が伝わる

何の画像かが言葉で伝わる。画像が出ないときも意味が残る。

HTML

<img src="cake.jpg" alt="いちごがのった手作りショートケーキ">

たとえるなら

alt は、電話越しに写真を説明してあげる一言です。相手には画像が見えないので、あなたが言葉にしないと何も伝わりません。逆に、ただの飾り線のような意味のない画像は alt="" で空にして『説明不要』と伝えます。

見出しは h1(一番大きい)から h2、h3 と、番号順に使います。見た目を大きくしたいだけの理由で h1 の次に h4 を使う、といった飛ばしはNG。読み上げソフトは見出しの番号を『目次』として使うので、順番が乱れると迷子になります。

たとえるなら

見出しの番号は本の目次の階層です。第1章(h1)の下に、いきなり第3節(h3)が来たら読者は混乱します。大きさを変えたいだけなら見出し番号ではなくCSSで文字サイズを変える、と覚えておきましょう。

気をつけること

AIは『見た目が大きいから』という理由で見出し番号を選ぶことがあります。番号は文書の構造(重要度の順番)で決めるもの。見た目の大きさはCSSで調整する、と役割を分けて考えてください。

薄いグレーの背景に白い文字。おしゃれに見えても、読めなければ意味がありません。文字色と背景色の明るさの差(コントラスト)が小さいと、多くの人にとって読みにくくなります。特に薄い色どうしの組み合わせは要注意です。

たとえるなら

コントラストは、霧の濃さのようなものです。文字と背景の色が近いほど霧が濃く、目をこらさないと読めません。はっきり読ませたいなら、色の明るさに十分な差をつけて霧を晴らします。

AIにはこう頼む

公開前にまとめてチェックしてもらえます。例えば「このページのアクセシビリティを確認して。imgのalt、見出しh1からの順序、文字と背景のコントラストの三点で問題があれば直して」。観点を指定すると、AIは抜けなく点検してくれます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

答えられれば、面接で説明できる状態に一歩近づきます。

img タグの alt 属性の役割として正しいのはどれ?

見出しタグ(h1〜h6)の使い方として適切なのはどれ?

アクセシビリティが「特別な人だけのため」ではない理由を説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。