CSSには:focus擬似クラスというものがあります。ちょっと前ですとフォーカスされているフォームコントロールの見栄えを指定するネタがにぎわったので覚えている方も多いことでしょう。例えばこんな感じです。「フォーカスのあるフォームの装飾を変化させる – スタイルシートTIPS ふぁくとりー」。

さて、:focus擬似クラスはinput要素だけに指定するためのものではないんですよね。ページを閲覧している方が、何かの要素にフォーカスを合わせている状態の装飾を行うことが可能です。例えば、a要素には必ず:hover擬似クラスを指定して、リンク項目にカーソルがあたったことを分かりやすくするようにしている、という方も多いでしょう。そんな方は、必ず:focus擬似クラスもセットで指定してみてはいかがでしょうか？

:hover擬似クラスと:focus擬似クラスをセットで指定することで、キーボードのみでページを閲覧している方なんかがいらっしゃった場合には、どこにフォーカスがあたっているのかが視覚的にも分かりやすくなります（ユーザーさんの環境にもよります）のでオススメです。

:hover擬似クラスや:focus擬似クラスは、指定する順序も重要なのですが、弊社の場合ですとおおむね以下のような感じで指定しています。

a {
	スタイル
	}
a:visited {
	スタイル
	}
a:hover,
a:active,
a:focus {
	スタイル
	}

ということで、今まであまり日の目を見ていない:focus擬似クラスがかわいそうですので、もっと積極的に利用していきましょう。

先日、CSS Nite 4周年記念イベント（Vol.40 reprise）へ行ってきました。3名の方がそれぞれ違った角度からHTML5のことを語られていてとても面白かったです。当日の内容はCSS Niteの終了アナウンスページから感想のブログなどをご覧になれます。

個人的にもっとも興味深かったのは、最後の質問タイムでしたね。主催：鷹野さんの「会社の仕事で実際にHTML5を採用するとしたらいつですか？」という質問。株式会社ミツエーリンクスの矢倉さんはちょっと迷いながら「来年か再来年かでしょうか」と回答されておりました。矢倉さんのようなお立場の方からこういったことをお聞きできると、心強いと言いますか、なんだかホッとしました。

続：nav要素内に見出しがない

さて、以前かいた「nav要素内に見出しがない」ですが、わずかなブックマークを見る限りでも若干物議をかもし出しておりました。せっかくの場ですのでこちらに関してもいろいろお聞きしてみました。

セクション三箇条に関して

まず、セクション三箇条がnav要素にも及んでいるものなのか？ということですが、基本的には及んでいるものの、見出しのことを言及している箇条に関しては、そもそもnav要素内に自然な見出しをおけないことも容易に考えられるため、常にその通りではないということでした。

早くも結論

僕の先日の記事が、結構一方的な意見でしたので誤解を招いた部分もあったようですが、結論から言えば文法エラーという訳でもないのでおいても良いけど、適当な見出しを毎回見つけるのは厳しいですし、最終的にはどういう指針でサイト全体のマークアップをしているのかによるということになるでしょう。

じゃぁなんであなたは見出しをおくんですか？

上記のような結論もだしてはいるものの、僕自信に関して言えば、当面は見出しをおいていくことになるでしょう。じゃぁなんであなたは見出しをおいているんですか？ということですが、2年ちょっと前に見出しに関する議論がネット上で巻き起こっていました。で、僕の中では決定版とも言うべきエントリーを当時の森田雄さんがされたんですね。「Re: 見出し要素に関する議論」

そして当時森田さん的に旬であったサイトを実際に見てみると、div id="global-navi"の部分に見出しがありまして、「あー、こういう使い方もあるのかー」と感心しましてそれ以来はずっと置くようにしています。

まとめ

ということで、nav要素内に見出しがなくてもまったく問題ありません。

最近HTML5の話題があつくなってきていますねー。Google Insightsで「html5」の検索ボリュームを調べてみても、日本での盛り上がりが他国にまさっているのが伺えます。（Google Insights　for Search – ウェブ検索の人気度: html5」）

直近で言えば「CSS Nite in Ginza, Vol.40」や、「CSS Nite 4周年記念イベント（Vol.40 reprise）」が開催されます。前者は無料、後者は前者の拡大版ですが2,000円ととても安価なので興味がある方はご参加されてはと思いましたが、すでにCSS Nite in Ginza, Vol.40で当日席が空いているだけでした。これは！と思う方は早めに会場に向かって席を確保しましょう。

