やさしいブラウザ・クラウド版 コンテンツサンプル4

title属性の表示テスト

解説

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

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

 

CASE1

a要素にtitle属性を設定する(1)

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属性を設定する(2)

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

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