文書全体の基本マークアップ構造

title要素

title要素はその文書のコンテンツの中身をきちんと識別できるものでなければならない。スクリーンリーダーはページを開いたり遷移したりするたびにまずそのページのtitle要素を読み上げるし、検索結果一覧もtitle要素が表示されることになるので、ユーザがそのページを閲覧する/しないの判断材料にもなる。
したがって、title要素は「そのページのコンテンツ内容と一致している」ことが最重要で、かつ「ページ固有のタイトル|サイト名」のように、固有のタイトル文言がtitle要素の中で先頭に来るように記述しておくことが求められる。また文字数はSEO的な観点からは30~35字前後が望ましいとされている。

<!-- OK例 そのページのタイトルが先頭に記載されており、適度な長さである -->
<title>ページタイトル名|カテゴリ名|株式会社###</title>

見出しレベルと文書のアウトライン

コンテンツ部分のセマンティックなマークアップにおいて、最低限しっかり意識する必要があるのは、文書の見出しレベルを正しく保つことである。HTMLにはh1~h6までの6段階の見出しレベルが用意されているので、h1から順番に、情報の階層構造を意識しながら階層レベルに応じてh2、h3、h4…と見出し要素をマークアップしていく。
各種ブラウザは見出しのレベルを頼りにして文書のアウトラインを構築する。アウトラインとは、その文書の骨格のようなものであり、機械的に内容を整理・解釈するうえで重要な情報構造、屋台骨にあたる。アクセシビリティの面においても、見出しを適切に設定していると、スクリーンリーダーの見出しジャンプ機能を使って素早く必要な情報にアクセスできるようになる。

セクションと文書の全体構造①

header・footer・main

Webページは文書の純粋なコンテンツ部分と、サイト全体の共通情報を格納するヘッダー領域・フッター領域に大きく分かれている。ほぼ定型フォーマットとも言えるこの大きな役割の違いについては、特別な事情がなければコンテンツ部分をmain要素、ヘッダー領域をheader要素、フッター領域をfooter要素としてマークアップしておけば良いだろう。
なお、main要素は多くのスクリーンリーダーで本文先頭に移動する際の目印の1つとして利用される。特別にスキップリンク機能(※)などを用意しなくても適切にmain要素の範囲を設定しておけば支援技術を必要とするユーザーに対しても素早くコンテンツ本文へアクセスする手段を提供できる。
※Webページの先頭からメインコンテンツの開始位置までジャンプできるページ内リンクのことで、通常は各ページの先頭に配置されるスクリーンリーダーやキーボード操作のユーザ向けの機能

セクションと文書の全体構造②

section・article・aside・nav

見出しがあればブラウザ側は文書のアウトラインを構築できるが、セクション要素を使うことで見出しとそれに伴うコンテンツのかたまりである「セクション」に対して、より詳しい役割の違いを明示できる。セクション要素の使用は必須ではないが、可能な限り見出しと共にセクション要素を使ってそのセクションの範囲と役割を明確化することが推奨されている。また、特にnav要素については、多くのスクリーンリーダーに対して「ナビゲーションである」という情報を明示してユーザに伝えることができるため、グローバルナビなどの主要なナビゲーションエリアについてはnav要素を使うことを推奨する。

inserted by FC2 system