Part I：はじめに

IT時代といわれる今日，コンピュータやインターネットなどの情報通信技術がますます我々の生活に浸透してきています．総務省の「平成16年 通信利用動向調査」によると，平成16年末には，世帯の8割がインターネットを利用し，利用者数は8千万人にのぼっています．

ウェブ (World Wide Web)は，CERN（欧州原子核研究機構）の研究者Tim Berners-Leeが考え出した仕組みです．CERNは国際的な共同研究施設なので，世界中から研究者がやってきます．しかし彼らは実験が終わるとそれぞれの所属組織に帰ってしまいます．というわけでCERNには，世界中の国からやってくる様々な研究者が作ったデータがあちこちに散在しているものの，それを再利用することは難しい状態でした．そこでインターネット上に散在しているデータを再利用する仕組みとしてウェブが作られました．ウェブではハイパーリンクという仕組みを使って他のデータを指し示すことができます．また文字データのみならず，画像や音などの様々な形式のデータをウェブブラウザで表示できるようになっていました．

ウェブにある情報（文章，画像，動画など）は電子データの形でサーバに置かれており，ネットワークにつながった世界中のコンピュータでその情報を利用できます．ウェブにある情報を利用するのは人間だけではなく，コンピュータが利用することもあります．皆さんがよく使うGoogleなどの検索エンジンは，検索プログラムがウェブ上にあるデータを検索して，人間に結果を教えてくれます．ウェブは，電子メールと並んで多いインターネットの利用形態です．ウェブを利用して新聞や天気予報や地図や電車の乗り換え情報を見たり，オンラインショッピングをしたりすることもできます．今や電子メールでさえ，ウェブで利用することもできるようになっています．ブログ，SNS (Social Network Service)，Ajaxなど，Web 2.0時代を迎え，ウェブは，ますます頻繁に使われるインターネット・アプリケーションになっていくでしょう．

ウェブはサイバー世界とも言われます．サイバー世界では，利用者に合わせて情報を自由に変身させることができます．皆さんが使っているウェブブラウザで「Ctrl」キーと「＋」キーを同時に押してみてください．文字が大きくなりませんか？「Ctrl」＋「－」を押すとどうなりますか？ このとき，画像も文字と同じように拡大・縮小するブラウザもあります．スクリーンリーダと呼ばれる読み上げソフトを使えば，ウェブページにあるデータを合成音声で読み上げさせることもできます．その際，リンクは女性の声で読んだり，見出しの間をスキップしたり，画像の代わりにその説明を読んだりすることもできます．このようにウェブ上のデータは，利用者に応じて変幻自在に変身できるのです．

今度は，ウェブブラウザのウィンドウ幅を変えてみてください．ウェブサイトによっては，ウィンドウ幅に応じてコンテンツの幅が狭くなったり広くなったりする物があります．でも，ウィンドウを広くしてもコンテンツ自体の幅は広がらないサイトや，ウィンドウを狭くしてもコンテンツの幅が変わらないので横にスクロールしないと使えなくなるサイトもあると思います．スマートフォンで見てもパソコンで見ても最適化されるウェブサイトもあれば画面が狭いスマートフォンだと見難くて仕方がないサイトもあるでしょう．ウィンドウ幅に応じてコンテンツ幅が変わるサイトと変わらないサイトでは何が違うのでしょうか？ 皆さんはどちらの方が使いやすいですか？ スマホ利用がづえている現代ではどちらが使いやすいと思いますか？ この授業で学ぶことをきちんと考慮すれば，ウィンドウ幅に応じてコンテンツ幅が変化するサイトを作ることもできるようになりますよ．

日本政府は，2005年2月に「IT政策パッケージ2005」として，ITの利用・活用をいっそう促進し，ITがもたらす問題点を克服することをあげています．IT政策パッケージには，電子政府や電子自治体の推進が取り上げられているので，今後，行政情報がインターネットで提供されるだけでなく，電子申請などのサービスがオンラインで行われることが見込まれます．そして，電子政府のこうしたサービスはウェブで行われるでしょう．行政情報はウェブで提供され，電子申請もウェブページから利用することになると思われます．

新聞などで盛んに報道されているように，日本は前例のない高齢化社会に突入しつつあり，2015年には4人に1人以上が高齢者(65歳以上)になると予想されています．高齢になると，認知能力や身体能力が衰えてきます．また，視覚障害などの身体障害を生じる割合も増えます．このような社会で電子政府を推進するためには，高齢者を含む誰もが簡単にウェブを使える（ユニバーサルなウェブ利用ができる）ようにしておく必要があります．

ウェブの便宜を受けるのは健常者だけではありません．障害者のほうが，ウェブをはじめとするICT技術による貢献を受けているかもしれません．ウェブを使えれば，外出できなくても最新ニュースを読めますし，買い物もできます．電子メールで友人と手紙をやりとりすることもできます．逆に，画面が見えないなどの理由でウェブを利用することができないなら，そうした利用者はウェブの利便性を受けることができず，電子政府のサービスからも取り残されてしまいます．