さてそんなHTML5なのですが、「HTML5 Gallery」などのギャラリーサイトを見ていると、nav要素に見出しがないものが多いんですよねー。仕様でnav要素には見出しを設けなくてはならないと決められているものでもありませんので、これが悪いと言うわけではないのですが、ちょっと気になります。

まず「sectionの使い方とセクション三箇条 – vantguarde – web:g」では「The section element | HTML5 Doctor」の邦訳としてセクション三箇条に関して以下のような説明があります。

• スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
• article, aside, navが適切な場合には、そちらを使こと。
• セクションの先頭に見出しが自然に存在してない場合には使わないこと。

さらにこの記事では、

sectionだけがセクションじゃない

なんのこっちゃって話ですが、section以外にもセクションを構成する要素は存在します。article, aside, navです。

ともあります。つまりは、sectionだけでなくてnavもセクションであり、「セクションの先頭に見出しが自然に存在してない場合には使わないこと。」という箇条を考えれば自然とnavの中には見出しが入ってくるでしょう、ということになります。

続けてWCAG2.0の側面から見てみましょう。以下の2項目が関係あると思われます。

ガイドライン 2.4 ナビゲーション可能： ユーザがナビゲートしたり、コンテンツを探し出したり、現在位置を確認するのを手助けする手段を提供する。

2.4.1 ブロック・スキップ： 複数のウェブページ上で繰り返されているコンテンツのブロックを通過できるメカニズムが利用可能である。（レベル A）

2.4.10 セクション見出し：セクションの見出しを用いてコンテンツを体系化している。（レベル AAA）

まず「2.4.1 ブロック・スキップ」ですが、具体的には複数のページで繰り返し出現するヘッダーなどのブロックはあっさりと通過して、ページの主題など、ユーザーが目的とする箇所へすぐにアクセスできるようにしようね、ということを言っています。これをページで実装しようとすると、スキップリンク（参考：http://tinyurl.com/yfj6294）のようにページ内リンクを設けるか、各ブロックに見出しを用意して見出しジャンプ機能（参考：http://tinyurl.com/ygfyx7g）を使えるようにするということが考えられます。

さて、話を「nav内に見出しがない」に戻しますと、Webを閲覧する中で、すばやくnavにアクセスしたいという需要もあるでしょうから、navの中に見出しがないというのはちょっと気になります。スキップリンクを設置しておけば良いじゃないかという意見もあるでしょうが、もしかしたらスキップリンクをサポートしていないが見出しジャンプ機能はサポートしているというユーザーエージェント（以下UA）もあるかもしれませんので、やはり見出しを容易しておくのがベターと言えます。しかも「2.4.1 ブロック・スキップ」に関しましては、レベルがシングルAとなっていますので、是が非でも対応しておきたいものでしょう。

次に「2.4.10 セクション見出し」を考えてみましょう。こちらはセクションには見出しをおきましょう、ということになりますので先のセクション三箇条の最後のものと同じことを、アクセシビリティの視点から言っているものと考えられます。レベルがトリプルAではありますが、セクション内に見出しをおくというのがそれほど難しいものとも思えませんので、しっかりと対応した方が良いでしょう。

まとめ

事件は現場でおこります。この先、HTML5をあたりまえのように利用するとなったときに、nav内に見出しがあるものとないものが混在しているとなると、現場が混乱することが容易に想像されます。最低でも現場で一定のルールを共有することが必要となるでしょう。極端に、nav内にはまったく見出しを設けないというルールがあったとするといかがでしょうか？アクセシビリティを担保してこそのマークアップエンジニアとしては、だいぶ疑問が残るものとなるでしょう。

どんな状況でも100%見出しを設けるべきということもありませんが、より多くのユーザーのためにより良いWebをと考えれば、おのずと答えが出てくるように思います。

その他備考

一時期流行した文字サイズ拡大ボタン。これはブラウザなど、UA側が実装すべきものであり、わざわざページ内に設置する必要はないという意見が目立ちます。同じようにnavに関してもUAがnavを認識して、ユーザーになんらかの形で提供すれば良いのではないか？という意見もあります。