［連載］徹底解説！インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン (4)

こんにちは。freeeの伊原です。「インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」ですが、おかげさまでかなり好評な売れ行きのようで、増刷の可能性も出てきました。すでにお買い求めいただいたみなさま、ありがとうございます！今後ともご支援よろしくお願いします（具体的には、ぜひamazonでレビュー頂けるとうれしいです...！)。そして電子版もいま作業を行っている真っ最中です。こちらも近々お届けできる予定ですので、どうぞよろしくお願いします。

それでは今回も、書籍から内容をダイジェストでご紹介いたします！

4章：ブログ記事

前回の3章は「パラグラフ」ということで、最も小さい単位としての段落を扱いました。今回のブログ記事の章では、それらを組み合わせてひとつの記事にするまでの考え方を取り扱います。まずここで重要になってくるのは、コンテンツがシンプルに表現され、それがきちんと構造化されている、という点です。

読みたい部分にたどり着けるように

段落を構造化するというのは、つまりコンテンツエリアを明示し、見出しを立てて、どこに読みたいものがあるかをきちんとナビゲートできるようにする、ということです。まずはmain要素を適切に使い、コンテンツが見つかるようにしていきます。

これらのメリットは、不適切な配置によって損なわれることもあります。

ということで、たとえば「ページ内の要素をほぼすべてmain要素に入れる」みたいなことはしないように気をつけましょう。そして見出しを立てていきます。ヘイドンさんはコンテンツの見出しをh1にするスタイルのようで、mainとh1のどちらでもコンテンツの先頭に行けるという形をオススメしています。ここについてはいろいろと意見が出そうな箇所だと思っており、ぜひ皆さんの感想をお聞かせいただきたいところです。

見出しを立てる時にちょっと注意したいのは「スクリーンリーダーで見出しナビゲーションを使っていると、見出しの前のテキストは飛ばされる」ということです。たとえば以下のように、記事の日付を見出しより前に書いているとします。

<!-- これは使わないでください -->
<main id="main">
    <div class="meta">公開日 <time datetime="2017-12-12">2017/12/12</time></div>
    <h1>インクルーシブなブログ記事のマークアップ方法</h1>
    <!-- ここに記事のコンテンツ -->
</main>

見出しナビゲーションを使った場合は見出しより後を読み上げるので、公開日という情報は、その記事に対する内容なのに読み飛ばされてしまうのです。

なのでこうしましょう、と。

<!-- これを使ってください -->
<main id="main">
    <h1>インクルーシブなブログ記事のマークアップ方法</h1>
    <div class="meta">公開日 <time datetime="2017-12-12">2017/12/12</time></div>
    <!-- ここに記事のコンテンツ -->
</main>

ここでポイントなのは、最初の書き方でもアクセシビリティチェックツールではエラーにならない、ということです。

上記の最初のコード例の構造は、自動化されたアクセシビリティテストツールでは、おそらくエラーとはなりません。

しかし、スクリーンリーダーを実際に使って読み上げてみれば、最初の書き方では明らかに不自然であることにすぐに気づきます。考えてみれば、画面のUIの妥当性をチェックツールではチェックできないのと同じで、スクリーンリーダーを通して出力される内容をUIとして人間がちゃんと評価すべきだよね、ということですね。

この他にも、書籍では見出しについてかなりの分量を割いて解説されています。たとえば、section+h1だけの構成に対応できているスクリーンリーダーはない、見出しレベルは飛ばすべきではない、サブタイトルは見出しにすべきか、などなど。ページ内に構造をもたらし、それを適切に利用できるようにするためには、いかに見出しが大事か？ということをいろいろな角度から考察しています。

つづきはメルマガで……。