2011年3月11日，東北と東日本は未曾有の大地震に見舞われ，多くの方々が命を落としました．地震と津波による影響の他，安全に停止できなかった原発がまき散らす放射性物質などが大きな問題となっています．このような大震災において，高齢者や障害者を含む全ての人々が，避難や生活に必要な情報を迅速に受け取ることの重要性が改めてクローズアップされています．紙の資料をスキャンしただけのPDFは，視覚を使えない人には読めません．計画停電の画像も同じです．地域のスピーカーで津波が来ることをアナウンスしても，避難先の体育館で食事の用意ができたことを拡声器でアナウンスしても，聴覚を使えない人にはその情報は伝わりません．このような災害時にはパソコンは不向きで，携帯電話やスマートフォンのようなモバイルデバイスで情報を取得したり発信したりすることが有用であることもわかりました．また，誰かがウェブにアクセシブル（マシン・リーダブル）な形で情報を載せれば，善意と技術がある第三者がその情報を加工して，他の情報やサービスと合わせて，全てのユーザに有用な情報を公開できることもわかりました．TwitterやUstreamなどの新しいサービスによって多くの情報が流れ，情報リテラシーを持っていれば情報の信頼性が見分けられるので，自分が必要としている情報をそこから見つけられることもわかりました．アクセシブルなウェブが当たり前の社会になっていれば，このような非常時に必要な情報が手に入るのです．

私がこのウェブページ「簡単ユニバーサル・ウェブ」を書いたのは，高齢者や障害者を含む，誰もが簡単に利用できるわかりやすい（別の表現をすれば利用者に優しい，あるいはユーザビリティが高い，さらにアクセシビリティにも配慮している）ウェブサイトを構築する方法を，ウェブの初心者にもわかるように示したかったからです．しかも，ウェブに関する知識をできるだけ要求せずに，ウェブの標準に準拠したユニバーサルなウェブサイトを簡単に作る方法を示したいと思っています．（ユーザビリティとは使いやすさのことです．アクセシビリティとは，障害のあるなしなどの個人の状態に関わらず，誰でもが利用できるようにすることです．）

まだ何も学んでいない段階ですが，下記課題をやってみてください．この授業の後半で，もう一度同じ課題に取り組むと，自分の知識や理解が深まっていることが分かると思います．

ウェブ標準とは，W3Cが策定した技術仕様に則ってサイトを作成（コーディング）することを言います．

• コンテンツの構造をHTMLでマークアップし，そのデータの意味(semantics)をh1やtableなどのタグで示す．
• コンテンツの表現（どのように表示するか）はCSSで指定する．
• コンテンツのインターラクションはJavaScriptで与える．

今の時代のウェブサイトは，このウェブ標準に則って作成することが求められているし，クールな方法です．しかし，データ構造をHTMLでマークアップし，データのプレゼンテーションをCSSで指定することをせずに，マークアップでデータの見せ方まで指定してしまっているウェブサイトが多いです．また，そのような間違った教え方をする人もたくさんいらっしゃいます．

ウェブは，HTTP（HyperText Transfer Protocol）という手順に従って，ウェブブラウザ（User Agent）とウェブサーバがデータをやりとりします．やりとりされるデータは，HTML (HyperText Markup Language)という文法に則って記述されています．HTMLは，その名が示すように，ハイパーテキスト＋マークアップ言語です．

ハイパーテキスト：

ある情報が別の情報とリンクされていて，ひとつの情報から次から次へと関連する情報を呼び出せるような仕組み．HTMLならばリンクをクリックすると別のウェブページにジャンプしますが，これがインターネットにまたがったハイパーテキストの部分です．

マークアップ言語：

データの意味をタグという目印でマークすること．タグでマークアップすることで，データそのもの以外に，データの意味も記述できる．

データはHTMLという文法に従って書くと言いましたが，HTMLという文法に従ってデータ構造をマークアップ（タグ付け）すると言った方が適切かも知れません．たとえば<h1>タグで，そのデータが見出しであることをウェブブラウザに示すことができます．

<html>
  <head>
    <title>初めての授業</title>
  </head>

  <body>
      <h1>初めての授業</h1>
        <p>今日<strong>はじめて</strong>，東京女子大学で授業をしました．</p>
  </body>
</html>

Open

3.2.2 HTMLとワープロの違い

図1を例にとって，この「マークアップ」の重要性と，それがいかに誤解されて又無視されているかについて述べます．

