完成度チェックと修正

見直しは目でなく表でやる

作ったページを眺めて「なんとなく大丈夫」で終わらせると、抜けはいつも同じ場所に残ります。見る順番を決めた表、つまりチェックリストを一度作ってしまえば、疲れている日でもおなじ精度で点検できます。

見るのは 3 か所

ひとつ目は画像の代わりの文字です。すべての img に alt が付いているか。写真が出てこないときや、画面を読み上げて聞く人にとって、そこに何があるかを伝えるのは alt だけです。

ふたつ目は見出しの段差です。h1 のつぎは h2、そのしたが h3。番号を飛ばすと、見出しだけを拾って読む人には話が途中から始まったように見えます。

みっつ目はセレクタの強さです。#contact .section-title のように id をまぜた指定は強すぎて、あとから上書きしづらくなります。今より増やさないことが第一です。

見つかった穴をふさぐ

点検すると 2 つ足りません。ひとつは head に置くページの説明です。検索結果に出てくる 1 行で、いまは空っぽです。

<meta name="description" content="町の図書館の開館日とイベントを紹介します。">

説明の meta タグは自分のプロフィールを紹介する文にします。

もうひとつはキーボードで操作する人のための枠です。マウスを使わず Tab キーで進むとき、いまどこにいるかが見えないと迷子になります。

.event-button:focus-visible {
  outline: 2px solid #554488;
}

演習では準備済みの三つのルールに、それぞれ太さ 3px、実線、色 #0071e3 の枠を指定します。

1. index.html の head に meta name="description" を足して、ページの説明を書く
2. style.css に a:focus-visible などのフォーカス枠のスタイルを足す
3. すべての img に alt が付いているか見直す