Internet Explorer 11におけるtitle属性

お断り：この記事はInternet Explorer Advent Calendar 2013、あるいはYet Another Internet Explorer Advent Calendar 2013のゲリラ投稿、ではありません。

Internet Explorer 9以降といえば、HTML5やCSS、SVGといったものへの対応が注目されがちですが、他のブラウザーが長い間対応してこなかった基礎的な部分への対応も進んでいます。この記事ではInternet Explorer 11（IE11）におけるtitle属性について書きます*1。

title属性

HTMLにはtitle属性という謎の属性があります。多くのブラウザーではtitle属性を設定した要素にマウスを重ねると値をツールチップとして表示します。しかし、ほとんどのブラウザーは、キーボードだけを使ってtitle属性を表示する方法をユーザーに提供していません（ツールチップを表示する方法がありません）。

私が特に問題だと感じるのはinput要素などのフォームコントロールのtitle属性値が表示されない点です。フォームコントロールにはlabel要素を使ってラベルを設定しましょうと言われていますが、様々な理由でlabel要素を使うことが難しい場合には次善の策としてtitle属性を使うことがあります*2（dequeが公開しているTechniques for Labeling Standard HTML Form Controlsにはlabe要素やtitle属性を含め、様々な状況におけるラベルづけのテクニックがまとめられています）。

Techniques for WCAG 2.0（WCAG 2.0 実装方法集)にもH65: Using the title attribute to identify form controls when the label element cannot be used（H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する）があります。WAICが公開しているアクセシビリティ・サポーテッド（AS）情報を見ても、この実装方法が多くのスクリーン・リーダーによってサポートされていることがわかります。

スクリーン・リーダー以外でもブラウザーでマウスを使っている環境であれば、マウスをコントロールに重ねることでtitle属性がツールチップとして表示され、内容を確認することができます。しかし、ブラウザーはキーボードだけを使ってツールチップを表示する方法をユーザーに提供してきませんでした。これではコンテンツが情報を提供しても、キーボードだけを使っている（目の見える）ユーザーに情報を伝えることができません。WAICのAS情報にも次のように書かれています。

キーボード操作時も画面にツールチップが表示されるように、ブラウザの今後の機能向上に期待する。

また、UAAG 2.0のLast Call Working Draftにも2.1.1 Provide Full Keyboard Functionalityという達成基準がありますが、キーボード操作でtitle属性を表示できなければこの達成基準を満たすことはできないでしょう（私見）。

Internet Explorer 11

IE11ではマウス以外にもキーボードとタッチ操作でtitle属性をツールチップとして表示できるようになりました。キーボードを使っている場合には、キーボードフォーカスをあわせるとtitle属性値がツールチップとして表示されます（select要素では表示されません）。また、タッチ操作でも要素をタップしたまましばらく指を動かさないでいると、title属性値がツールチップとして表示されます。


図1：IE11で入力欄にキーボードフォーカスをあてるとtitle属性がツールチップとして表示される（AS情報を作成する際に必要となるテストファイルのH065-2を操作している例）

AS情報を作成する際に必要となるテストファイルに対する結果

WAICが公開しているAS情報を作成する際に必要となるテストファイル（のうち実装方法H65に関連したもの）をIE11で操作した結果は次の通りです。

H065-1: H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する（select要素）

  • マウスポインタをセレクトメニュー上に置いたとき、「検索範囲を選択」はツールチップとして表示されない
    • セレクトメニューを展開し、展開されたメニューにマウスポイントを置くとツールチップは表示される
  • キーボードフォーカスでセレクトメニューに移動させるが、ツールチップは表示されない
    • Alt+下向き矢印キーを押下してセレクトメニューを展開し、展開された項目を選択してツールチップは表示されない

H065-2: H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する（input要素）

  • マウスポインタを各テキストフィールド上に置いた際に、それぞれのtitle属性値「市外局番」、「市内局番」、「加入者番号」がツールチップとして表示される
  • Tabキーで各テキストフィールドにフォーカスを移動させた際に、それぞれのtitle属性値「市外局番」、「市内局番」、「加入者番号」がツールチップとして表示される

H065-3: H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する（input要素）

  • マウスポインタをテキストフィールド上に置いた際に、title属性値「検索キーワードを入力」がツールチップとして表示される
  • Tabキーでテキストフィールドにフォーカスを移動させた際に、title属性値「検索キーワードを入力」がツールチップとして表示される

テスト環境

今回テストした環境はWindows 8.1上のIE11です。別のOS（Windows 7など）ではまた違う結果になるかもしれません。

OS
Windows 8.1 (64bit)
ブラウザー
Internet Explorer 11.0.96000.16438 (32bit、デスクトップ版）

その他、気がついたことなど

AS情報を作成する際に必要となるテストファイル以外にもいくつかのファイルを試して、次のようなことに気がつきました。

  • input[type="text"]以外でもキーボードフォーカスがあたればtitle属性はツールチップとして表示される
    • ただし、select要素にキーボードフォーカスをあててもtitle属性は表示されない
  • abbr要素のようなキーボードフォーカースがあたらない要素のtitle属性を表示する方法は依然としてない
    • キャレットブラウズモード（F7で起動）でもフォーカスがあたっていない要素ではtitle属性は表示されない

おわりに

Internet Explorerとツールチップというと過去には暗い時代もありましたが、IE11は現時点でもっとも対応が進んだブラウザーだと感じました。つまり、他のブラウザーベンダーも頑張れということです。

*1:この記事の内容に気が付いたのがIE11だったため「IE11」と記述していますが、それ以前のバージョンでも実はサポートしていたのかもしれません。その場合には気が付いた方が記事にしていただければと思います

*2:私はtitle属性を積極的に使うべきものだとは考えていません。label要素を使うことが難しい状況でまったく情報を提供しないよりは、title属性を提供したほうがまだ良い、と考えています