[all that's jazz][wag][wag Accessibility セミナー]
Welcome(0) || Tag-SiteMap(9) || frameset(b) || block(1)

Webアクセシビリティ: body

body(ボディ): 本論へ

---

body(ボディ) 本論

今現在行われているHTML文書作成は
原稿→レイアウト
このような行程ですが、
HTML4.01、ウェブアクセシビリティでは
原稿→構造化（ユニバーサルデザイン）
→レイアウト→アクセシビリティ
作業的にはこう変わっていくのでしょう。

つまりはbody部からスタイルシートのデザインを分離する事により、最低限、構造化（ユニバーサルデザイン）された文書として閲覧可能となり、アクセシビリティを施されると更に判りやすい文書になるという事です。

ここではまず、body部でよく使われる汎用属性とデータ形式についてお話しします。

汎用属性

以下の属性はほとんどの要素で使用可能です。

id="固有の名前"

idは識別子であり、そのページにおける番地のようなもので、同じ名前を繰り返し、ひとつのページに付ける事は出来ません。

英字で始まる文字列で、大文字、小文字の区別がされます。

今まで、<a name=""></a>で書かれていた任意の場所の指定などもXHTML1.0では<a name="" id=""></a>とこのように書き、nameとidは同じ名前にします。

class="分類名"

classはページの中での同じグループを指定する場合に使われ、ひとつのページ内で何度でも使用可能です。
主にスタイル適用に使われますが、スタイルシートでは乱用を避けるようにも指示されています。

複数指定も可能ですが、これもまた英字で始まる文字列で、大文字、小文字の区別がされます。

「このページのトップに戻る」などの複数回使われる箇所に使用します。

id class ともにHTML CSSの規則では特に制限はないのですが、ブラウザ側の認識として、"_"(アンダースコア)はうまく認識しないようです。
無難に半角英数字とハイフン"-"を使用すべきでしょう。

idとclassの違い

着せ替え人形ってありますよね。
HTMLは着せ替え人形本体にあたり、CSSは着せ替える洋服にあたります。

そして、どの洋服を何処に飾り付けるか、これがid class の役割となるのですが、差詰め、classは既製品で、idは特注。こんなとこでしょうか？

例えば大きな文字で表示と指定するのをid指定だと一カ所にしか指定出来ません。けれどもclass指定ならば複数箇所指定可能になります。

一見class指定の方が便利なように見えますが、複数箇所のうち、数カ所を斜体で表示させたいとかなった場合、class指定は不便となります。
HTMLのソースの中のclass名を書き換え、スタイルシートのclassを書き足さねばならないですから。

それよりも複数のidをスタイルシートで指定した方が修正時、スタイルシートのみの変更ですむようになります。

つまりはスタイルシートとは、洋服であり、HTMLという着せ替え人形本体がしっかりしていれば、どんなデザインにも衣替え可能となるわけです。

それゆえ、ページを作る上での設計が大切となってくるわけです。

なお、スタイルシートの認識順はidの方を優先するようです。

title="補足情報"

要素に対する補足的な情報を記述できる属性で、ポップアップで画面に表示されます。
視覚、聴覚共にサポートしますが、現状では晴眼者に対するアクセシビリティな属性になっています。

ただし、あまり長い情報はその利用法からも付加できません。

style="スタイルシート"

meta要素で指定したスタイルシート言語が記述可能で、要素のスタイルを指定できます。

ただし、XHTML1.1では非推奨となっています。

lang="言語コード"

その要素の内容で使われている言語が指定可能です。主にスピーチシンセサイザーなどで読み上げる際、正しい発音をさせるために使用されます。
en : 英語 en-US : アメリカ英語 en-cockney : コックニー英語
各言語でも地域指定が可能となっています。

データ形式

HTMLでは指定できるデータ形式が限られています。

色

「#」(シャープ)に続く16進数 RGB値(Red,Green,Blue) #ff0000などまたは基本16色の色名(英語)

CSSではこの他にRGB値16進数の簡略形や数値指定
#f00 rgb(255,0,0) rgb(100パーセント,0パーセント,0パーセント)などが指定可能です。
＃システムGUIに合わせた色指定も可能だそうです。

ページで使用可能とされているWeb Safe カラーとは RGB(Red,Green,Blue) それぞれ0-255まで色分けし、フルカラーだと、256*256*256=16,777,216色。
それを6段階にしたものがWeb Safeカラーで6*6*6=216色です。

考え方は0,51,102,153,204,255 51ずつ増やしていったもので
51は16進数でいえば、33 割合でいえば、20パーセント

10進数	0	51	102	153	204	255
16進数	0	33	66	99	CC	FF
パーセンテージ	0%	20%	40%	60%	80%	100%

HTML定義済みの色

長さ

• ピクセル数 : コンピューターディスプレイの解像度
• パーセンテージ(%) : 利用可能な長さに対する割合
• アスタリスク(*) : ピクセル数、パーセント 指定された部分を除いた残りの比率

CSSではこの他にフォントサイズのプロパティの値を1としたem
指定文字のフォントの値を1としたexの相対単位。
インチ(in)、センチメートル(cm)、ミリメートル(mm)、
ポイント(pt)、パイカ(pc)の絶対単位が指定可能。

ただし、アクセシビリティの観点から、相対単位が望ましいとされています。

ちなみにピクセル数は相対単位になりますが、サイズ変更などの場合、使用環境により、サイズ変更出来ない文字コードが含まれている場合、絶対単位的な表示、つまりはサイズ変更出来ない不具合を起こす事があります。

文字列

文字参照といい、記号などは特定の文字列を使う事で使用可能です。
<　は　&lt;　>　は　&gt;　など。

属性値では前後に空白文字がある場合、無視され、タブや改行は半角スペースとして置き換えられます。

少し難しくなりましたが、このようなきまりがHTMLにはあるという事を認識して置いて下さい。