第10回 アクセシブルなWebサイトの実装

1. アクセシビリティの概念とガイドラインを理解する
2. 画像の取り扱い方法について，アクセシビリティの観点から復習する(特に，alt属性について確認する)
3. アナログ情報とデジタル情報の各々の特徴，両者の変換原理について理解する
4. コンピュータが文字をどのように扱っているかについて理解する

今週は，出来る限り多くのユーザが閲覧することのできるWebサイトを実現するために，Webサイトのアクセシビリティについて学びます．アクセシビリティの高いWebサイトを実現できるようになることが，ここでの目的です．特に，アクセシビリティの観点から画像の取り扱いについて復習します．

授業後半では，アナログ情報とデジタル情報について学び，画像や音，文字などの情報がコンピュータ内部でどのように扱われているかについて学習します．

注意
教材本文中にも明記していますが，Web上で公開されている画像等(文章，音楽，動画を含む)を著作者に無断で利用することは著作権侵害となります．他のWebサイトからコピーした画像等を自分のWebサイトに無断掲載することは絶対にしないようにしましょう．詳しくはCNS ガイドを参照して下さい． アクセシビリティ，ビットマップ画像，ベクトル画像，アナログ情報，連続量(アナログ量)，デジタル情報，離散量(デジタル量)アナログ/デジタル変換(A/D 変換)，標本化(sampling)，量子化(quantization)，コード化

先週までの授業において，Webの設計について一通りの解説と実習を行ってきました．最後に，皆さんが制作するWebサイトが多くの人にとって利用しやすいものとなるために，アクセシビリティの概念について説明します．

Webサイトには様々な人が訪れます．お年寄りや小さな子供，視覚や聴覚，手が不自由な人，テキストしか表示できないブラウザを使用している人，母国語が異なる人などが，皆さんの制作するサイトを訪れることもあるでしょう．

それゆえに，Webサイトを設計する際には，どのような環境にあるユーザにとっても利用しやすいページや構造をデザインする必要があります．すなわち，Webサイトのアクセシビリティ(Accessibility)を意識した設計を行う必要があります．アクセシビリティと言うと，障害者や高齢者だけがその対象であるように思われがちですが，障害者や高齢者などにとって利用しやすいWebサイトは，それ以外の訪問者にとっても利用しやすいページであると言えます．

まず，Webサイトには以下のような環境にある人が訪れる可能性があることに留意する必要があります．

• 視覚や聴覚に障害がある
• 手などに障害があり，キーボードやマウスを利用しにくい
• 小さなスクリーンを利用している
• 低速な回線を利用してインターネットに接続している
• 記載されている言語を理解することができない
• 古いブラウザや音声ブラウザなど，様々なブラウザを利用している

ここでは，一般的なアクセシビリティのガイドラインを簡単に紹介します．全てを完璧に満たす必要はありませんが，少しでも環境の異なる訪問者に優しいページを作るよう心がけましょう．

• HTMLの文法が正しいかどうかチェックしましょう
• ページタイトルは，ページの内容が一目で理解しやすいようにつけましょう
• 背景色，文字色には十分なコントラストを持たせましょう(薄い無地の背景に濃い色の文字，など)
• 画像には，(特に不必要な場合を除き)alt属性をつけましょう
• リンクボタンになっている画像全てにalt属性をつけ，リンク先を明確にしましょう
• リンクボタンになっている画像は，その画像がリンクボタンであることが分かるようにしましょう
• 色によって伝えられる情報は，色がなくても伝わるように工夫しましょう
• フレームの使用は必要最低限にしましょう
• アニメーションは，それが本当に必要である場合を除き利用を控えましょう

上記のガイドラインの中から，画像のalt属性に関して詳しく説明します．画像を表示することのないブラウザは，代わりにalt属性によって指定された文字列を表示します．画像を表示しない理由としては，画像形式に対応していない，携帯電話のように表示能力が限られている，画像転送に時間がかかり過ぎる，視覚障害者のための音声ブラウザである，などが考えられます．

