完成度チェックと修正
見直しは目でなく表でやる
作ったページを眺めて「なんとなく大丈夫」で終わらせると、抜けはいつも同じ場所に残ります。見る順番を決めた表、つまりチェックリストを一度作ってしまえば、疲れている日でもおなじ精度で点検できます。
見るのは 3 か所
ひとつ目は画像の代わりの文字です。すべての img に alt が付いているか。写真が出てこないときや、画面を読み上げて聞く人にとって、そこに何があるかを伝えるのは alt だけです。
ふたつ目は見出しの段差です。h1 のつぎは h2、そのしたが h3。番号を飛ばすと、見出しだけを拾って読む人には話が途中から始まったように見えます。
みっつ目はセレクタの強さです。#contact .section-title のように id をまぜた指定は強すぎて、あとから上書きしづらくなります。今より増やさないことが第一です。
見つかった穴をふさぐ
点検すると 2 つ足りません。ひとつは head に置くページの説明です。検索結果に出てくる 1 行で、いまは空っぽです。
<meta name="description" content="山田 太郎のプロフィールサイトです。">もうひとつはキーボードで操作する人のための枠です。マウスを使わず Tab キーで進むとき、いまどこにいるかが見えないと迷子になります。
a:focus-visible,
.form-input:focus-visible,
.submit-button:focus-visible {
outline: 3px solid #0071e3;
}課題
- index.html の
headにmeta name="description"を足して、ページの説明を書く - style.css に
a:focus-visibleなどのフォーカス枠のスタイルを足す - すべての
imgにaltが付いているか見直す