font-size: 0; には気をつけて

2011年10月15日 著

一発ネタ（ネタ？）というか、それまで知らなかったので覚え書き。先日出席した2011年度第10回ウェブアクセシビリティ基盤委員会WG2で、塩尻市公式ホームページが話題に。なんでも、アクセシビリティに配慮したホームページということで、

リニューアルし公開したホームページでは、総務省「みんなの公共サイト運用モデル改定版（2010年度）」に基づき、「JIS X 8341-3:2010」達成等級AAに準拠しました。

……だそうです。話題になったポイントはそこではなく、Google Chromeでは一部のリンクにタブキーでフォーカスを与えることができないという点。具体的には、リンクがul要素でもってリストとして複数並べられている箇所でその事象が確認されており、たとえばヘッダーにある「音声読み上げ・文字拡大」「English」といったリンクラベルが並んでいるところがそう。Firefoxなど他のブラウザではタブキーでフォーカスを与えられるし、特に凝ったつくりにしているわけではなく、なぜだろう？と。

アクセシビリティ的には、キーボード操作だけで（マウスに頼らずとも）操作可能であるべきです（ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにする。 参照）。Web Developerで制作者スタイルシートを無効にしたところ、フォーカスを与えることができたので、原因はスタイルシートの側にあるらしい。というわけで上述のヘッダーにあるリンクリスト（ ul.headlist ）を確認してみたら、リンクの親要素であるli要素に以下のスタイルが。

ul.headlist li {
	float: left;
	margin: 0;
	padding: 0 0 0 0;
	font-size: 0;
	line-height: 0;
	background-color: transparent;
	background-image: none;
	height: 28px;
}

どうやら、文字サイズ（font-sizeプロパティ値）が0に指定されているのがa要素に継承されていて、その結果としてフォーカスを与えることができない状態にあるようです。委員会の場では、このような指定がなされた背景として、文字サイズをブラウザ側から拡大されたときにレイアウトが微妙に変化する（リストになっている部分がずり下がる）のを嫌った可能性が言及されました。そういう動機も理解できないわけではないですが、Google Chromeでの挙動を踏まえるなら避けるべきですし、どうしてもレイアウトを固定したいというならpositionプロパティを使って絶対配置したほうがベターでしょうね（そういう指定が実現できる状況であればなおさら）。そもそも、画像非表示かつスタイルシート有効な状況において、代替テキストが表示されないリスクを孕むわけですから、コンテンツとして有意な情報があるところに font-size: 0; のようなスタイルは適用すべきでないと思いました。