| フレームのタイトル(title属性)は適切ですか? | |
| WAI / WCAG 1.0 優先度2 チェックポイント 12.2 | |
| 概要 Webページにあるframeset要素およびframe要素にtitle属性があります。そのtitle属性値が、そのフレームの目的および他のフレームとの関係について説明されていることを確認してください。 もし、必要であれば、longdesc属性も追加してください。 |
|
| チェック方法
frame要素のtitle属性値にそのフレームの目的や他のフレームとの関係が分かりやすく記述されていることを確認してください。もし、title属性値で十分に説明できない場合(例えば、イメージ、リンク、あるいはその他のマークアップが必要な場合)には、longdesc属性を用いて、長文の説明文を提供するページへのリンクを設定してください。
name属性は、プログラム上の目的で用いられますが、属性値にスペースを含めることはできません。title属性値には、スペースを含めることができますが、フレームを説明するテキストを記述します。基本的には、両方とも用いるようにしてください。 |
|
| 解説 フレームを用いると、情報およびナビゲーション部分をグループ化して、決まったレイアウトにして表示させることができます。しかしながら、支援技術(音声ブラウザ、スクリーンリーダー、テキストブラウザ)の中には、その視覚的なレイアウトを用いることのできないものがあります。そういった支援技術は、他のフレームに関する説明がない状態で、各フレームをそれぞれ別々にレンダリングします。ユーザーは、他のフレームおよびそのコンテンツの存在に気づくことすらできません。それゆえ、ユーザーがフレーム間の関係を理解できるような説明を各フレームの中で提供することが重要なのです。 "トップ"、"左下" のようなタイトルがフレームのtitle属性値として記述されていることがよくありますが、これでは説明が不十分ですし、ユーザーはそのフレームと他のフレームとの関係を理解することができません。 以下のHTMLソースコード例を考えてみてください( HTML Techniques for Web Content Accessibility Guidelines 1.0 [http://www.w3.org/TR/WCAG10-HTML-TECHS/#frame-text-equivalent] の一部を改変)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>今日のニュース - 日本新聞</title>
</head>
<frameset cols="10%,*,10%">
<frameset rows="20%,*">
<frame src="promo.html" name="promo" title="おすすめ">
<frame src="sitenavbar.html" name="navbar"
title="メニュー" longdesc="frameset-desc.html#navbar">
</frameset>
<frame src="story.html" name="story" title="ニュース - 本文"
longdesc="frameset-desc.html#story">
<frameset rows="*,20%">
<frame src="headlines.html" name="index" title="その他の
ニュースの目次" longdesc="frameset-desc.html#headlines">
<frame src="ad.html" name="adspace" title="広告">
</frameset>
<noframes>
<p><a href="noframes.html">ノンフレーム版</a></p>
<p><a href="frameset-desc.html">フレームの説明</a></p>
</noframes>
</frameset>
</html>
frameset-desc.html は、以下のようなコンテンツです。
#Navbar - このフレームには、<a href="sitenavbar.html">このサイト
の主要コンテンツ</a>へのリンクがあります。海外ニュース、
国内ニュース、地方ニュース、技術ニュース、そして、エンター
テインメント・ニュース、などです。
#Story - このフレームには<a href="story.html">ニュースの本文</a>が
表示されます。
#Index - このフレームは、そのコーナー内のその日の
<a href="headlines.html">主なニュースの目次</a>です。
noframe要素は、ユーザーがフレームをサポートしていない特別なブラウザ(例えば、PDAや携帯電話のブラウザ)を使用しているときに役に立ちます。 |
|