図1a)は，この一群のデータが箇条書きのリストであることを，箇条書きリストのタグ<ul>とリストの各要素を示すタグ<li>を使って示しています．( 注：図1(a)の要素名は小文字で書くのが正しいです．）

ワープロはこれとはまったく違います．図1b)に示すように，ワープロの場合は，中点で始まる文章を少し字下げして並べることで視覚的に箇条書きリストを表現しています．（Wordはもう少し賢いので，Wordのスタイルを適切に使えば，意味をある程度表すこともできます．）

図1 HTMLとワープロの違い

ウェブブラウザは図1a)のようなHTMLを元に，画面には図1b)のように表示します．ウェブブラウザが表示するHTMLページとワープロの画面は非常に似ていますが，HTMLに書かれているのはデータとその意味だけで，それをどういう風に視覚的にレイアウトして表示するかはウェブブラウザに任されています．ですから音声表示専用のウェブブラウザは，耳で聞いたときに分かりやすいように箇条書きを表示することが可能です．（例えば，「リスト2項目．1番目の要素．2番目の要素．リスト終了」）

HTMLとワープロの違いをわかっていただけましたか? ワープロは文字をレイアウトすることで視覚的にデータの意味を暗示しています．HTMLではデータをマークアップすることで，明示的にデータの意味を表現できます．そしてそのデータをどう表現するかはスタイルシートとウェブブラウザーに任されているのです．ところが世の中には，このことを無視してHTMLのタグを使ってレイアウトしてしまっているウェブページが未だ多いのです．

[閉じる]

HTMLと並んで重要なのが CSS (Cascading Style Sheets)です．ウェブでは，データの見栄え（見せ方，表示方法，プレゼンテーション）は，HTMLではなくてCSSなどのスタイル言語を用いて指定します．つまり，データ構造をHTMLでマークアップし，データのプレゼンテーションをCSSで指定するのが，ウェブページの正しい（つまり，ウェブの標準に従った）作成方法です．

CSS（Cascading Style Sheets）では，画面，印刷，スライド，音声といった表示メディアごとに表示スタイルを指定できます．この仕組みを使うと，ウェブページを画面で見るときはゴシックフォントで表示し，印刷して読むときは新聞などで使われている明朝体フォントで表示し，音声で表示するときは本文は一郎君の声でリンク部分は花子さんの声で読み上げるというように，表示メディアに適した表示スタイルを使い分けることができます．しかもCSS2では，ウェブページの製作者が指定した表示スタイルを置き換える形でユーザが指定した表示スタイルを使うことができます．たとえば弱視のユーザならば，フォントサイズを大きくしたり色のコントラストを明確にしたりした自分専用のスタイルシートを使って，ウェブを見ることができます．（CSS3を使えば細かな見栄えの指定などが可能になりWebの表現力が増します．）

［CSSの力］：スタイルシートを切り替えて表示を変える例

CSS Zen Garden：

非常に有名なサイトです．同じコンテンツなのに，CSSを切り替えることでクールなデザインに生まれ変わることに驚くと思います．

ある研究会用に作成した発表資料 「ウェブ・アクセシビリティ向上の要件」：

このページの「表示切り替え」ボタンを押すか，アクセスキー+D とすると，プレゼンテーションを決めているスタイルシートがはずされて，素のテキスト表示になります．書いてある内容は同じなのに，スタイルシートのあるなしで，これだけ見栄えが異なることに驚くでしょう．

表示メディアに応じたスタイルシート：

この教材は画面幅や画面表示か印刷かによってCSSを切り替えるようになっています．例えばページ最上部のナビゲーションバーは，スマホのように幅が小さい画面ではハンバーガーメニューに折りたたまれて表示されます．幅の広いテーブルをスマホで表示すると，狭い画面でも読めるように横にスクロールできるようになります．画面表示ではほとんどのコンテンツは折りたたんで表示されますが，印刷時は全て展開されます．印刷時はリンクのURLも表示されます．このような工夫をすることで，ユーザの環境に適した表示ができるようになっています．便利だと思いませんか．（こうした機能の多くはBootstrapというフレームワークで実装しています．）

HTMLとスタイルシートを分離するメリットをわかっていただけましたでしょうか．スタイルシートを使わずにHTMLの要素中に文字の色や大きさなどの属性を指定してしまうと，表示スタイルとHTMLのデータを分離できなくなってしまいます．表示スタイルを指定したいときはスタイルシートを使うようにしましょう．

ウェブ標準を無視して，あるいは無知なために，HTMLの要素でレイアウトしてしまう間違いを2例挙げます．

Open

3.4.2 画面上にきれいにレイアウトしたいためにtable要素を使う間違い

下例に示すようにtableは表を作るための要素です．表では，縦方向や横方向に並んでいるデータにはお互いに関係があります．下記の例ならば，左側一列に並んでいるデータはコンピュータに関するデータで，右側の列は人間に関するデータです．横方向に見ても，各行ごとに両者で対照的な性質が書いてあります．

