title属性の表示テスト

解説：title属性は様々なHTML要素に設定する事が可能です。

このページでは代表的なHTML要素にtitle属性を設定した場合の、「やさしいブラウザ」での表示や読み上げが、どのようになるかを確認できます。

CASE1

a要素にtitle属性を設定する（１）

INDEXへ戻る

HTMLソース

<a href="ewbc_sample" title="タイトル属性は「indexへ戻る」です">INDEXへ戻る</a>

※「やさしいブラウザ」では、a要素のラベルがテキストの場合、テキスト本文が読み上げられます。

CASE2

li要素にtitle属性を設定する

  • インフォ・クリエイツ

HTMLソース

<li title="タイトル属性は「インフォ・クリエイツ」です">インフォ・クリエイツ</li>

※「やさしいブラウザ」では、li要素のラベルがテキストの場合、テキスト本文が読み上げられます。

CASE3

img要素にtitle属性を設定する

HTMLソース

<img src="top_i.jpg" title="タイトル属性は「やさしいブラウザ」です">

※「やさしいブラウザ」では、img要素のalt属性が読み上げられます。

CASE4

img要素にalt属性とtitle属性の両方を設定する

alt属性は「やさしいブラウザ」です

HTMLソース

<img src="top_i.jpg"
  alt="alt属性は「やさしいブラウザ」です"
  title="タイトル属性は「やさしいブラウザ」です">

※「やさしいブラウザ」では、img要素のalt属性が優先的に読み上げられます。

CASE5

a要素にtitle属性を設定する（２）

alt属性は「やさしいブラウザ」です

HTMLソース

<a href="index.html" title="タイトル属性は「indexへ戻る」です">
  <img src="top_i.jpg" alt="alt属性は「やさしいブラウザ」です"
    width="530" height="150" title="タイトル属性は「やさしいブラウザ」です">
</a>

※「やさしいブラウザ」では、a要素のラベルがimg要素の場合、img要素のtitle属性、alt属性の順位で読み上げられます。a要素側のtitle属性は読み上げません。

CASE6

CSSでテキストを画像に変換した場合の、テキストa要素にtitle属性を設定する

a要素のテキスト本文は「やさしいブラウザ」です。

HTMLソース

<a href="index.html" class="csstitle" title="タイトル属性は「やさしいブラウザ」です">
  a要素のテキスト本文は「やさしいブラウザ」です。</a>

CSSソース

a.csstitle {
  background-image: url(/etc/sample_contents/top_i.jpg);
  background-repeat: no-repeat;
  display: block;
  text-decoration: none;
  height: 150px;
  width: 530px;
  text-indent: -5000px;
}

※「やさしいブラウザ」では、CSSで画像を変換表示していても、a要素のラベルであるテキストの本文が読み上げられます。

(やさしいブラウザでの表示を確認してみてください）