お問い合わせ

Firefox 40 で abbr 要素のデフォルトスタイルが変更

フロントエンド・エンジニア 富永

現在、 Firefox の最新バージョンは 38 ですが、8月にリリース予定のバージョン 40 では既存サイトに影響の大きそうな変更点がいくつかあります。今回はそのうち abbr 要素のスタイル変更を紹介します。

abbr 要素について

abbr 要素は略語や頭文字を表すフレージングコンテンツで、 title 属性がある場合はただの補足情報ではなく、その完全表記を示す特別なセマンティックを持ちます。

例えば <abbr title="Firefox">Fx</abbr> という使い方になり、マウスカーソルを乗せるとツールチップにより完全表記が表示されます。また、一部のブラウザは文字の下に点線が表示されます。

HTML 4.01 では似たような性質を持つものとして acronym 要素があり、 abbr 要素は省略語、 acronym 要素は頭文字に使うという区別がありましたが、 HTML5 では acronym 要素が廃止され、 abbr 要素に一本化されました。 Firefox 40 の変更は acronym 要素にも同様に適用されますが、今は使うべきではない要素なので本記事では abbr 要素のみに言及します。

Firefox 40 での abbr 要素のスタイル変更

それまで、 Firefox や Opera 12 以前のブラウザは、 title 属性のある abbr 要素に対して border による点線を描画していましたが、メイリオなどのフォントでは文字と下線が離れすぎる問題がありました。

また、以前より HTML5 や CSS3 の仕様書では、レンダリングは text-decoration で行うものと提案されています。

このため、 Firefox 40 ではデフォルトスタイルが text-decoration: dotted underline に変更されました。

メイリオフォントにおける abbr 要素のデフォルトスタイル比較

abbr 要素を使っており、さらにブラウザのデフォルトスタイルを打ち消すような指定をしているサイトでは、 Firefox 40 の正式リリースまでにCSSの改修が必要となります。

title属性に依存するアクセシビリティ上の問題

abbr 要素に限らない話ですが、 title 属性を設定してツールチップにより情報を提供すると、マウスのないタッチデバイスなどではその情報にアクセスできないことになります。

HTML5 の仕様書でも 3.2.5.2 The title attribute で title 属性に依存することは推奨しないとされています。

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

以下は同部分の日本語訳（非公式）です。

title属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない（たとえば、ツールチップを出現させるマウスなどのポインティングデバイスが必要になり、これはモダンな携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す）。

これを解消する一例として、以下のように下線を非表示にしたうえで、 ::after 疑似要素により title 属性値を画面に描画することができます。もちろん JavaScript を使ってキーボードやタッチ操作に対応した独自のツールチップを作るのも良いかと思います。

abbr[title] {
  border: none;
  text-decoration: none;
}

abbr[title]::after {
  content: "(" attr(title) ")";
}
2015年の記事一覧に戻る