第128号の全文はこちらからお読みいただけます。(閲覧にはメール・マガジンでお知らせしているユーザーネームとパスワードが必要です。freeeの伊原です。多様なユーザーニーズに応えるフロントエンドデザインパターン」ですが、おかげさまでかなり好評な売れ行きのようで、増刷の可能性も出てきました。お買い求めいただいたみなさま、ありがとうございます!今後ともご支援よろしくお願いします(具体的には、ぜひamazonでレビュー頂けるとうれしいです...!)。電子版もいま作業を行っている真っ最中です。こちらも近々お届けできる予定ですので、どうぞよろしくお願いします。前回の3章は「パラグラフ」ということで、最も小さい単位としての段落を扱いました。今回のブログ記事の章では、それらを組み合わせてひとつの記事にするまでの考え方を取り扱います。ここで重要になってくるのは、コンテンツがシンプルに表現され、それがきちんと構造化されている、という点です。読みたい部分にたどり着けるように段落を構造化するというのは、つまりコンテンツエリアを明示し、見出しを立てて、どこに読みたいものがあるかをきちんとナビゲートできるようにする、ということです。main要素を適切に使い、コンテンツが見つかるようにしていきます。これらのメリットは、不適切な配置によって損なわれることもあります。いうことで、たとえば「ページ内の要素をほぼすべてmain要素に入れる」みたいなことはしないように気をつけましょう。見出しを立てていきます。ヘイドンさんはコンテンツの見出しをh1にするスタイルのようで、mainとh1のどちらでもコンテンツの先頭に行けるという形をオススメしています。ここについてはいろいろと意見が出そうな箇所だと思っており、ぜひ皆さんの感想をお聞かせいただきたいところです。見出しを立てる時にちょっと注意したいのは「スクリーンリーダーで見出しナビゲーションを使っていると、見出しの前のテキストは飛ばされる」ということです。以下のように、記事の日付を見出しより前に書いているとします。--></main>見出しナビゲーションを使った場合は見出しより後を読み上げるので、公開日という情報は、その記事に対する内容なのに読み飛ばされてしまうのです。--></main>ここでポイントなのは、最初の書き方でもアクセシビリティチェックツールではエラーにならない、ということです。上記の最初のコード例の構造は、自動化されたアクセシビリティテストツールでは、おそらくエラーとはなりません。スクリーンリーダーを実際に使って読み上げてみれば、最初の書き方では明らかに不自然であることにすぐに気づきます。考えてみれば、画面のUIの妥当性をチェックツールではチェックできないのと同じで、スクリーンリーダーを通して出力される内容をUIとして人間がちゃんと評価すべきだよね、ということですね。この他にも、書籍では見出しについてかなりの分量を割いて解説されています。section+h1だけの構成に対応できているスクリーンリーダーはない、見出しレベルは飛ばすべきではない、サブタイトルは見出しにすべきか、などなど。ページ内に構造をもたらし、それを適切に利用できるようにするためには、いかに見出しが大事か?ということをいろいろな角度から考察しています。つづきはメルマガで......。第128号の全文はこちらからお読みいただけます。(閲覧にはメール・マガジンでお知らせしているユーザーネームとパスワードが必要です。