アクセシビリティ指針

Website Usability Info (以下、当サイトといいます) は、Web アクセシビリティの普及および一般化を、社会の要請として捉えており、すべての Web サイトが最低限のアクセシビリティを備えているべきであると考えています。

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

Web 標準仕様に則ったマークアップ

当サイトでは、アクセシビリティ実現のための基本的な前提として、Web 標準仕様 (Web Standards) に則ったマークアップをしています。Web 標準仕様に則り「セマンティック (semantic)」「マシンリーダブル (machine-readable)」であることによって、多種多様なユーザーエージェント (デバイス、ブラウザ、支援技術) に適切に対応できることを期待しています。

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

HTML5

当サイトは、Web 標準仕様のうち、HTML5 によって制作されています。「HTML5 でないと基本的なアクセシビリティが担保できない」ということはまったく無いのですが、より「セマンティック」「マシンリーダブル」であることを目指す意味合いもあり、勧告前の仕様ではありますが HTML5 を試験的に採用しています。

WAI-ARIA ランドマーク

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

これらのランドマークによって、一部の支援技術 (スクリーンリーダーなど) は自動的に、ページの情報構造を理解できる (つまりユーザーに情報構造を適切に伝達できる) 仕組みになっています。

JIS X8341-3:2010 への準拠

当サイトは、「JIS X8341-3:2010 (高齢者・障害者等配慮設計指針 – 情報通信における機器、ソフトウェア及びサービス – 第3部 : ウェブコンテンツ)」の「等級 A」に準拠しています (基本姿勢としては「等級 AA」を満たすことを目指しており、そのほとんどを達成しています)。

詳しくは、JIS X8341-3:2010 規格票の箇条8に基づいて作成した、下記のドキュメントをご参照ください。

文字情報の読みやすさ

当サイトでは、文字情報の十分な読みやすさ (可読性) を確保するために、文字サイズ、行間、一行あたりの文字数について、以下のガイドラインを定めています。

文字サイズ

当サイトでは、あらゆる文字情報をユーザーの任意で拡大表示できることを基本としています。このため、サイトロゴや見出しなども含め、画像化された文字は使用せず HTML テキスト (font-size 非固定) を使用しています。

一部、記事内の挿絵画像の中に、補足説明のためのキャプション文字が含まれているものがあります。これら画像内キャプションは、ビットマップデータで文字サイズが固定されてしまうため、少なくとも PC での閲覧時には適切な大きさで表示されるよう (記事本文テキストの文字サイズと同等かそれ以上になるよう) 留意しています。また、今後公開する記事において画像に対するキャプションが必要な場合は、極力 <figcaption> 要素によるテキストで記述します (過去記事に対しても、できる限り <figcaption> 要素を追記したいと思います)。

行間

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

当サイトでは、Web というメディア特性 (紙媒体に比べ読みづらい) を考慮し、記事本文中の行間を上記の基準よりも広めに確保しています (文字サイズの90%)。

一行あたりの文字数

一行あたりの文字数が適切であることも、文字情報の読みやすさに大きく影響します。当サイトではいわゆる「リキッドレイアウト」を採用しており、一行あたりの文字数をユーザーの任意で調整することができます。

色の扱い

当サイトでは、主にロービジョンおよび色覚特性を持つユーザーへの配慮として、色の扱い (配色) について、以下のガイドラインを定めています。

前景色と背景色との間のコントラスト

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

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

Fujitsu Color Selector では、白内障や以下の色覚特性を持つユーザーでも、問題なく情報の識別ができる配色になっていることを確認 (シミュレーション) しています。

Contrast Analyzer では、JIS X8341-3:2010 の「7.1.4.3 最低限のコントラスト」で定められている達成基準 (等級 AA) をクリアする配色になっていることを確認 (シミュレーション) しています。

色に依存しない情報提示

当サイトでは、「色の違いがわからないと情報内容を識別できない」ようなデザインを極力排除しています (参考記事 : 「色だけに依存しない (その1)」「色だけに依存しない (その2)」)。具体的には、以下を実践しています。

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

