Website Usability Info


本文へスキップ



ここから本文です。 現在位置表示(パンくずリスト)は、このすぐ上にあります。

アクセシビリティ(ユニバーサルデザイン)ポリシー

Website Usability Info(以下、当サイトといいます)は、Webアクセシビリティ、すなわち「WebサイトにおけるUD(ユニバーサルデザイン)」の普及/一般化を社会の要請として捉えており、すべてのWebサイトにおいて、最低限のアクセシビリティが確保されるべきものと考えます。

当サイトでは、アクセシビリティ(ユニバーサルデザイン)ポリシーを以下のとおり定め、実践しております。

Web標準への準拠について

当サイトの各ページは、アクセシビリティ実現のための基本的な前提として、Web標準(Web Standards)に則って制作されています(XHTML 1.0 Strict形式)。すべてのページは、W3C(World Wide Web Consortium)提供のバリデータによって、有効な XHTML1.0 Strict ドキュメントであることを確認しています。

また、単にバリデータで機械的に検証するだけでなく、内容の観点でも、ドキュメント構造(大見出し、小見出し、段落、強調箇所、箇条書き、挿絵、ハイパーリンクといった文書の構成要素の関係性)が適切であるように配慮しています。

可読性について

文字の大きさ

当サイトでは、見出しやグローバルナビゲーションのメニュー項目なども含め、基本的に画像化された文字は使用せず、極力、HTMLテキストを使用しています。これらHTMLテキストの表示サイズは固定していないので、ユーザー(サイト閲覧者)の任意によって、文字を自由に拡大(もしくは縮小)することができます。

ちなみに最近のブラウザに実装されている拡大/縮小表示機能は、デフォルトでは文字(HTMLテキスト)のサイズだけを変更するのでなく、画像を含めたページ全体がサイズ変更の対象となっており、ユーザーの任意なカスタマイズによって初めて、文字(HTMLテキスト)だけをサイズ変更できる仕組みになっています。このようにHTMLテキストだけをサイズ変更する場合であっても、当サイトではレイアウトが崩れないように配慮しています。

なお、一部の画像内には、補足説明のためのキャプション文字が存在していますが、これら画像内キャプションについては、文字サイズが固定されてしまうことを前提に、あらかじめ適切な大きさを確保するよう留意しています。具体的には、ブラウザの標準的な文字表示サイズ(CSSで設定するところの「font-size:100%;」相当)と同等かそれ以上の大きさにしています。

現時点で当サイトでは、アクセシビリティ対策の典型例として多くのサイトに見られるような、JavaScriptによる文字拡大/縮小機能を採用していません。その背景については、コラム記事「文字拡大/縮小機能の実装を外しました」をご参照ください。

行間

雑誌や新聞などの紙媒体においては、一般的に読みやすい行間は「文字サイズの30から50パーセント程度」と言われています。当サイトでは、Webというメディア特性(紙媒体に比べ読みづらい)を考慮し、可読性を高めるために、一般的な基準よりも行間を広く確保(文字サイズの90パーセント)しています。

配色

文字色と背景色のコントラストを十分に確保するようにしています。HTMLテキストだけでなく、画像内キャプション文字についても同等の配慮をしています。

コントラストの検証には、Color Selectorと、Contrast Analyzerを使用しています。

Color Selectorでは、白内障や以下の色覚特異性を持つ方であっても、情報の識別ができる配色になっていることを確認しています。

  • 第一色覚特異性(赤の視感度がないか弱い)
  • 第二色覚特異性(緑の視感度がないか弱い)
  • 第三色覚特異性(青の視感度がないか弱い)

Contrast Analyzerでは、WCAG 2.0(下記参照)の「1.4.3 最低限のコントラスト」で定められている達成基準(レベルAA相当)をクリアする配色になっていることを確認しています。

また、配色に関連しては、併せて以下の対策も講じています。

  • 「色のみに依存した情報内容の識別」を極力排除しています。たとえば、Webユーザーにとって重要な情報であるリンク箇所には基本的に下線を付しています(さらに、クリック済のリンク箇所は、色を変えるのではなく下線の種類を点線に変えて表示しています)。また、強調箇所(<strong>要素)は色を変えるだけでなくボールド(太字)でも表示しています。
  • キーボード操作によってリンク箇所やフォーム要素をフォーカスしている場合、当該フォーカス箇所を視覚的に明示する工夫をしています。詳しくは「キーボード操作におけるフォーカスの可視化」をご参照ください。
  • ロービジョン(弱視)ユーザー向けに代替スタイルシートを別途用意しており、現時点では Firefox および Opera でご利用いただけます。詳しくは「ロービジョン(弱視)向けの代替スタイルシート」をご参照ください。

