title属性の表示テスト

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

CASE1
a要素にtitle属性を設定する（１）
INDEXへ戻る
HTMLソース
<a href="index.html" title="タイトル属性は「indexへ戻る」です">INDEXへ戻る</a>

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

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

インフォ・クリエイツ

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

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

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

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

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

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

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

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

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

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要素のラベルであるテキストの本文が読み上げられます。