アクセシビリティ指針

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

当サイトでは、Web アクセシビリティに関する情報を発信するという立場から、その規範例となるべく、アクセシビリティ指針を以下のとおり定め、実践しています。

目次

Web 標準への準拠について

当サイトの各ページは、アクセシビリティ実現のための基本的な前提として、Web 標準 (Web Standards) に則って制作されています (HTML5 形式)。すべてのページは、W3C (World Wide Web Consortium) 提供のバリデータを使って検証されています。

なお、当サイトでは、バリデータを使った機械的な検証だけにとどまらず、実際の内容面においても、ドキュメント構造 (大見出し、小見出し、段落、強調箇所、箇条書き、挿絵画像、ハイパーリンクといった文書の構成要素の関係性) が意味的に/文脈的に適切であるように留意しています。

また、より先進的なアクセシビリティ実現の試みとして、WAI-ARIA で定義されている Landmark Roles を、各ページのソースコードに埋め込んでいます。具体的には、以下の通りです。

上記に挙げた各 Landmark Roles によって、一部の支援技術 (スクリーンリーダーなど) は自動的に、ページの構成要素を把握することができる仕組みになっています。これによって、より有用な情報が、支援技術を通じてわかりやすくユーザーに伝わることが期待できます。

読みやすさについて

文字の大きさ

当サイトでは、サイトロゴや見出しなども含め、画像化された文字は使用せず HTML テキストを使用しています。これらの HTML テキストは文字サイズが固定されていないので、ユーザーの任意によって、文字を自由に拡大 (または縮小) することができます。

なお、当サイトでは現在、アクセシビリティ対策の典型例として多くのサイトに見られる (主にJavaScriptを使ってページ内に実装されている) 文字拡大/縮小機能を採用していません。その背景については、当サイトの記事「文字拡大/縮小機能の実装を外しました」をご参照ください。

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

行間

一般的には「日本語文書では行送りを文字サイズの150パーセント程度 (つまり行間は文字サイズの半分) に設定すると読みやすいといわれている」ようです (参考 : IT 用語辞典 e-Words)。また、鈴木一誌氏の「ページネーションのための基本マニュアル」によると、行間は「70パーセント前後を基本 (行長によって50〜90パーセントの範囲で設定可)」としています。

当サイトでは、Web というメディア特性 (紙媒体に比べ読みづらい) を考慮し、可読性を高めるために、広めに行間を確保 (文字サイズの90パーセント) しています。

色の識別について

配色

当サイトでは、情報そのもの (文字や重要な図示など) の識別が容易になるように、前景色と背景色のコントラストを十分に確保するようにしています。文字情報については HTML テキストだけでなく、画像内キャプション文字についても同様の配慮をしています。

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

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

Contrast Analyzer では、JIS X8341-3:2010 の「7.1.4.3 最低限のコントラスト」および WCAG 2.0 の「1.4.3 Contrast (Minimum)」で定められている達成基準 (等級 AA 相当) をクリアする配色になっていることを確認しています。

JIS X8341-3:2010 および WCAG 2.0 への対応については、下記「JIS X8341-3:2010 および WCAG 2.0 対応について」をご参照ください。

色のみに依存しない情報内容の識別

当サイトではまた、配色に配慮するのと同時に「色のみに依存した情報内容の識別」を極力排除しています。具体的には、以下の対策を講じています。なお、色のみに依存しないことの重要性について詳しくは、当サイトの記事「色だけに依存しない (その1)」「色だけに依存しない (その2)」をご参照ください。

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

基本的なマークアップ

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

また、データテーブル (表) を当サイト内で使用する場合は、適切な音声読み上げができるように、以下に留意しています。

音声読み上げに配慮した表記

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

画像の代替テキスト

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

その他、音声読み上げに対する配慮

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

キーボード操作への配慮について

当サイトでは、上肢の障碍や怪我などでマウス操作が困難な人への配慮として、キーボード操作だけでもサイトを閲覧できるように留意しています。具体的には、キーボード操作 (Tab キー) によってリンク箇所やフォーム要素にフォーカスが当たっている場合、当該フォーカス箇所を視覚的に明示する工夫をしています。詳しくは「キーボード操作におけるフォーカスの可視化」をご参照ください。

同様の配慮は、各記事ページの「ソーシャルメディアで共有」でも行なっています。ただし、ソーシャルメディアサービス側が提供するボタンの仕様上の制限によって、一部、アクセシブルでない箇所があります。具体的には、Facebook「いいね！」ボタンおよび Google +1 ボタンは、キーボード操作では押すことができません。

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

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

ユーザーインターフェースの実験的表示を試すページにおいては、高解像度画像を扱ったりなどの理由で、トータルファイルサイズの基準を超えることがあります。その場合であっても、ページの読み込み時間の基準は満たすようにしています。

別ウィンドウについて

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

ただし、各記事ページの「ソーシャルメディアで共有」においては、ソーシャルメディアサービス側が提供するボタンの仕様上の制限によって、別ウィンドウが開く場合があります。具体的には、「Twitter でつぶやく」ボタンと、Facebook「いいね！」ボタン (および Facebook アカウント登録へのリンク) です。