当サイトでは、Web 標準仕様に則ったマークアップをすると同時に、内容面においても、ドキュメント構造 (大見出し、小見出し、段落、強調箇所、箇条書き、挿絵画像、ハイパーリンクといった文書の構成要素の関係性) が意味的に/文脈的に適切であるように留意しています。これにより、スタイルシート (視覚的なレイアウト制御) を外した状態でも各ページの情報内容が伝わるようになっているため、スクリーンリーダーを使って音声読み上げをしている視覚障害者ユーザーにとっても、情報を得やすいようになっています。

音声読み上げに対する配慮としては、併せて以下のガイドラインを定めています。

画像の代替テキスト

画像には必ず代替テキスト (alt 属性) を入れるようにしています。その際、当サイトの記事「<img> 要素の alt 属性の入れかた」を基本ルールとしています。

フォーム

データを入力するためのフオームでは、<label> 要素を用いて、ラベル (項目名) とフォームコントロール (テキストボックスやチェックボックスなどデータ入力のためのインターフェース要素) を関連付けています。

データテーブル

データテーブルについては、以下のマークアップルールを設けています。

文章表現

各ページの文章表現については、音声で読み上げられるケースを想定し、「記号や単位などはできるだけ言葉で表記する」「視覚的な演出を HTML テキストによって実装しない」ことにも留意しています。たとえば以下のような例が挙げられます。

キーボード操作への配慮

当サイトでは、上肢の障害や怪我などでマウス操作が困難なユーザーへの配慮として、キーボード操作だけでもコンテンツを閲覧することができるように留意しています。併せて、以下を実践しています。

フォーカス箇所の明示

Tab キーによってリンク箇所やフォームにフォーカスを当てた場合、当該フォーカス箇所を視覚的にわかりやすく示す工夫をしています。詳しくは「キーボード操作におけるフォーカスの可視化」をご参照ください。

具体的なリンクラベル

Tab キーによってリンク箇所を拾い読みするケースを想定し、リンクラベルは具体的に、それだけでリンク先の内容がわかるように記述しています。

ホームの新着記事、カテゴリーの記事一覧、および検索結果では、視覚的な煩雑さを避けるために「記事の全文」という共通したリンクラベルを用いていますが、CSS の「オフレフト (off-left)」テクニックによって、スクリーンリーダーのユーザー (視覚障害者) に対してユニークなリンクラベルを提供できるようにしています。

動画/音声コンテンツの扱い

当サイトでは、動画/音声コンテンツは、基本的に記事内容 (テキストによる文章) の補足として利用するにとどめ、動画/音声を視聴できなくても記事内容の理解には支障が出ないようにしています (第三者が制作した、キャプションやトランスクリプトなど代替コンテンツのない動画/音声を記事内に埋め込むことがありますが、その場合でも、記事内容の理解が大きく妨げられることのないようにしています)。

なお、動画/音声コンテンツは、ユーザーの任意で再生/停止の制御や音量調整ができるようにしています。ページの読み込み時も、動画や音声が自動的に再生されることはありません。

光過敏性発作や眩暈の防止

当サイトでは、光過敏性発作を引き起こす恐れのある視覚表現 (速い周期での閃光/明滅) や、眩暈を引き起こす恐れのある視覚表現 (渦巻きや同心円などの画面全体表示) は用いません。また、発作を引き起こすほどではなくても、ユーザーの集中を妨げる可能性のある視覚表現は、メインコンテンツの外側 (ユーザーの周辺視野) であっても配置しないようにしています。

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

アクセシビリティ指針に変更が生じた場合は、随時このページを更新して、最新の指針を掲載します (このページの末尾にある「最終更新日」をご確認ください)。お気づきの点やアドバイスなどございましたら、お気軽にお問い合わせページよりお寄せいただけますと幸いです。

(最終更新日:2012年9月25日)