HTMLは構造を明示的に書く
HTMLは基本的に構造を明示的に書きます。
構造を明示的に書くことで、Webサイトが持つ意味をコンピュータが理解できるようになる(マシン・リーダビリティーが向上する)からです。
この考え方をセマンティックWebというんですね。
※ざっくり説明でごめんなさい！詳しい説明はセマンティックWeb - IT用語辞典バイナリを見てね。
マシン・リーダビリティーの向上させることによって、結果的にスクリーンリーダーなど支援技術を使うユーザーにも使いやすいアクセシブルなサイトを作ることが出来ますし、検索エンジンのクローラーにとっても読みやすいサイトとなるため、SEOにも効果があるとされるというわけです。
なんか情報科の授業みたいな感じになってしまいましたが、基本の復習ということで。
見出しタグは階層構造を明確に
本題に入ります。HTMLの見出しタグは<h1>から<h6>まであります。<h6>の下にいきなり<h1>を置いたりすることも間違いではないのですが、基本的には<h1>の次は<h2>、<h2>の次は<h3>と、階層構造を守って使用するべきです。
セクションは、任意のランクの見出しを含んでもよく、かつ著者はセクションのネストレベルに適切なランクの見出しを使用するよう強く推奨される。
（ 4.3.10 見出しとセクション - W3C Recommendation 28 October 2014 4.3.10日本語訳）
つまりたとえば<h3>は、「真ん中くらいの重要度」とか「中くらいの大きさの見出し」ではなく、「h2の下で、h4の上の階層構造の見出し」と理解したら良いということなんですね。
（4.3.6 h1、h2、h3、h4、h5、h6要素 - W3C Recommendation 28 October 2014 4.3.10日本語訳）
階層構造が崩れたHTML
<h1>タイトル見出し</h1>
<section>
<h5>小さい文字の見出し</h5>
<p>本文のテキスト</p>
<h2>大きい文字の見出し</h2>
<p>本文のテキスト</p>
</section>
しかし見出しタグを見た目の大小を表すために使った結果、上記のような階層構造になってしまうことがあります。
こんな時に、HTML構造も見た目も変えずに階層構造の整合性を保ちアクセシビリティを担保する方法があります。
それがaria-level属性を使う方法です。
aria-level属性
aria-level属性は段階レベルを指定できるWAI-ARIA属性です。
値には数値を指定でき、ネスト構造、需要度などの段階レベルを指定できます。
(aria-level属性 - HTMLリファレンス)
ちなみにWAI-ARIAとは、Web Accessibility Initiative -Accessible Rich Internet Applicationsの略でウェイアリア(ワイアリアでもいいらしい)と読みます。
<h1>タイトル見出し</h1>
<section>
<h5 aria-level="2">小さい文字の見出し</h5>
<p>本文のテキスト</p>
<h2 aria-level="3">大きい文字の見出し</h2>
<p>本文のテキスト</p>
</section>
このようにaria-level属性を使用すると、マークアップも見た目をも変えることなくコンピューターに階層構造を正しく伝えることができるようになり、アクセシビリティを担保できるようになります!
所感
今年（2016年）4月より障害者差別解消法が施行され、Webにおいてもアクセシビリティへの合理的配慮が求められることが定められました。また今年はリオオリンピック・パラリンピック開催年。そうしたこともあり、個人的にはWebアクセシビリティについて考えるとても良いきっかけになりました。
業務上では全く必要とされないケースもあるかと思いますが、知識として知っておいて損なしだと思います。
誰にとってもアクセスしやすいサイトを作って行こうとの思いを新たにしました。