音声読み上げに対する配慮について

当サイトでは、上記「Web標準への準拠について」で述べたとおり、各ページのドキュメント構造が適切であるように配慮しています。つまり、CSS(視覚的なレイアウト制御)を外した状態であってもページの内容が伝わるようにしているため、スクリーンリーダーや音声ブラウザを使って音声読み上げをしているユーザーにとっても、情報を得やすいようになっています。

また、各ページの文章が音声で読み上げられるケースを想定し、「記号や単位などはできるだけ言葉で表記する」「視覚的な演出をテキスト文字では表記しない」といった配慮も(視覚的な可読性を損ねない範囲で)大切と考えます。たとえば、当サイトでは以下を実践しています。

  • 「A〜B」ではなく「AからBまで」と表記する。
  • 「%」「GB」ではなく「パーセント」「ギガバイト」と表記する。
  • 「¥2,000」ではなく「2,000円」と表記する。
  • 日付は「10/10」ではなく「10月10日」と表記する。
  • 曜日は「(金)」ではなく「金曜日」と表記する。
  • 視覚的な演出を目的とした記号(目印としての●や※など)をテキストとして表記しない。
  • 目立たせる目的で一単語内の文字間にスペースを挿入しない(「す ご い」など)。

なお、ページ内で使用している画像に代替テキスト(alt属性)を入れる際には、当サイトのコラム記事「<img>要素のalt属性の入れ方」を基本ルールとしています。

さらに、音声読み上げに対する配慮としては、併せて以下の対策も講じています。

ページの読み込み時間について

Webの世界では、以前より「8秒ルール」と呼ばれる、ページ読み込み時間に関するセオリーがあります。昨今はFTTH(光ファイバー)やADSLといった高速ブロードバンドが一般的になってきていることもあり、さらに短い「6秒ルール」「3秒ルール」といった言葉も聞かれます。当サイトでは、Firefoxのアドオンである「Firebug」と「Hammerhead」というツールを使って、以下のように計測しています。

  • 各ページの読み込み時間については、「下りの速度が20Mbpsから30Mbps程度(速度.jp スピードテストによる)」で「無線LAN使用によるボトルネックあり」という環境下で「スーパーリロード(キャッシュをクリアした状態でのページ読み込み)したときのHammerheadでの計測値が、最大でも3秒台であること」を基準としています。
  • ページの読み込み時間に大きな影響を与えるトータルファイルサイズ(HTMLファイルや画像ファイル、JavaScriptファイルやCSSファイルなどの合計サイズ)については、「スーパーリロードしたときのFirebugでの計測値が、500KB以内であること」を基準としています。

ただし、コラムカテゴリーの記事一覧ページや、あるキーワード(タグ)の記事一覧ページにおいては、リストアップされる記事数によって、上記の基準を満たせないことがあります。その場合は「一覧結果を1ページに収めて見渡せること」のメリットを重視することとし、敢えてページあたりの軽量化(一覧の複数ページ分割)は行なっておりません。
また、ユーザーインターフェースの実験的表示を試すページにおいては、高解像度画像を扱うなどの理由で、トータルファイルサイズの基準を超えることがあります。その場合であっても、ページの読み込み時間の基準は満たすようにしています。

画面解像度について

当サイトでは、800×600ピクセルの画面解像度で横スクロールがでないことを条件にしています。その背景については「Webページの横幅について」をご参照ください。

同時に、実際に当サイトに来訪いただいているユーザー環境(高解像度な画面での閲覧が多いことがアクセスログ解析によって明らかになっています)にも適切に対応する必要があると考え、画面解像度に対して柔軟な対応が可能なリキッドレイアウトを採用しています。詳しくは「リキッドレイアウト」をご参照ください。

別ウィンドウについて

当サイトでは、別ウィンドウが開くリンクや仕掛けは使用しておりません。その背景については「 別ウィンドウを開くことの是非」をご参照ください。

表示を検証するブラウザについて

当サイトでは、代表的なモダンブラウザ(Internet Explorer、Firefox、Opera、Safariなど)において、意図したとおりの視覚的表現ができることを基本ポリシーとしています。現時点(下記「最終更新日」をご参照)での検証対象ブラウザは以下のとおりです。

  • Internet Explorer 6.0/7.0/8.0(Windows)
  • Firefox 3.6(Windows)
  • Opera 10.1(Windows)
  • Google Chrome 4.0(Windows)
  • Safari 4.0(Mac OS)
  • Firefox 3.6(Mac OS)
  • Opera 10.1(Mac OS)

携帯電話端末からのアクセスについて

当サイトでは、幅広いユーザーエージェント(サイト閲覧環境)からのアクセシビリティという観点から、コラム記事の内容を携帯電話端末からでも閲覧できるようにしています。詳しくは「Webサイトを携帯対応に」をご参照ください。