画像を表示しないブラウザでWebページを閲覧する人の為に，alt属性にはその画像がどういうものであるのかを簡潔に分かりやすく記述しましょう．

Webのアクセシビリティについてのより詳細な情報は，例えば下記のようなWebサイトから入手することができます．

• W3Cのアクセシビリティに関するQuick Tips
• 株式会社ユーディットのアクセシビリティガイドライン

注意
最終発表は Mozilla による表示を条件とします.

アクセシビリティの項で，Web上に画像を表示する際の注意点を説明しました．ここでは，もう少し詳しく画像の取り扱いについて説明します．一口に画像と言っても，いろいろな種類があり，次のような分類によって整理することができます．

• 時間的変化による分類
• 静止画：写真のように，時間的に変化しません
• 動画：映画のように，あらかじめ決められた通りに変化します
• インタラクティブアニメーション：見る人の操作に応じて変化します
• 次元による分類
• 2次元：平面的な図形から構成された画像です
• 3次元：立体的な図形から構成された画像です．ただし，表示装置はディスプレイやプリンタなどの2次元的なものしかありませんので，3次元から2次元へ変換してから表示します．3次元の図形データを作ることをモデリング(modeling)，視点や照明を指定して，実際に見える2次元画像に変換することをレンダリング(rendering)と呼びます
• 表現方法による分類
• ビットマップ画像：ビットマップ画像は小さなタイルで作成されたモザイクのように，細かい点の集まりで画像を表現します．このタイルに相当するのは，画素(pixel)です．例えば，直線は連続した画素に同じ色を塗ることによって表現されます．
ビットマップ画像は写真のように，形や色が不規則なものの表現に向いています．編集は画素単位で行います．しかし，モザイクになっているため，画像を移動，拡大，または回転すると画像が汚くなりやすいです．たとえば，拡大すると小さなタイルが大きなタイルで置き換えられたかのように表示され，ギザギザが目立ちます．
• ベクトル画像：幾何学的図形の組合わせによって画像を表現します．模式図のように，規則的な図形の表現に向いています．編集は図形単位で行います．ベクトル画像は拡大，縮小，回転，変形，塗りつぶしなどを自由に行っても汚くなることがないのが特徴です．図形の一種としてビットマップ画像を含めることができる形式もあります．

CNSでは，ビットマップ画像を編集するためのソフトウェアとしてXpaintやPhotoshopが，ベクトル画像を編集するためのソフトウェアとしてはTgifやIllustratorが用意されています．詳しくは，CNSガイドをご覧下さい．

• 著作権：Web上で公開されている画像を著作者に無断で利用することは，著作権侵害となります．デジタル情報(→10.4 アナログ情報とデジタル情報 参照)は簡単にコピーできてしまうため，特に注意が必要です．
• alt属性：画像を表示しないブラウザは，代わりにこの属性で指定された文字列を表示します．画像を表示しない理由としては，画像形式に対応していない，携帯電話のように表示能力が限られている，画像転送に時間がかかり過ぎる，視覚障害者のための専用ブラウザである，などが考えられます．
  注意
  alt要素の内容は画像を表示しないブラウザで見る人の為に，その画像がどういうものであるのを簡潔に分かりやすく書きましょう．
• width属性，height 属性：画像の幅と高さを指定します．数字だけのときは画素数，うしろに % を付けると，ブラウザのウィンドウに対する割合を表します．指定された大きさに画像を拡大，縮小して表示します．

例えば「image」というディレクトリの下にある，photo.pngという画像を表示させたい場合は以下のように記述します．

前頁では画像の取り扱いについてアクセシビリティという観点から復習しました．画像に限らず，私たちはコンピュータを利用して様々な情報を取り扱うことができます．ここでは，アナログとデジタルという視点から，コンピュータ内部でどのように情報が扱われているのかについて学習します．

