省略語(abbr) と頭字語(acronym) のスタイル付け

要約: HTML 要素の abbr と acronym はアクセシビリティの手助けに役立ちます。しかし、それらのスタイル付けは制作者にとって驚きでした。これらの要素の提供しているものを犠牲にせずに、どのようにコントロールすることができるかをご覧ください。 多くの制作者が自身の Web ページに HTML 要素の abbr (省略語) および acronym を使用し始めています。これは、Web Content Accessibility Guidelines のガイドライン 4 によれば、"学習障害または認知症、聴覚障害を含むすべての人々のための Web の可読性" を向上させるために、両方の要素に title 属性を与えるべきであると奨励されています。

問題点

制作者は Mozilla および関連ブラウザ内で、title 属性を持つ abbr や acronym に点線の "下線" が描画されることを見つけました。この "下線" は、text-decoration: none 宣言で取り除くことはできません。その理由は Mozilla の <tt>html.css</tt> ファイルの中に見つけることができます:

abbr[title], acronym[title] {
     border-bottom: dotted 1px;
   }

結局、"下線" は下側の境界線でした。

解決法

制作者が abbr および acronym から "下線" を削除したい場合は、以下のようにします:

abbr[title], acronym[title] {
     border-bottom-width: 0;
   }

もちろん、境界線のスタイルや色を変更したり、テキスト要素の外観を変更したり、微妙に異なる文字色を使用するなど、代わりに幾つかの方法で削除することもできます。

これは、実際に削除しないでビジュアル的な境界線の太さを教えるのに良いでしょう。"下線" は読み手に、単語には追加の情報が関連付けられていることを伝えます。Mozilla では、要素上にマウスポインタを置いてしばらくすると、title 属性の内容がマウスポインタの隣に "ツールチップ" として表示されます。これらの要素から "下線" を削除することは、追加の情報が利用可能であるという指示を読み手から奪うことになります。

推奨

• "下線" が削除される場合は、制作者は要素の下側の境界線をスタイル付けしなければなりません。この状況では text-decoration が適用されません。

関連リンク

• Web Content Accessibility Guidelines 1.0