画面解像度について

当サイトでは、できるだけ多くの Web 閲覧環境でご覧いただけるソリューションの一環として、PC 環境において800×600ピクセルの画面解像度でも横スクロールが出ないことを条件にしています。その背景については「Web ページの横幅について」をご参照ください。

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

モバイル対応について

当サイトでは、想定されるユーザー行動への対応として、モバイル端末 (スマートフォン) においても PC 環境と同等のユーザーエクスペリエンスを得られるようにしています。

具体的には、PC およびモバイルで共通の HTML を使用し、CSS3 Media Queries によって、閲覧環境 (PC かモバイルか) に応じたプレゼンテーションの最適化を図っています。こうすることで、下記を実現しています。

そのうえで、モバイル端末でも見やすく操作しやすくなるように、下記に配慮しています。

上記の配慮にあたっては、平均的な iPhone 用サイトやアプリケーションよりも余裕を持たせたレイアウトデザインを心がけています。

JIS X8341-3:2010 および WCAG 2.0 への準拠について

当サイトでは、上記で述べた数々の指針を含め、「JIS X8341-3:2010 (高齢者・障害者等配慮設計指針 – 情報通信における機器、ソフトウェア及びサービス – 第3部 : ウェブコンテンツ)」に対応しています。同様に、W3C が勧告しているアクセシビリティ指針「WCAG 2.0 (Web Content Accessibility Guidelines 2.0)」にも対応しています (WCAG 2.0 は、JIS X8341-3:2010 のベースとなっている指針なので、内容的には、ほぼ同一です)。

JIS X8341-3:2010 には達成基準として3つの等級 (A、AA、AAA) が設けられていますが、当サイトの基本姿勢として、等級 AA を達成することを目指しています。具体的な達成状況につきましては、JIS X8341-3:2010 規格票の箇条8に基づいて作成した下記のドキュメントをご参照ください。

検証ツールについて

表示検証ブラウザ

当サイトでは、代表的なブラウザにおいて、意図したとおりの視覚的表現ができることを基本方針としています。現時点 (このページの最下部にある「最終更新日」をご参照) で表示検証に使用しているブラウザは以下のとおりです。

アクセシビリティ検証ツール

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

Web Developer
Firefox アドオン。各種バリデート、ソースコードの検証、CSSやJavaScriptの無効化シミュレーション、リニアライズ (線形化) 表示による音声読み上げ順序のシミュレーション、ブラウザ表示幅の変更、などが可能です。
Firebug
Firefox アドオン。現在開いている Web ページに関係するあらゆるファイル (HTML ファイルや画像ファイル、JavaScript ファイルや CSS ファイルなど) を足し合わせた、トータルのファイルサイズを確認したり、ページの読み込み時間の実測値を計測するのに使用しています。
Color Selector
文字色と背景色の組み合わせが適切かを (白内障や色覚特性を持つユーザーが利用することも含めて) シミューレーションできるツールです。
Contrast Analyzer
文字色と背景色の組み合わせが適切かを、JIS X8341-3:2010 (および WCAG 2.0) の規定「7.1.4.3 最低限のコントラスト (達成基準等級 AA)」「7.1.4.6 より十分なコントラスト (達成基準等級 AAA)」に基づいてシミュレーションできるツールです。
Sim Daltonism
Web ページが色覚特性を持つユーザーにどう見えるのかをシミュレーションできます。
WAVE
Firefox アドオン。アクセシビリティ全般のチェックが可能なツールです。JIS X8341-3:2010 や WCAG 2.0 といった特定の指針に対する準拠状況を判定するというよりは、実際にサイトを使うユーザー観点からの実質的な検証ができることを重視しているツールと言えます。
NVDA
Windows 用に開発されている、オープンソースの無料スクリーンリーダー。別途、SAPI4 または SAPI5 の日本語音声合成エンジンが必要です (簡易的な音声合成エンジン「jtalk」も付属しています)。当サイトの検証では主に、SAPI5 (Microsoft Speech API Version 5）相当の日本語音声合成エンジン「MSSpeech Haruka」を使用しています。
VoiceOver (Mac OS X)
Mac OS X に標準装備されているスクリーンリーダー。別途、日本語音声合成エンジンが必要です。当サイトの検証では「ドキュメントトーカ日本語音声合成エンジン for Mac」を使用しています。
VoiceOver (iOS4)
iOS4 搭載機器 (iPhone や iPad など) に標準装備されているスクリーンリーダー。デフォルトで日本語音声合成エンジンが組み込まれています。当サイトの検証では iPhone 4 の VoiceOver を使用しています。

アクセシビリティ指針の変更について

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

なお、ここで記述している指針に加え、当サイトでは Web アクセシビリティに関するノウハウを随時蓄積し発信しています。Web アクセシビリティに関するご意見、当指針についてお気づきの点やアドバイスなどございましたら、お気軽にお問い合わせページよりお寄せいただけますと幸いです。

(最終更新日：2011年12月25日)