title属性の表示テスト
解説
title属性は様々なHTML要素に設定する事が可能です。
このページでは代表的なHTML要素にtitle属性を設定した場合の、「やさしいブラウザ」での表示や読み上げが、どのようになるかを確認できます。
a要素にtitle属性を設定する（１）
HTMLソース
<a href=”ewbc_sample” title=”タイトル属性は「indexへ戻る」です”>INDEXへ戻る</a>
※「やさしいブラウザ」では、a要素のラベルがテキストの場合、テキスト本文が読み上げられます。
li要素にtitle属性を設定する
- インフォ・クリエイツ
HTMLソース
<li title=”タイトル属性は「インフォ・クリエイツ」です”>インフォ・クリエイツ</li>
※「やさしいブラウザ」では、li要素のラベルがテキストの場合、テキスト本文が読み上げられます。
img要素にtitle属性を設定する
HTMLソース
<img src=”top_i.jpg” title=”タイトル属性は「やさしいブラウザ」です”>
※「やさしいブラウザ」では、img要素のalt属性が読み上げられます。
img要素にalt属性とtitle属性の両方を設定する
HTMLソース
<img src=”top_i.jpg” alt=”alt属性は「やさしいブラウザ」です” title=”タイトル属性は「やさしいブラウザ」です”>
※「やさしいブラウザ」では、img要素のalt属性が優先的に読み上げられます。
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属性は読み上げません。
CSSでテキストを画像に変換した場合の、テキストa要素にtitle属性を設定する
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要素のラベルであるテキストの本文が読み上げられます。
(やさしいブラウザでの表示を確認してみてください）