見た目で区別が付いているものは、機械には区別が付いていない

ブログ一覧を見て、見出しの構造を確かめました。ページの題名にあたる見出しが、1つもありませんでした。

画面ではちゃんと「ブログ」と大きく出ています。その下に記事の題名が並んでいます。誰が見ても、どちらが上でどちらが中身かは分かります。分からないのは、字の大きさが見えない側だけでした。

全部が同じ格で並んでいた#

見出しには段階があります。h1 がそのページの題名、h2 がその中の章、というように、番号が入れ子の深さを表します。

一覧ページを調べたときの中身は、こうなっていました。

h1 はどこにもありません。そして「ブログ」と個々の記事が、同じ h2 で横並びになっていました。

画面上は、文字の大きさが違うので迷いません。「ブログ」は太くて大きく、記事の題名はそれより小さい。人は大きさの差を、上下関係として読み取ります。

見出しは飾りではなく、目次として使われる#

見出しに番号を付ける意味は、画面を上から順に見られない人にとってはっきり出ます。

読み上げソフトには、見出しだけを拾って移動する機能があります。本文を全部聞かずに、章の一覧から目的の場所へ飛べます。見出しの番号は、そのまま目次の階層になります。

階層が平らだと、この目次は「同じ深さの項目が延々と並んだもの」になります。どれがページの題名で、どれが中身なのかが分かりません。全部を聞いて中身から判断することになります。

検索エンジンから見ても事情は似ています。ページの主題を示す位置に何も無く、記事の題名だけが同じ格で並んでいる状態です。

直すのは1か所ではなかった#

見出しは共通の部品で描いていました。ここが便利であると同時に、問題が広がった理由でもあります。

部品の中で h2 を決め打ちしていたので、どのページで使っても必ず h2 になります。ページの題名として使いたい場合でも h2 でした。

そこで、部品の側に「どの格で出すか」を渡せるようにしました。既定は今までどおり h2 のままにして、ページの題名として使うところだけ h1 を指定します。

<SectionTitle as="h1">ブログ</SectionTitle>

見た目は変えていません。字の大きさも余白もそのままです。変えたのは、機械が読む側の情報だけです。

他のページも同じだった#

1か所で起きているなら、他でも起きています。全ページを取り寄せて h1 の数を数えました。

トップだけが正しく、残りは全滅でした。理由も同じで、トップは共通部品を使わずに直接書いていたからです。共通化した側だけが揃って間違っていました。

今回の学び#

まず、見た目で付けた区別は、見た目の外には出ないということ。字を大きくすれば人には上位だと伝わりますが、それは番号にも構造にも変換されません。人に伝わっているかどうかと、機械に伝わっているかどうかは別に確かめる必要がありました。

次に、共通部品は、正しさも間違いも同じだけ広げること。見出しの部品を1つにまとめたおかげで、直すときは1か所で済みました。同じ理由で、間違いも5ページに均等に配られていました。まとめた部分ほど、最初の設計を疑う価値があります。

そして、「壊れていない」と「正しい」は違うということ。h1 が無くてもページは表示され、リンクも動き、誰も困った報告をしません。症状の出ない不具合は、症状を待っていても見つかりません。数えて確かめるまで、無いことに気づけませんでした。