表 1 tableの例

コンピュータ	人間
とても高速	とても低速
エラーなし	エラーだらけ

table要素を使うときれいに縦横にレイアウトできるので，table要素をレイアウトのためだけに用いているケースが多いです．たとえば，下図2のように，ページ上端に広告記事，左端に今日の天気と株価の表示，右上端に本文，右下端にその他の記事が表示されているようなニュースサイトは，table要素で簡単に実現できます．

図2 レイアウトテーブルの例

広告記事
今日の天気	トップ記事は目に付きやすい位置にレイアウトされます．
株価	その他の記事

リスト2 レイアウトテーブル(図2)のHTMLソース

<table style="padding:5px;" >
  <tr>
    <td colspan="2" class="LT_ad" style="width:50; background-color:#EEEEEE;">広告記事</td>
  </tr>
  <tr>
    <td style="width:50; background-color:#EEEEEE;">今日の天気</td>
    <td style="width:100">トップ記事は目に付きやすい位置にレイアウトされます．</td>
  </tr>
  <tr>
    <td style="width:50; background-color:#EEEEEE;">株価</td>
    <td style="width:100; background-color:#EEEEEE;">その他の記事</td>
  </tr>
</table>

でも，このページでは，左と右の同じ高さに並んでいる情報には何の関連もありません．これらの情報はレイアウト上同じ高さに来ているだけです．このようなページを音声表示すると，古い（テーブル要素に対応していない）音声ブラウザは，たまたま同じ高さに並んでいる情報を続けて読み上げるので，音声で聞いている視覚障害者にはちんぷんかんぷんなことになってしまいかねません．このような音声ブラウザでレイアウトテーブルを読み上げるとどうなるかという例を図3に示します．

図3 table要素の誤用

ただし，音声ブラウザがテーブルをどういう順番で読み上げるかに配慮し，また，th要素やsummary属性などのテーブルの構造を表す要素を用いないようにすれば，table要素をレイアウト的に使っても問題があまり生じないようにできます．

図4にCSSのflexboxを使ってレイアウトする例を示します．（このソースを理解するためには，XHTMLやCSSの基礎知識が必要になりますが，それは後で解説します．）

［CSSの力］：図4 CSSによるレイアウト例

図4 CSSによるレイアウト例

図5にCSSのpositionプロパティを使ってレイアウトする例を示します．

［CSSの力］：図5 CSSによるレイアウト例

図5 CSSによるレイアウト例

上記ソース例に示すように，HTMLソースに書いてある順番と画面に表示される順番を異なるようにすることもできます．音声ブラウザはHTMLソースに書かれている順番に読み上げるので，この性質を上手に使えば，トップ記事を画面上は右真中に表示し，音声では最初に表示されるようにすることもできます．

[閉じる]

上記のほかに，HTML 3などの古い仕様でウェブページを書いている，あるいは HTML 4.01を使っていても古い仕様の考え方を引きずっているウェブページが多いです（図6）．授業などでも，こういう古い仕様が教えられているケースをよく見かけます．

ウェブが普及したとき，NetscapeとInternet Explorerのブラウザ戦争がありました．両ブラウザはシェア獲得を目指して，独自の機能を備えていきました．Internet Explorerのmarquee要素もこの一例です．このようににHTMLの機能が異なると，ブラウザごとにHTMLを用意しなければならず，ウェブの発展が阻害されてしまいます．このような背景の下で，ウェブの標準仕様を定めている国際コンソーシアムW3Cが1997年に公開したのが HTML 4です．HTML 4は，文書構造とプレゼンテーションを分離する考え方が取り入れられました．この結果，アクセシビリティにも配慮できるようになりました．HTML4をXMLの枠組みで捉えなおしたのが，XHTML 1.0です．現時点でも，(HTML 4.01または)XHTML 1.0に従ってウェブページを作成することもできますが，HTML5がW3Cの正式勧告になった2014年度後半以後は，HTML5で文書をマークアップするのが望ましいと思います．CSSもCSS2の他にCSS3が使えるようになっているので強力な表現力を持っています．

残念ながらHTML 4.01は，古いバージョンのHTMLの互換性のために，文書構造とプレゼンテーションを分離しない書き方も許容してしまいます．したがって，スタイルシートを一切使わなくても，HTMLの要素や属性で，プレゼンテーションを指定できてしまいます．

<body bgcolor="red" text="blue">
<p align="left">2005年8月4日<br>
<bold>鈴木一郎</bold>
</p>
...

ウェブブラウザがこのような古い考え方のページを問題なく表示できるから，CSSを使わない方が簡単だから，新しい仕様を覚えるのは面倒だから，そういう理由で古い方法を使い続けるのはやめましょう．文書構造をHTML5でマークアップし，プレゼンテーション（データの表示方法）をCSSで指定するのが，現在の標準です．