JIS X8341-3や、WCAGの規格に完全に準拠することは困難です。しかし視覚障害者や高齢者への配慮が不要な訳ではありません。できることから始めませんか。

このページは、晴眼者向けに視覚障害、色覚障害および高齢者へのWebページ制作上の注意点を記述しています。
そのため、「悪い例」としてアクセシブルではない記述を行なっている個所および、文法的に不適切な個所があります。ご了承ください

画像には正しいalt属性を付ける

画像には分かりやすいalt属性を付けましょう。利用者にとって意味のない「バナー１」「バナー２」や、キーワードを無駄に詰め込んだ検索エンジンスパムのようなalt属性を付けてしまうと、音声読み上げリーダなどに頼らざるを得ない視覚障害者には、全くページの情報が伝わらなくなってしまいます。

しかし、すべての画像にalt属性を付ければよいという訳ではないのです。デザインのためだけに使用した画像の罫線や、CSS3を使わずに角丸の四角形を作る場合の四隅の画像などにわざわざ属性を付ける必要はありません。返って混乱を招くでしょう。alt="" のように空で良いので、属性自体は記述する必要はあります。そうでないと、音声ブラウザによってはファイル名を読み上げてしまうものもあります。

行頭文字にデザイン要素として画像を使用したい場合は、before疑似要素を使うという方法もあります。

ホームへもどる

とクラスを付けて、

.home:before {
  content: url("/images/home.png");
  padding-right: 5px;
}

のようなCSSを書けば、視覚化されたブラウザでは家のアイコンが表示されますが、HTML上には画像は現れないので、どのようなalt属性を付ければよいか悩む必要もなくなりますね。本稿のタイトルに付いている丸印も、before疑似要素を利用しています。そうしないと、見出しが読み上げられる度に、「まるがぞうにはただしい…」となってしまいます。音声では行頭の丸印は意味をなさないので、before/after疑似要素には、こういった使い方もあります。

日付、時刻などの表記に注意する

アクセシブルな日付の書き方

皆さんは日付を書く際にどのような表記をされるでしょうか。いくつかのパターンがありますね。

2014.4.12
2014/4/12
2014年4月12日
2014年04月12日
平成26年4月12日

我々がベストだと考えるのは、3番です。どれでも「全く分からない」ということはないでしょう。しかし、スラッシュで区切った記法では、「よんぶんのにせんじゅうよんすらっしゅじゅうに」と、分数と解釈されて読み上げられてしまう可能性を否定できませんし、和暦だと元号の変更があった場合、読み上げの辞書に登録されておらず、単漢字で読まれてしまうかもしれません。

アクセシブルな時刻の書き方

では、時刻の表記はどうでしょうか。

13:20
AM 1:20
1:20 a.m.
午後1時20分
13時20分

アクセシブルな日付の記述と同様に、4番、5番がいいでしょう。コロンで区切る記法だと「じゅうさんたいにじゅう」と比率で読まれてしまうかも知れません。

英文表記としては、3番が正しいようですが、日本語を読み上げる音声ブラウザやスクリーンリーダでは、「えいてんえむてん」と読まれてしまう可能性を否定できず、リスクは避けた方が良いと考えます。

表を利用する場合は線形化されたテーブルとする

線形化されたテーブルとはいったい何でしょうか。簡単に言うと、「テーブル関連の要素（タグ）を全て取り除いても読める」テーブルのことです。

ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 では、「支援技術も含むユーザーエージェントが、段組みのような形式のテキストを正しく表現できるようになるまでは、文章を段組形式で表示させるすべてのテーブルに対して、段組していない状態の同等の役割を果たすテキストを提供する。」こととされています。以下に例を示します。

浦和駅の乗降客数	北浦和駅の乗降客数	南浦和駅の状況客数
80269人	49958人	57499人

上記の表を晴眼者が一見すると、正しく線形化されたテーブルのように見えます。しかし、音声ブラウザやスクリーンリーダなどは、単純にテーブル関連のHTML要素を排除することで線形化するものが多いようです。

そうすると、「うらわえきのじょうこうきゃくすうきたうらわえきのじょうこうきゃくすうみなみうらわえきのじょうこうきゃくすうはちまんいひゃくろくじゅうきゅうにんよんまんきゅうせんきゅうひゃくごじゅうはちにんごまんななせんよんひゃうきゅうじゅうきゅうにん」と読み上げられ、音声で読み上げを聞いている利用者には意味が伝わりません。

このような単純な表の場合は、行と列を入れ替えることで対応が可能です。また、どうしても行列の入れ替えが行えない場合は、scope要素を使って縦方向への関連づけを行うことで音声ブラウザやスクリーンリーダなどの支援デバイスへ明示的に論理構造を示すことができます。


  
    
      見出し１
      見出し２
      見出し３
    
    
      データ１
      データ２
      データ３

見出し１	見出し２	見出し３
データ１	データ２	データ３

しかし、scope要素に対応していない支援デバイスもあることから、表組みでデータを表すためには細心の注意が必要です。特に、行や列を結合している場合などは、W3C WAGにあるよう、テキストを並記するのがよいでしょう。axis属性を使って多次元の表を論理的に表現するという方法もありますが、表組みでデータを表現する場合は、なるべくシンプルにし、単純な線形化を行って確認をするのが良いと考えます。