社会の情報化が進むにつれ，様々なところでデジタルという言葉や，その対比としてのアナログという言葉を耳にするようになりました．ここでは，日常使われているデジタルやアナログという言葉が何を意味しているのか，両者にはどのような違いがあるのかについて理解することを目的とします．

　

情報科学において，アナログやデジタルとは「量」という概念からみた情報の分類の仕方を表すものです．我々は様々な量に囲まれて生活をしています．その中でも，例えば机や椅子の数のように，1個，2個・・と数えることができる量と，重さや長さ(例えば，70.2432...kg，181.2436...cm)のように厳密に測ろうとすればいくらでも細かく測りうる量とがあり，それぞれ離散量(デジタル量)，連続量(アナログ量)と呼ばれます．情報にも，連続量で表されるアナログ情報と離散量で表されるデジタル情報があります．

アナログとデジタルを比較する例として，時計について考えてみましょう．本来時間は連続的に流れていくものとして考えられます．この時間の流れを針の回転に対応させたものがアナログ時計です．また，時刻を1秒(もしくは1分など)ごとに数値として表したものがデジタル時計です．時刻だけでなく，温度や重さなど様々な種類の同じ情報をアナログとデジタルで表現することができます．

皆さんが普段利用しているコンピュータは，ONかOFFか(1か0か)の電気信号の組み合わせとして情報を処理する機械，すなわち離散量を持つデジタル情報を扱う機械です(アナログ量で計算を行なうアナログコンピュータもかってありましたが，今では使われません)．

コンピュータは直接アナログ情報を処理することができないため，情報を入力する際にアナログ情報をデジタル情報に変換する必要があります．情報をデジタル化することによって，文字や音声，画像，動画など様々な情報をコンピュータによって統合的に処理できるようになりました．以下では，音を例にアナログ情報をデジタル情報に変換する方法について学びます．

アナログ情報をデジタル情報に変換することを，アナログ/デジタル変換(以下 A/D 変換 と略記)といいます．

さて，A/D 変換は，標本化(sampling)と量子化(quantization)という二段階を経てなされます．

　
標本化と量子化

　 　

・標本化(sampling)

音のアナログ情報があるとします．この波形を時間の関数として，時間軸に沿って時間点列T0，T1，T2，・・・Tnをとり，各点での波高値Fを読み取ります．この作業を標本化といい，標本の結果得られる値を標本値といいます．

・量子化(quantization)

波高値は連続量ですから一般に少数以下の値が存在しますが，その値を一定の単位で整数値で近似し，それを波高値とみなします．この整数化の作業が量子化です．

このように，元の音声波形は標本化と量子化によって適当な整数値の集合として表現することができます．この整数値を電気信号列に置き換えることによって，元のアナログ情報をデジタル情報として取り扱えることになります．音声をA/D 変換して伝送すると，もとの音声波形の姿ではなく数値列として伝送されるため，受け取った側がそのまま聞きとることは出来ません．このため，A/D 変換されたアナログ信号を人間が扱うためには，元のアナログ情報に戻す必要があります．この変換をデジタル/アナログ変換(D/A 変換)といいます．

音と同様に，画像も標本化，量子化という過程を経てデジタル化されます．10_3で説明したように，ビットマップ画像は画像を小さな点(画素，picxel)に分割し(標本化)，各ピクセルに色情報を3バイトの整数として表した値を割り振ります(量子化)．標本化を細かくすればするほど画像の品質は向上しますが，画像の情報量は増大します．

デジタル情報は次のような性質を持ちます．

雑音に強い

一般に，伝送したい信号に影響を与えて信号を歪めるものを雑音といいます(雷がなるとテレビの画面が乱れることがありますが，これは画像情報を伝える電波に雷の電波が雑音として加わったためです)．アナログ情報は雑音の影響を受けやすい性質を持っています．電気信号を伝送しようとした時，電流の波形(アナログ情報)に注目すると，波形は伝送に伴い雑音の影響を受け歪められます．しかし，波形ではなく信号が「来た、来ない」ということに注目すると，1つの信号が1つとして認識できさえすればデジタル情報としての価値は減りません．伝送する信号を，波形ではなく，信号がいくつやってきたかという個数に着目すれば，雑音の影響は大幅に改善されます．

