ウェブサイトのアクセシビリティ確保のための要件まとめ

2007.09.05 Author:

障害者や高齢者がサイト閲覧を容易にするため
今やサイト製作において
アクセシビリティを確保することは当たり前になりつつあります。
今一度、確認ということでまとめました。

■ページタイトル

  • 閲覧者に現在位置を容易に把握させるため それぞれのページに固有のタイトルを付ける。
  • タイトルにサイト名を含める。
    [例] 「ウェブサイトのアクセシビリティ確保のための要件まとめ - しゃいんブログ」

■画像の代替テキスト

  • 画像にalt属性による代替テキストを設定する。
  • リストシンボルなどのように説明の必要がない画像はalt属性を空欄にする。
  • 詳細な説明が必要な場合には補足情報を用意する。 地図やグラフ、図表などの画像の内容を詳細に把握することは困難。 画像にはalt属性のほかに同じページ内にテキストで補足情報を用意するか、 別に解説用ページを設けてリンクする。他の文脈を考慮したうえで 自然な読み上げを意識する。

■半角カタカナや機種依存文字

  • 全角数字、半角カタカナは文字化けを起こす可能性あるので使用しない。

■音声読み上げに配慮したテキスト表記

  • 単語内にスペースや改行を入れない。
    [例] 東_京(ひがしきょう)→東京(とうきょう)
  • 小数点や位取りの点を含む数値は半角で表記する。
    [例] 1,000→1,000
  • 記号や省略表記の使用に注意する。
    [例]
    記号や省略表記の注意すべき例

■使いやすくわかりやすいリンク

  • リンクは色やサイズを変えて認識しやすくする。
  • リンクテキストだけでリンク先の内容を予想できるようにする 。
    【悪い例】 こちら ここをクリック リンク
  • リンクには十分な大きさをとり、隣接リンクとの間隔をとる。
    行間もline-heightなどで調整

■文字サイズ

  • フォントサイズ指定はemを使用して、ユーザーがフォントサイズの変更を
    行えるようにする。
  • 初期設定で十分なフォントサイズを指定する。
  • 画像として文字を表示する場合、ほとんどのブラウザでは文字サイズを拡大して表示することができないので、あらかじめ大きく読みやすいサイズで文字を表示。

■見出しなどの文書構造

  • 視覚障害者はレイアウト、文字情報がないため、文章構造の把握が困難。 文章構造に則したHTMLコーディングをする。
ウェブサイトの目的にもよりますが、一般的なウェブアクセシビリティの基本は
こんなところだと思います。 漏れが無いかあなたが作ったウェブサイトもチェックしましょう。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