代替テキストの次に取り組むなら？
アクセシビリティは何から始めればいいですか、とよく聞かれます。特にアクセシビリティチェック後の改修では顕著で、どこから手をつけたらいいか悩んでいる方が多い印象です。
最初に挙げるのは画像の代替テキストです。重要度が高く、今日から着手できます。最初の一歩に適しています。当メルマガのシリーズでも以前「画像の代替テキストから始めましょう」でご紹介していますね。
二歩目に何をやるとよいかについては、手が止まりがちです。コントラスト比、フォーカスの見え方、キーボード操作といった、アクセシビリティの課題の多くはビジュアルデザインや実装の調整を伴います。いずれもすぐに「直す」ことが難しく、内製担当者やベンダーと改修範囲を詰め、見積を取り、予算の確保も必要です。着手まで数か月かかることも珍しくありません。
その間、コンテンツや原稿を作る側に、すぐできることが二つあります。
見出しと、リンクテキストの調整です。実装に関する問題に比べて、着手も修正も容易なので、おすすめです。
今回は、見出しについて取り上げます。
見出しを調整する
コンテンツの元となる原稿で、見出しがまったく含まれないものはほとんど見かけません。しかし、ウェブページでは見出しに関する問題の指摘を行うことが多くあります。
問題の多くは、
- 情報の内容や構成の階層が異なるまとまりに対して、見出しと思われる文言はあるが、見出しとして設定されていない
- 余白や背景色の切り替え、枠線の付与などのビジュアルだけで情報の違いを表している
- 情報の内容が見出しの内容と合致していない
- 見出しレベルが一つずつ昇順で増えていない
といったものです。
見出しの役割
情報を適切なまとまりに分ける（チャンキング）ことで、文章は理解しやすくなります。
見出しの役割は、まとまり同士の関係性や、まとまりに対してどんな内容かが端的にわかるようにすることです。適切に設定することで、
- ウェブページ全体の情報構造が明確になる
- 視覚的にも把握しやすくなる
といった利点があります。
ハンバーグのレシピページの原稿を例に見ていきましょう。
レシピページの原稿例
次の例では、工程ごとに文章がまとめられていますが、まとまりに対しての見出しがありません。
また、「照り焼きハンバーグを作る」が全体の見出しということが推測されますが、指定が特にないので、ベンダーは「見出しにしておくとよいのかな」という推測で作業をすることになります。
照り焼きハンバーグを作る 合いびき肉300gに塩小さじ4分の1とこしょうを加え、粘りが出るまで練ります。2等分して小判形にまとめ、冷蔵庫で30分休ませます。フライパンを中火で熱し、3分焼いて裏返します。ふたをして弱火で7分蒸し焼きにします。器に盛ります。 照り焼きソースにはみりん大さじ2と醤油大さじ2を入れ、強火でしっかり沸騰させて煮詰めます。仕上げにバター10gを加えます。 次は付け合わせです。鍋ににんじん1本と水100mlを入れます。ふたはしないでください。絶対に沸騰させず、弱火のまま10分煮ます。仕上げにバターを10g弱からめます。
この例に、内容を端的に示す見出しを追加します。
Markdown形式で原稿ファイルを作成している場合は、#はh1要素、##はh2要素のように、#の数で見出しレベルの指定ができます。
Wordなどで原稿を書いている場合は、「スタイル」機能で「見出し1」「見出し2」などを指定すると、ファイルの中で見出しに当たる情報として扱われるようになりますので、実装の担当者にも「見出しとして実装するところだな」ということが伝わります。
# 照り焼きハンバーグを作る
## 1. ハンバーグのタネを作る
合いびき肉300gに塩小さじ4分の1とこしょうを加え、粘りが出るまで練ります。2等分して小判形にまとめ、冷蔵庫で30分休ませます。
## 2. ハンバーグを焼く
フライパンを中火で熱し、3分焼いて裏返します。ふたをして弱火で7分蒸し焼きにします。器に盛ります。
## 3. 照り焼きソースを作る
みりん大さじ2と醤油大さじ2を入れ、強火でしっかり沸騰させて煮詰めます。仕上げにバター10gを加えます。
## 4. にんじんのグラッセを作る
鍋ににんじん1本と水100mlを入れます。ふたはしないでください。絶対に沸騰させず、弱火のまま10分煮ます。仕上げにバターを10g弱からめます。こうすることで、ハンバーグを作る工程が四つあることと各工程で行う内容が、すっきりと伝わる構成になりました。構成だけを取り出すと、次のようになります。
照り焼きハンバーグを作る ├ 1. ハンバーグのタネを作る ├ 2. ハンバーグを焼く ├ 3. 照り焼きソースを作る └ 4. にんじんのグラッセを作る
見出しと情報のまとまりを適切に用意することで、ブラウザーにもスクリーンリーダーのような支援技術にも適切に情報が伝わり、ウェブページの目次としての役割を果たします。
スクリーンリーダーには、ページ内の見出しを一覧表示したり、見出しへ移動したりする機能があります。見出しとして実装されていれば、目次のように見出しだけをたどったり、「照り焼きソースを作る」項目へ移動することができます。結果、効率的にページを閲覧できますし、理解しやすくなります。
見出しを設定する場合のポイント（１）
見出しに当たるテキストはあるけれど、見出しとして指定されていなかったり、太字になっているだけだったりするため、実装に反映されないケースをしばしば見かけます。
見た目だけの見出しは、見出しとして扱われません。太字の段落となってしまいます。
<p><b>照り焼きソースを作る</b></p>見出しを設定する場合のポイント（２）
見出しレベルの順序は飛ばさないでください。 h2要素の次はh3要素、h3要素の次はh4要素です。原稿の段階で階層を指定することで防げます。
見出しを誰が用意するか
「何を見出しにするか」「どこからどこまでをひとまとまりの情報とするか」はコンテンツや原稿を作る側が決めます。
コンテンツの構造や内容を把握し、どのように伝えたいかを判断できるのは原稿作成者です。
見出しの位置や、見出しになる文言を実装者に間違いなく伝えるために、原稿で指定しましょう。
見出しを意識して書くことで文章そのものが整理されます。「この段落、どの見出しにも入らないな」というのは、構成が崩れているサインでもあります。アクセシビリティのためにやったことが、そのまま原稿の品質向上になります。一石二鳥です。
まとめ
見出しは、原稿の段階から意識しておくことで、アクセシビリティ上の問題を効果的に減らせます。原稿を作成する関係者の間でルール化・仕組化しておくことでブレもなくせますので、改修を待っている間にこそ、組織で手をつけたいところです。
原稿の構造や情報が整っていれば、ウェブページに対する機械可読性（マシンリーダビリティ）もよくなり、ユーザーにも検索結果にも情報が適切に渡るようになります。
まずはお手元の原稿の見出しを、ながめてみませんか？