例えば，1℃間隔で温度を表示するデジタル温度計では，20℃と21℃の中間値はなく，20℃か21℃のどちらかとして表示されます．そのため，20℃の温度が雑音の影響を受けて19.8℃や20.3℃になっても，これを20℃として考えることができます．つまり，デジタル情報は雑音の影響が一定範囲内であればもとの情報を再現することができるのです．

複製が容易

アナログ情報は雑音の影響を受けやすいため，情報を複製するに伴い劣化していきます．しかし，デジタル情報は雑音に強いことから，情報を元の形のまま複製することができます．

加工が容易

デジタル情報は数値列として表されるため，コンピュータによって容易に加工することができます．文書処理ソフトウェア(emacs など)で文書を作成する場合，文書の一部を複製して貼り付けたり，修正することが容易にできます．しかし，原稿用紙の上でこれと同じ編集結果を得ようとすると非常に手間がかかります．

注意
現在ソフトウェアや音楽ファイルの違法コピーが社会的問題になっています．デジタル情報は複製が容易に行える反面，常に著作権に留意する必要があります．

私たちの日常生活の中でデジタル化が進んでいる例として，次のようなものが挙げられます．

音楽

記録媒体がアナログレコードやテープレコーダからCDやMDへ変わってきています．

画像(静止画，動画)

アナログカメラで記録されていたものが，デジタルカメラで記録されるようになりました．

電子図書館

書物等図書館にある情報をデジタル化することによって，直接図書館に行かなくてもその情報を得られるようになりました．

切符，定期券

デジタル化されたことによって，機械による自動処理(自動改札)が可能となりました．

他にも日常の様々なところでデジタル化が進んでいます．他にどのような例があるか調べてみましょう．

A/D 変換の原理からわかるように，アナログ情報をデジタル化する際には標本化と量子化による誤差が入り，完全には元の波形を再現できません．採集する標本点を増やし，量子化の単位を小さくすればする程デジタル化された情報は元のアナログ情報に近づきますが，取り扱う情報量は多くなります．そのため，A/D 変換の際には品質と情報量の増加の兼ね合いを考慮する必要があります(このように，一方を立てれば他方が立たないという関係をトレードオフと呼びます)．

例えばCDは，細かく標本化と量子化を行うことによって再生時の品質を向上させることができますが，コスト等との兼ね合いから適切と判断される情報量になっています．

10_5 では，文字情報のデジタル化について学びます．

コンピュータの中では，様々な情報は2進数によって表され，デジタル情報として扱われます．ここでは，文字情報がコンピュータ内でどのように扱われているのかについて，具体的に見てみましょう．

コンピュータ内では，文字情報は数値と対応づけることによって表現されます．文字情報を数値と対応づけるということは，どのようなことなのでしょうか．例えば，アルファベットを0から25までの数値に順番に当てはめていくことによって，アルファベットを数値として扱うことができます．実際のコンピュータでは，対応づけされる数値としてはコンピュータが理解することのできる2進数が使われます．また，数値と対応づけられる文字情報には，アルファベット以外にも数字や記号，空白や改行(機能コード)が含まれます．

このように，文字に限らず情報を数値に対応づけることをコード化と言います．また，コード化された記号全体をコード系と呼び，通常は表の形でまとめられます。この表のことを、コード表といいます．下の図は，ASCII7ビットコード表と言われるものです．

ASCII７ビットコード表

