音声ブラウザご使用の方向け： ナビメニューを飛ばして本文へ ／ ナビメニューへ

XHTMLに関するレイアウトとアクセシビリティ

はじめに

XHTMLは、ウェブページ(ホームページ)を記述するための言語として使用されています。XHTMLは文書の論理的構造を記述するための言語であり、レイアウトをするための言語ではありません。

DAISY2.02規格で採用されているXHTML1.0では、文書の見栄えを指定するタグや属性は廃止され、見栄えに関する記述は全てCSS(スタイルシート)で行うことになりました。また、XHTMLではstyle属性がサポートされていませんので、見栄えに関する情報はCSSと呼ばれる外部のファイルに記述する必要があります。

宣言文

XHTMLファイルには、この文書がXHTML規格で書かれていることを表す「宣言文」をソースコードの先頭に記述する必要があります。XHTMLの宣言文は以下の通りです。

XHTMLソースコード

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="CONTENT-STYLE-TYPE" content="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="default.css" />
<title>XHTMLに関するレイアウトとアクセシビリティ</title>
</head>

1行目ではXMLのバージョンと文字のエンコードを指定しています。2行目は文書型の定義を指定しています。XHTML 1.0 Transitionalが該当部分です。外部CSSファイルを参照する場合は、7行目と8行目の記述が必要です。8行目herf="の後に、使用するCSSファイルの名前とファイルの場所を記述します。

タイトルに非ASCII文字(日本語など)を記述する場合は、その行の前に文字コードのや言語の指定をしなければいけません。

文字コードは主に以下の種類があります。

iso-2022-jp
電子メールなどで使用されています。
shift_jis
DOSやWindows95、MacOSなどで使用されています。
euc-jp
UNIXやLinuxで使用されています。
utf-8またはutf-16
XML文書の標準の文字コードです。WindowsNT、Windows2000、MacOSX等で使用されています。

上記例では文字コードセットがshift_jisとなっていますが、XHTMLファイルを製作する環境に合わせて変更してください。

文書の構造とアクセシビリティ

以下に文字の大きさの例を挙げます。

表示例:

見出しと文字の大きさ

見出しと文字の大きさ

これらは視覚的なブラウザ(InternetExplorerやNetscapeNavigator、Opera等)では文字の大きさと色が同じに見えますが、それぞれが持つ意味は大きく異なっています。

上記例のソースコードは以下の通りです。

XHTMLソースコード

<h3 class="ex1">見出しと文字の大きさ</h3>
<p class="ex1">見出しと文字の大きさ</p>

はじめの「見出しと文字の大きさ」は3番目に大きな見出し、下の「見出しと文字の大きさ」は段落を意味しています。hタグを使用すると、文字の大きさが大きく「見える」ようになりますが、文字の装飾など、視覚的表現をするために文書の構造を表すタグを使用してはいけません。これは、視覚的表現ができないテキストブラウザ(w3m、lynx、ALTAIR)等では、文字の大きさや色の情報は一切無視されてしまうため、文書の構造が壊れてしまうからです。文字の装飾や見栄えに関する表現は、CSSを使います。

画像のアクセシビリティ

画像には必ずalt属性を使用して、目の見えないユーザ、弱視のユーザ、画像の表示をしないように設定しているユーザにも装飾的な画像なのか、情報を持っている画像なのかを表します。

ここでいう「画像」は、フォームのボタンに画像を使用したとき等も含みます。

コメントの記述

XHTMLには、ソースコード内にコメントを書くことが出来ます。コメントはブラウザ上には表示されないため、XHTML制作者が自由に記述できます。コメントの開始は<!--で、半角で1文字分スペースを置いてそこからコメントを記述します。コメントの終了は半角で1文字分スペースを置いて-->となります。コメント内に2つのハイフン(--)を記述してはいけません。

XHTMLソースコード

<!-- コメントはこのように記述します。 -->

参考資料

先頭に戻る | ひとつ上の階層へ