JIS X8341-3 対応について

当サイトは、上記で述べた数々のポリシーを含め、JIS X8341-3「高齢者・障害者等配慮設計指針−情報通信における機器、ソフトウェア及びサービス−第3部:ウェブコンテンツ」に準拠しています(必須項目だけでなく、推奨項目も基本的に満たすようにしております)。なお、準拠の検証には、Web Inspectorを使用しています。この検証ツールで指摘された問題で、解決できないものがある場合は(たとえばユーザーインターフェースの実験的表示を試すページなど)、その旨を当該ページ内に明記しております。

WCAG 2.0 対応について

当サイトは、W3C(World Wide Web Consortium)が勧告しているアクセシビリティ指針「WCAG 2.0(Web Content Accessibility Guidelines 2.0)」にも準拠しています。WCAG 2.0には3つの達成基準レベル(A、AA、AAA)が設けられていますが、最低限、レベルAを確保した上で、基本姿勢としてレベルAAを達成することを目指しています。

なお、当サイトでは、すべてのアクセシビリティ要件がレベルAAAに達することを最終目的とはしておりません(W3Cもそれを推奨しているわけではありません)が、一部対応可能なものについては、レベルAAAを実現しています。具体的には以下のとおりです。

  • 1.4.6 文字のコントラスト比(ロービジョンユーザー向けの代替スタイルシートにて、レベルAAAのコントラスト比を実現しています。)
  • 1.4.8 テキストブロックの視覚的な表現
  • 2.3.3 閃光
  • 2.4.8 現在位置
  • 2.4.9 リンクの目的(ただし一部のページでは、リンク箇所に共通ラベルを用い、<a>要素のtitle属性によってリンク表現のユニークネスを実現している箇所があります。この場合、ユーザーエージェント側で<a>要素のtitle属性を解釈できることが前提となります。)
  • 2.4.10 セクション見出し
  • 3.1.3 一般的ではない用語(ページ内で初出の箇所に、補足説明を付記するように配慮しています。または、当該用語を解説しているページにリンクするようにしています。)
  • 3.1.4 略語(ページ内で初出の箇所に、補足説明を付記するように配慮しています。または、当該用語を解説しているページにリンクするようにしています。)
  • 3.2.5 利用者の要求による状況の変化

検証ツールについて

当サイトでは、アクセシビリティの検証ツールとして、以下のツールを使用しています。

Web Developer
Firefoxツールバー。各種バリデート、ソースコードの検証、CSSやJavaScriptの無効化シミュレーション、リニアライズ(線形化)表示による音声読み上げ順序のシミュレーションなどが可能です。
Vischeck
Webページが色覚特異性を持つユーザーにどう見えるのかをシミュレーションできます。
Firebug
Firefoxアドオン。現在開いているWebページに関係するあらゆるファイル(HTMLファイルや画像ファイル、JavaScriptファイルやCSSファイルなど)を足し合わせた、トータルのファイルサイズを計測してくれます。
Hammerhead
上記「Firebug」の機能拡張。ページの読み込み時間の実測値をリアルタイムで表示してくれます。
Web Inspector
Webページが「JIS X8341-3(高齢者・障害者等配慮設計指針)」に適合しているかを検証できるツールです。
Color Selector
文字色と背景色の組み合わせが適切かを(白内障や色覚特異性を持つユーザーが利用することも含めて)シミューレーションできるツールです。
Contrast Analyzer
文字色と背景色の組み合わせが適切かを、WCAG 2.0の規定「1.4.3 最低限のコントラスト」「1.4.6 より十分なコントラスト」に基づいてシミュレーションできるツールです。
Fangs
Firefoxアドオン。スクリーンリーダーや音声ブラウザによる読み上げ内容を、視覚的にエミュレートしてくれるツールです。
NVDA
オープンソースの無料スクリーンリーダーです。

アクセシビリティポリシーの変更について

アクセシビリティポリシーに変更が生じた場合は、このページに最新のアクセシビリティポリシーを掲載します。それにより皆様には、常に当サイトがどのようなアクセシビリティ(ユニバーサルデザイン)指針をもって運営されているかついてご確認いただくことができます。

当サイトでは、ここで述べているポリシー(指針)に加え、Webアクセシビリティに関するノウハウを随時蓄積し発信しております。アクセシビリティ/ユニバーサルデザイン(UD)実現のご相談はお気軽にお問い合わせください。また、当ポリシーについてお気づきの点やアドバイスなどございましたら、ご指摘いただけますと幸いです。

(最終更新日:2010年1月29日)

サイト内検索

キーワード(タグ)から探す

人気のコラム記事