＼	0	1	2	3	4	5	6	7
0	Null	DLE	空白	0	@	P	`	p
1	SOH	DC1	!	1	A	Q	a	q
2	STX	DC2	"	2	B	R	b	r
3	ETX	DC3	#	3	C	S	c	s
4	EOT	DC4	$	4	D	T	d	t
5	ENQ	NAK	%	5	E	U	e	u
6	ACK	SYN	&	6	F	V	f	v
7	BEl	ETB	'	7	G	W	g	w
8	BS	CAN	(	8	H	X	h	x
9	HT	EM	)	9	I	Y	i	y
A	LF	SUB	*	:	J	Z	j	z
B	VT	ESC	+	;	K	[	k	{
C	FF	FS	,	<	L	\	l	¦
D	CR	GS	-	=	M	]	m	}
E	SO	RS	.	>	N	^	n	~
F	SI	US	/	?	O	_	o	DEL

ASCIIコード表では，文字情報を7桁の２進数(128通りのビットパタン)に対応づけています．これは，このコード表では2の7乗個，即ち128個の文字情報を区別し，表すことができるということを意味しています．ASCIIコードは日本語には対応していませんが，例えばアルファベットに加えて半角カタカナを扱おうとすると，7ビットでは足りません．JIS X 0201と呼ばれるコード系では，文字情報を8ビットのビットパタン(256通りのビットパタン)に対応づけることによって，アルファベットに加えて半角カタカナをも扱えるようになっています．

文字のコード化は，文字記号の少ないアルファベット圏では比較的容易ですが，漢字圏のように多数の文字があるところでは様々な問題があり，困難です．どの文字を採用するかを考えることも大変ですし，採用した文字と数値(ビット列)の対応づけも面倒な作業になります．加えて，後で文字を追加するときには，先に作られたコード系といかに整合性を保つかといった多くの作業をこなさなければなりません．

図のASCII7ビットコード表とは，その名のとおり7ビット，すなわち128通りのビット列一つ一つに記号を割り当てたものです．上側の0〜7の16進数（→4.2 情報量）は上位3ビット，左側の0〜Fの16進数は下位4ビットを表しています．表を見ると，例えば大文字のAは16進数では41，すなわち２進数では1000001というビット列に対応しています．つまりこのコード系に基づいた場合，コンピュータにとって大文字のAは1000001というビット列として扱われます．

また，「CR」や「DEL」など，見慣れない文字列があります．これらは文字ではなく，コンピュータに特定の機能を実行させる役割が割り当てられた機能コードです．例えば，BS(Back Space)は「一文字後退」を，CR(Carriage Return)は「行頭復帰(カーソルを，カーソルが位置する行の先頭に移動させる)」を意味しています．

高機能なコンピュータが低価格で手に入るようになり，ますますコンピュータが日常的になってくると，日本語処理でも本格的な漢字の利用が始まりました．アルファベットをはじめとする文字記号を表すためには7ビットが，アルファベットに加えて半角カタカナを扱えるためには8ビットが必要でした．漢字の文字数は数万にのぼるため，現状ではその一部のコード化が行われているにすぎませんが，それでも実用的に漢字を扱うには8ビット＝1バイト(256パタン)ではとても足りません．そこで，漢字のコード化は16ビット＝2バイト(65536パタン)で処理されることになりました．漢字を取り扱うコード系としては，iso-2022-jp，SHIFT_JIS，EUC-JPの3種類がよく使われています．

次のリンクを開いてみましょう．

→文字化けページ

このように，正しく文字が表示されないことを文字化けと言います．皆さんも，Webページを閲覧しようとしたら文字化けしていて読めなかった，という経験があるかもしれません．

文字化けは，漢字を扱うためのコード系が複数混在していることによって生じます．通常は，ブラウザの設定で文字コードを適切に設定することによって直すことができます(→1.3 ブラウザの使い方)．

文字化けを起こさないために，CNSでHTMLファイルの編集を行う際には，head要素の中に以下の一行を挿入します．

<meta http-equiv="Content-Type"content="text/html; charset=ISO-2022-JP" >