人に優しいユニバーサルなホームページの
現状と課題

Studio Phiz（スタジオフィズ）横川祐子

1. ウェブにおける「アクセシビリティ」とは

障碍のある人や高齢者を含め、誰でもが利用しやすい状態を「アクセシブル」といい、そのような利用しやすさを「アクセシビリティ」という
- アクセシビリティに配慮すると、健常者が一時的に閲覧に支障のある状況に置かれている場合にも役に立つ

2. 人に伝えるための文書では「構造化」が重要

文章を構成する各部分の役割・立場を示すのが構造化
構造化すると、概略の把握や情報の検索が可能になる（例：本の目次）
世の中の構造化の多くは、目で見ることを前提とした手法に偏っている

3. ウェブというメディアの特性

双方向
テキスト（文字データ）＋非テキスト（画像・音声・動画など）
マシンに文書構造を認識させ出力を自動化
- 現実には、構造化が「見える人」にしか通じない（マシンが認識できない）方法で行われているページが多い

4. コンピュータに文書の構造を教える言語が「HTML」

国際的な標準化団体、W3Cが策定
HTMLのタグでは見た目の指定（レイアウトや文字サイズ、色の情報などのデザイン指定）は書かない
見た目の指定にはCSSという別の言語を使う
画面のレイアウトをするのが「HTML」と思っていた人は要注意
アクセシビリティに関する問題の多くが、HTMLの書き方に由来

5. 起こりやすいアクセシビリティ上の問題

構造の欠落（見出しタグが無いなど）
情報の欠落（画像やイメージマップの代替テキストなど）
テーブルに関するもの（テーブルレイアウトの場合、情報の順序に注意）
リンクテキストが不適切（リンクだけ抜き出しても行き先が分かるように）
色の扱いが不適切（色名でユーザに指示・誘導を行わないこと）
テキストの扱い（一つの単語の中にスペースや改行タグを入れない）
フレーム（原則として廃止すべき）

6. アクセシビリティが確保できない原因

サイト制作時の問題

発注側の意識（問題そのものが認識されていない）
制作者のスキル（自己申告があてにならない場合も）
両者の協議不足（設計上の不備を招く可能性が高い）

更新に伴う問題

設計上、発注側による更新が十分考慮されていない
制作者からのマニュアルや指導の不足
発注側の勉強不足

その他

指針の細かい項目にこだわる（優先度が分からない）
納品されるHTMLの質を発注側が判定できないため、ダメ出しができていない

発注側がHTMLの基本的なしくみを理解することが必要

7. 対処法

定期的な勉強会
- 「Web標準」を意識して勉強すると良い
CMS（コンテンツマネージメントシステム）の導入
ページの検証にフリーのツールを活用

8. フリーのツールでページを簡易検証

Another HTML-lint gatewayで文法とアクセシビリティを簡易検証

URLを指定するか、HTMLを直接入力して、ページの文法チェックを行う
減点法なので、最低点はマイナスになることも
imgタグのalt属性が抜けていたり、「ここ」「こちら」などのリンクテキストを使うと警告される
見出しが無いページでも100点を取ることが可能なので、点数は絶対視せずあくまで参考程度に

FirefoxとWeb Developerでアクセシビリティを簡易検証

まずは文字サイズを拡大（可能なら3段階以上）
アドオン「Web Developer」を使って
1. 表のセルを枠で囲む（情報の順序を確認したら一旦解除）
  - [枠表示 > table要素を枠で囲う > テーブルのセル]
  - [Outline > Outline Tables > Outline Table Cells]
2. CSSをオフ
  - [CSS > CSSを無効にする > すべてのCSS]
  - [CSS > Disable Styles > All Styles]
3. 画像をaltに変換
  - [画像 > 画像をalt属性値で置き換える]
  - [Images > Replace Images With Alt Attributes]
4. 見出しを枠で囲む
  - [枠表示 > h要素を枠で囲う]
  - [Outline > Outline Headings]

9. まとめ

難しそうと尻込みせずHTMLに触れていく姿勢が大切（正しいHTMLはシンプル！）
HTMLの構造化の考え方を職場の「常識」に
- 「リンクテキスト」→「ページタイトル」→「レベル1の見出し」の流れを意識しよう
外注する場合、制作者のスキルを見極める目を養おう

10. リファレンス

ウェブ

いまさら聞けない“Web標準”、そしてXHTML＋CSS
http://www.atmarkit.co.jp/fwcr/rensai/imasara04/imasara04_1.html: 情報バリアフリーを実現するためのHTML+CSSのしくみ（Web標準）を簡単に解説
The Web Kanzaki
http://www.kanzaki.com/: 「ごく簡単なHTMLの説明」から読み始め、アクセシビリティ関連のページへ読み進めるとよい
自治体サイトWebアクセシビリティ調査
http://www.u-works.co.jp/jichitai/: 有限会社ユニバーサルワークスが毎年行なっているアクセシビリティ調査

ツール

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html: HTML文書の文法をチェックし採点するツール
次世代ブラウザ Firefox
http://www.mozilla-japan.org/products/firefox/: Firefoxやアドオンのダウンロードが可能な公式サイト
ミナトラボ：Web Developer 日本語版
http://lab.tubonotubo.jp/tools/webdeveloper/index.html: Firefoxアドオン「Web Developer」の日本語版を配布

書籍

Web標準テキスト(3) HTML/XHTML
http://gihyo.jp/book/2008/978-4-7741-3328-7: 今回の講座で取り上げた内容をHTML面でさらに詳しく知るための1冊
できるポケット使って覚えるHTML&CSSの基本がマスターできる本／
できるポケット使って覚えるHTML&CSSの基本がマスターできる本改訂版（5月23日発売）
http://www.impressjapan.jp/books/2184.php
http://www.impressjapan.jp/books/2567: 実際にページ作りの作業をすることでHTML/CSSのしくみを知りたい人にお勧め

© 2008 Studio Phiz