アクセシビリティ

今度アクセシビリティに配慮したサイトが生き残る。

もはやホームページにおいてもバリヤフリーの時代が来た！

アクセシビリティとは、accessibility=とは、access+ability　つまり、アクセスのしやすさと言う考えからきているものであるが、もう少し深い意味で、バリアフリー的要素のほうが強いのかもしれない。

このガイドラインでは、どのようにすればウェブコンテンツが障害のある人にとってアクセシブルになるのかを説明しています。対象としては、すべてのウェブコンテンツ制作者(ページ制作者とサイト設計者)とオーサリングツールの開発者を想定しています。そして、このガイドラインの第一の目的は、ウェブのアクセシビリティを促進させることです。一方、このガイドラインに従うことは、ウェブコンテンツをすべてのユーザーが、どんなユーザーエージェント（たとえば、デスクトップパソコン上のブラウザ、音声ブラウザ、携帯電話、モバイル機器など）を利用していても、どのような環境（騒がしい場所、明るすぎる場所、暗すぎる場所、手を使えない状況）のもとでも利用可能にするということでもあります。また、このガイドラインに従えば、ユーザーがウェブ上からより速く情報を探し出せるようにもなります。このガイドラインは、コンテンツ制作者に画像や映像などを使わないことを奨めるものではありません。そのようなマルチメディアコンテンツを、多くのユーザーにとって、よりアクセシブルにするための制作方法を説明するものです。

ほか参考サイト

１．HTMLについて少々復習してみる。（ヴァージョンについて）

◆現在ホームページビルダーなどでデフォルトで使われているのが、HTML 4.01です。: HyperText Markup Language =HTML
◆次期バージョンとして、このページでも使っているのが、XHTML 1.0 および1.1です。: Extensible HyperText Markup Language =XHTML

２.アクセシビリティを考慮したHTML

◆HTML4.01よりできるだけXHTML1.0以降を使う。: HTMLの場合どうしても無駄なタグが入る。装飾がかえって見難さをかもし出してしまうこともある。
◆ホームページを利用する人は、健常者ばかりではない。: 色の配色などを考慮する。緑と赤の見合わせなどや、盲目の人に優しいサイトつくりとして読み上げソフトに配慮したサイトつくりを心がける。; 読み上げソフトなどの普及によりテーブルレイアウトでは、サイトの意味合いを伝えきれない場合がある。
◆文字サイズやサイトの背景色コントラストなどの見易さに考慮する。: テキスト文字が小さなサイトを見かけるが、年配者を考慮したフォントサイズを考える必要がある。またフォントサイズの変更が出来るようにしていておく。
◆CSS（スタイルシート）によるサイトデザインにする。: 装飾にかかる部分は出来るだけスタイルシートにする。

3.実際にアクセシビリティをチェックしてみる。

◆一度チェックしてみましょう？: アクセシビリティチェックツール
◆実際に富士通のサイトからダウンロードしてみましょう！: 富士通アクセシビリティ・アシスタンス : 富士通
◆構造的にもHTMLをチェックしていい点取れていれば結果的にアクセシビリティによいサイトといえる。: Another HTML-lint gateway
◆ホームページ作成ソフトなどでもアクセシビリティチェックツール機能が内在されているものも多い。: ホームページビルダーなどでもアクセシビリティチェックツールはついていますがCSS機能や、XHTMLなどを考えると以下の商品がコストパフォーマンス的にもお勧めです。

Expression Web 優待アップグレード版

posted with amazlet on 07.09.14

マイクロソフト (2007/02/16)
売り上げランキング: 2300

おすすめ度の平均:

抜群のコストパフォーマンス。

最強のコストパフォーマンス

ついに来たDreamweaverとの決別の日

Amazon.co.jp で詳細を見る

この商品は、Macromedia Dreamweaver、 Macromedia Contribute、 Adobe Golive、 IBMホームページビルダーをお持ちの方はご購入いただけます。

4.アクセシビリティを意識すれば結果SEOとなる。

◆テキストベースのページを作る。: 基本的に読み上げソフトでウェブ上の情報を得る方のためにテキストベースにてサイトを作る。
◆出来るだけXHTMLによるタグを使用する。: HTMLとXHTMLを比べてみると…ソースを見てもらえばわかるのだが、XHTMLは、簡素になっている。要するに装飾をつかさどるタグは基本的に使えないようになっている。もちろんXHTML 1.0 Transitionalであれば互換性があるし、特にHTMLでもXHTMLでも大きな仕様の違いがあるわけではないので、それほど神経質になることはない。若干気をつけなければならないことは、大文字小文字の問題。タグは基本的に小文字仕様。終了タグは、基本的に必要。もし<br>などの単独タグは、<br />と記す。などなど。無駄なタグは削除する。
◆装飾のタグは、CSS（スタイルシート）に任せる。: スタイルシートにできることはできるだけスタイルシートを使用する。たとえば<font>タグなどは使用しない。<table>レイアウトではなく<div>タグを使用したレイアウトをつかうなど。
◆装飾タグは、別ファイルとする。（スタイルシートなど）: スタイルシートは別ファイルとする。
◆各ページのデータ容量はできるだけ軽くする。: JavaScriptなどはできるだけ使わないようにするか、別ファイルにするかする。写真画像も大きすぎず、できれば、サムネイル画像にしておく。
◆タイトルを明確にする。: <title>タグでくくったタイトルは、そのページの重要なキーワードを明記する。
◆構造的HTMLを使用する。: <h1>～<h6><p><ul><li><ol><strong><div>などXHTMLで使用可能なタグをできるだけ使用する。; <br>改行タグや、<font><b>などのタグはあまり使用しない。
◆フレーム構造によるサイトは基本的に作らない。: フレームは、トップページのアドレスのみ表示されるため、サブページの検索対策、グローバルナビゲーション、ローカルナビゲーションの取り付けを怠りやすい。
◆画像を使う場合は<img>内に、必ずalt属性を入れる。: どうしても画像を使う場合は、<img>タグ内に、属性、alt="画像の説明文"を明記する。テキストで出来る部分は出来るだけテキストで表示する。
◆基本的にフラッシュなどでサイトを構築しない。: フラッシュを使用する場合は、HTMLバージョンのページも併設する。
◆日本語は全角文字を使用する。: 半角カタカナは使わない。（携帯サイトなどでは使えるようになっているが検索エンジンでどれだけ拾われてるか少々疑問。）
◆シンプル構造のサイト作り。: ボリュームのあるサイトでありかつシンプルでなければならない。トップページへの戻るなどのリンク、サイトマップ、グローバルナビゲーション、ローカルナビゲーションの取り付け。
◆販売目的だけのサイトだけでなく、インターネット上に有効な情報源となれるサイトを作る。: 結局技に走るだけでなく、もっと根本的に、どんな目的のサイトを作るかが問われる。どんなに技を磨いても、訪れる人が、喜んでくれるサイトとなっているかが一番重要であって、自サイトはインターネット上にとって、有効なサイトとなっているか？社会のためになるサイトとなっているか？という根本的なサイトつくり。社会のためになるサイト、人のためになるサイト、思いやりのあるサイトとなっていれば自然にリンクを貼ってくれたり、メジャーなポータルサイトからリンクを張ってもらえたり、紹介してもらえたりする。Web2.0の時代でなくてもそういうサイトが生き残っていくのだろう。